نوار ناوبری افقی (Horizontal Navbar) در CSS
«نوار ناوبری افقی (Horizontal Navbar)» فهرستی از پیوندهاست که در یک ردیف کنار هم قرار می گیرند و معمولاً بالای صفحه دیده می شوند. پایه کار، یک ul با آیتم های li و لینک های a است. گاهی آن را درون تگ nav می گذاریم تا ساختار معنایی بهتری داشته باشد.
ایجاد نوار ناوبری افقی با 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; }نکته: ویژگی overflow: hidden; از بیرون زدن آیتم ها جلوگیری می کند و display: block; اجازه پدینگ یکنواخت و ناحیه قابل کلیک بزرگ تر می دهد.
نوار ناوبری افقی با Flexbox
روش مدرن تر استفاده از Flexbox است. کافی است روی فهرست display: flex; بگذارید تا آیتم ها ردیفی شوند:
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 { display: flex; justify-content: center; }حالت فعال (Active) و تفکیک گرها
برای مشخص کردن صفحه جاری، یک کلاس فعال اضافه کنید. همچنین می توانید بین آیتم ها مرز راست بگذارید و برای آیتم آخر حذفش کنید:
ul li a.active { background-color: #04AA6D; }
ul li { float: left; border-right: 1px solid #bbbbbb; }
ul li:last-child { border-right: none; }تراز ویژه و حالت ثابت/چسبنده
می توانید بعضی لینک ها را راست چین کنید (مثلاً با float: right;). برای ثابت ماندن نوار در بالا یا پایین از position: fixed همراه top یا bottom استفاده کنید. برای چسبنده هم position: sticky; top: 0; را روی ul قرار دهید.
هشدار: در دستگاه های کوچک، fixed و نوارهای عریض ممکن است رفتار متفاوتی داشته باشند؛ حتماً پاسخ گویی را بررسی کنید.
پاسخ گویی و ادامه مسیر
برای ساخت نسخه واکنش گرا از Media Query کمک بگیرید و اندازه ها را در نماهای کوچک تغییر دهید. مقدمه کلی را در مقدمه نوار ناوبری بخوانید. نمونه عمودی در نوار ناوبری عمودی است. برای منوهای آبشاری بعدی به Dropdowns سر بزنید. همچنین مرجع نوار ناوبری افقی را برای بازگشت سریع نگه دارید.