نوار ناوبری افقی CSS

ناوبری افقی

دو روش برای ایجاد ناوبری افقی وجود دارد: استفاده ازخطییافلوتیلیست‌ی.

لیست‌های خطی

یک روش برای ساخت ناوبری افقی این است که علاوه بر کد «استاندارد» در فصل قبلی، عنصر <li> را به صورت inline مشخص کنید:

مثال

li {
  display: inline;
}

آزمایش کنید

توضیح مثال:

display: inline; - به طور پیش‌فرض، عنصر <li> یک عنصر بلوک است. در اینجا، ما اتصالات پاراگراف قبل و بعد از هر لیست‌ی را حذف می‌کنیم تا بتوانند در یک خط نمایش داده شوند.

لیست‌های فلوتی

یک روش دیگر برای ایجاد ناوبری افقی ایجاد <li> به صورت float و برای لینک‌های ناوبری مشخصات چیدمان را تعیین کنید:

مثال

li {
  float: left;
}
a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

آزمایش کنید

توضیح مثال:

  • float: left; - از float برای حرکت بلوک‌ها به کنار هم استفاده کنید
  • display: block; - نمایش لینک به عنوان عنصر بلوک باعث می‌شود که کل منطقه لینک قابل کلیک باشد (نه تنها متن)، و اجازه می‌دهد که ما پادری (و اگر نیاز باشد، ارتفاع، عرض، حاشیه و غیره) را مشخص کنیم
  • padding: 8px; - برای زیبایی بیشتر عنصرهای بلوک استفاده کنید
  • background-color: #dddddd; - برای هر عنصر پس‌زمینه خاکستری اضافه کنید

توضیح:برای پس‌زمینه‌ای که به طور کامل پهن است، background-color را به <ul> اضافه کنید نه به هر عنصر <a>:

مثال

ul {
  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 (سیاه) تغییر می‌دهد */
li a:hover {
  background-color: #111;
}

آزمایش کنید

پیوند فعلی/ماهیت فعلی

به پیوند فعلی کلاس «active» اضافه شود تا کاربر بداند او در کدام صفحه است:

مثال

.active {
  background-color: #4CAF50;
}

آزمایش کنید

پیوندهای راست‌چین

با جابجایی عناصر لیست به سمت راست، پیوندها را راست‌چین می‌کند (float:right;):

مثال

<ul>
  <li><a href="#home">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li><a href="#contact">تماس</a></li>
  <li style="float:right"><a class="active" href="#about">درباره</a></li>
</ul>

آزمایش کنید

پله‌های حاشیه

برای border-right ویژگی به <li> اضافه شود تا پیوند جداکننده ایجاد شود:

مثال

/* حاشیه‌های خاکستری را به همه عناصر لیست اضافه کنید، به استثنای آخرین عناصر (last-child) */
li {
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}

آزمایش کنید

ناوبری ثابت

ناوبری را در بالای یا پایین صفحه نگه می‌دارد، حتی اگر کاربر صفحه را اسکرول کند:

در بالا ثابت

ul {
  position: fixed;
  top: 0;
  width: 100%;
}

آزمایش کنید

در پایین ثابت

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

آزمایش کنید

توجه:موقعیت ثابت ممکن است در دستگاه‌های موبایل به درستی کار نکند.

ناوبری افقی خاکستری

مثالی از ناوبری افقی خاکستری با حاشیه‌های نازک خاکستری

مثال

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}
li a {
  color: #666;
}

آزمایش کنید

ناوبری چسبنده

به <ul> اضافه کنید position: sticky;برای ایجاد ناوبری چسبنده.

عناصر چسبنده بر اساس موقعیت اسکرول بین حالت‌های نسبی و ثابت جابجا می‌شوند. آن‌ها به صورت نسبی قرار دارند تا در داخل视‌پورت به موقعیت حرکت داده شوند - سپس آن‌ها در موقعیت مناسب «چسبیده» می‌شوند (مثلاً position:fixed).

مثال

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

آزمایش کنید

توجه:اینترنت اکسپلورر، Edge 15 و نسخه‌های قدیمی‌تر از قرارگیری چسبنده (sticky) پشتیبانی نمی‌کنند. Safari نیاز به پیشوند -webkit- دارد (لطفاً مثال بالا را ببینید). شما باید همچنین مشخص کنید بالاوراستوپایین یا چپ حداقل یکی از این‌ها باید برای فعال‌سازی قرارگیری چسبنده (sticky) استفاده شود.

مثال‌های بیشتر

ناوبری بالایی واکنش‌گرا
چگونه می‌توانید با استفاده از جستجوهای رسانه‌ای CSS یک ناوبری بالایی واکنش‌گرا ایجاد کنید.
ناوبری جانبی واکنش‌گرا
چگونه می‌توانید با استفاده از جستجوهای رسانه‌ای CSS یک ناوبری جانبی واکنش‌گرا ایجاد کنید.
نوار ناوبری فله‌ای
چگونه می‌توانید منوهای فله‌ای را به نوار ناوبری اضافه کنید.