روش‌های ساخت نوار ناوبری افقی
دو راه برای ساخت یک نوار ناوبری افقی وجود دارد: استفاده از آیتم‌های لیست به صورت inline یا float.
آیتم‌های لیست به صورت Inline
یکی از راه‌ها برای ساخت یک نوار ناوبری افقی این است که آیتم‌های لیست <li> را به صورت inline نمایش دهیم:
مثال:
li {
display: inline;
}توضیحات:
display: inline; باعث می‌شود که هر آیتم لیست در یک خط نمایش داده شود و خطوط جداکننده پیش‌فرض قبل و بعد از هر آیتم حذف شود.
آیتم‌های لیست به صورت Float
راه دیگر برای ساخت نوار ناوبری افقی، استفاده از ویژگی float برای آیتم‌های لیست است. همچنین می‌توانیم برای لینک‌های ناوبری، استایل جداگانه تعریف کنیم:
مثال:
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}توضیحات:
float: left;آیتم‌ها را کنار هم قرار می‌دهد.display: block;امکان اضافه کردن ویژگی‌های مثل padding، height، width و … را فراهم می‌کند.padding: 8px;فاصله‌ای بین لینک‌ها ایجاد می‌کند تا زیباتر به نظر برسند.background-color: #dddddd;رنگ پس‌زمینه‌ای خاکستری به هر لینک اضافه می‌کند.
مثال نوار ناوبری افقی
در این مثال، یک نوار ناوبری افقی با رنگ پس‌زمینه تیره و تغییر رنگ لینک‌ها هنگام حرکت ماوس بر روی آنها ایجاد می‌کنیم:
مثال:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* تغییر رنگ لینک به #111 (سیاه) در حالت hover */
li a:hover {
background-color: #111;
}لینک فعال/کنونی (Active Link)
برای نمایش صفحه فعلی، می‌توانید از کلاس “active” برای لینک فعال استفاده کنید:
مثال:
.active {
background-color: #04AA6D;
}تراز لینک‌ها به سمت راست
با استفاده از ویژگی float
، لینک‌های ناوبری را می‌توانید به سمت راست تراز کنید:
مثال:
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a class="active" href="#about">About</a></li>
</ul>ایجاد جداکننده‌های حاشیه‌ای (Border Dividers)
با استفاده از ویژگی border-right، می‌توانید حاشیه‌هایی به عنوان جداکننده بین آیتم‌ها اضافه کنید:
مثال:
/* افزودن حاشیه سمت راست به تمام آیتم‌ها به جز آخرین آیتم */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}نوار ناوبری ثابت (Fixed Navigation Bar)
می‌توانید نوار ناوبری را به بالا یا پایین صفحه ثابت کنید تا هنگام اسکرول کردن صفحه، نوار ناوبری در جای خود بماند:
نوار ناوبری ثابت بالا
ul {
position: fixed;
top: 0;
width: 100%;
}نوار ناوبری ثابت پایین
ul {
position: fixed;
bottom: 0;
width: 100%;
}نکته: موقعیت fixed ممکن است در دستگاه‌های موبایل به درستی کار نکند.
نوار ناوبری افقی خاکستری (Gray Horizontal Navbar)
مثالی از یک نوار ناوبری افقی با پس‌زمینه خاکستری و حاشیه‌ای نازک:
مثال:
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color: #666;
}نوار ناوبری چسبان (Sticky Navbar)
برای ایجاد یک نوار ناوبری چسبان که هنگام اسکرول به بالای صفحه می‌چسبد، می‌توانید از ویژگی position: sticky استفاده کنید:
مثال:
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}نکته: مرورگر Internet Explorer از موقعیت sticky پشتیبانی نمی‌کند و Safari نیاز به استفاده از پیشوند -webkit- دارد.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام