مشخصات مقاله
-
1174
-
0.0
-
7468
-
0
-
0
ساخت منو افقی و عمودی بوسیله HTML
در این مقاله می آموزیم که چطور یک Icon Bar ( نوار آیکون ) با استفاده از کد CSS ایجاد کنید.
قدم اول : کد HTML را اضافه کنید.
مثال 1 :
قدم دوم : کد CSS را برای ساخت منو افقی اضافه کنید.
مثال (ایجاد منو افقی) :
body {margin:0;}
.icon-bar {
width: 100%;
background-color: #555;
overflow: auto;
}.icon-bar a {
float: left;
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}.icon-bar a:hover {
background-color: #000;
}.active {
background-color: #4CAF50;
}
کد CSS را برای ساخت منو عمودی اضافه کنید.
مثال (ایجاد منوی عمودی) :
body {margin:0}
.icon-bar {
width: 90px;
background-color: #555;
}.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}.icon-bar a:hover {
background-color: #000;
}.active {
background-color: #4CAF50;
}
