ناوبری افقی (Horizontal Navbar)
«ناوبری افقی (Horizontal Navbar)» منویی است که لینک ها کنارِ هم می آیند. معمولاً بالای صفحه قرار می گیرد. پایه اش فهرستِ <ul> و <li> با لینک های <a> است. گاهی تگِ nav ظرفِ منو می شود. مثل منوی بالای بازی که مرحله ها را ردیفی نشان می دهد.
ناوبری افقی با Float
با float، آیتم ها کنار هم ردیف می شوند و پس زمینه تیره است.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
ul li {
float: left;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111111;
}
ناوبری افقی با Flex
روش مدرن تر، Flexbox است. چینش پیش فرض از چپ به راست است.
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
display: flex;
}
ul li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111111;
}
وسط چین کردن با Flex
تنها یک خط اضافه کن تا منو وسط چین شود.
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
display: flex;
justify-content: center;
}
وضعیت فعال (Active)
لینک صفحه جاری را با کلاس active متمایز کن.
ul li a.active {
background-color: #04AA6D;
}
نسخه خاکستری با مرز نازک
پس زمینه روشن، مرز نازک، و چینش افقی ساده.
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
راست چین کردن یک لینک
با float:right فقط برخی آیتم ها را به راست بفرست.
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a href="#about">About</a></li>
</ul>
جداساز با مرز راست
برای هر li یک مرز راست سبک بگذار؛ آخری بدون مرز.
ul li {
float: left;
border-right: 1px solid #bbbbbb;
}
ul li:last-child {
border-right: none;
}
نوار ثابت (Fixed) بالا یا پایین
با position: fixed منو همیشه دیده می ماند.
ul {
position: fixed;
top: 0;
width: 100%;
}
ul {
position: fixed;
bottom: 0;
width: 100%;
}
نکته: fixed شاید در موبایل کامل کار نکند.
نوار چسبان (Sticky)
sticky بین relative و fixed سوییچ می کند، بسته به اسکرول.
ul {
position: sticky;
top: 0;
}
نکته: برای sticky باید یکی از top، right، bottom یا left را بدهی.
منوی کشویی و واکنش گرا
می توانی در منو Dropdown بسازی یا با Media Query واکنش گرا کنی.
گام های سریع اجرا
- یک <ul> بساز و آیتم ها را li کن.
- از float یا flex برای ردیف کردن استفاده کن.
- display:block و padding برای لینک ها تنظیم کن.
- active، هاور و مرزبندی را اضافه کن.
بیشتر بخوان: ناوبری افقی، ناوبری عمودی، و نوار ناوبری.
جمع بندی سریع
- پایه منو: ul و li است.
- float یا flex برای چیدمان افقی.
- active مسیر فعلی را نشان می دهد.
- fixed و sticky برای منوی همیشه نمایان.
- Dropdown و واکنش گرا برای موبایل مفید است.