ناوبری عمودی (Vertical Navbar)
«ناوبری عمودی (Vertical Navbar)» منویی است که لینک ها زیرِ هم می آیند. معمولاً سمت چپ یا راست صفحه می نشیند. پایه اش فهرستِ <ul> و <li> است. سپس با CSS ظاهر می گیرد. مثل منوی بازی که مرحله ها را ردیفی نشان می دهد.
نمونه پایه ناوبری عمودی با CSS
در این نمونه رنگ پس زمینه خاکستری است. روی هاور، رنگ ها عوض می شوند.
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: black;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link and background color on hover */
li a:hover {
background-color: #555555;
color: white;
}
وضعیت فعال (Active)
لینک صفحه جاری را با کلاس «active» برجسته کن.
.active {
background-color: #04AA6D;
color: white;
}
وسط چین کردن لینک ها و افزودن مرز
برای وسط چین، text-align بده. برای مرزبندی، border به ul و li بده.
ul {
border: 1px solid #555555;
}
li {
text-align: center;
border-bottom: 1px solid #555555;
}
li:last-child {
border-bottom: none;
}
ناوبری عمودی تمام قد و چسبان
می خواهی هنگام اسکرول ثابت بماند؟ position: fixed و height: 100% بگذار.
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 130px;
background-color: #f1f1f1;
height: 100%;
position: fixed;
overflow: auto;
}
نکته: این نمونه شاید در موبایل کامل کار نکند.
ناوبری عمودی واکنش گرا
با Media Query اندازه و چیدمان را برای موبایل تغییر بده.
گام های سریع اجرا
- یک <ul> بساز و لینک ها را داخل <li> بگذار.
- list-style، margin و padding را صفر کن.
- display: block برای <a> بگذار تا کل ردیف کلیک پذیر شود.
- هاور، active و مرزها را با CSS تنظیم کن.
راهنمای بیشتر: صفحه نوار ناوبری و تراز با Align. همچنین خود ناوبری عمودی را نشانه گذاری کن.
جمع بندی سریع
- پایه با <ul> و <li> است.
- display: block کل ردیف را کلیک پذیر می کند.
- active مسیر فعلی را نشان می دهد.
- fixed نوار را چسبان می کند.
- با Media Query واکنش گرا شو.