سی ای ایس افقی ناویگیشن بار
- صفحه قبلی سی ای ایس عمودی ناویگیشن بار
- صفحه بعدی سی ای ایس ڈروپ داؤن منو
ناویگیشن بار افقی
دو روش برای ایجاد ناویگیشن بار افقی وجود دارد: استفاده ازinlineیافلولیست عناصر.
عناصر inline
یک روش برای ساخت ناویگیشن بار افقی، علاوه بر کد «استاندارد» در فصل قبلی، تعیین عناصر <li> به عنوان inline است:
مثال
li {
display: inline;
}
توضیح مثال:
display: inline; - به طور پیش‌فرض، عناصر <li> بلوک هستند. در اینجا، ما از قبل و بعد از هر عنصر لیست، کاراکترهای پاراگراف را حذف می‌کنیم تا بتوانند در یک خط نمایش داده شوند.
لیست فلو
یک روش دیگر برای ایجاد ناویگیشن بار افقی، فلو کردن عناصر <li> و تعیین چیدمان برای لینک‌های ناویگیشن است:
مثال
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;
تراز متن: وسط;
تراز: 14px 16px;
زیرخط: هیچ;
}
/* هنگام قرار گرفتن ماوس بر روی لینک، رنگ لینک را به #111 (سیاه) تغییر می‌دهد */
li a:hover {
رنگ پس‌زمینه: #111;
}
لینک فعلی/لینک فعلی‌ترین
برای لینک فعلی یا فعلی‌ترین لینک "active" را اضافه کنید، تا کاربر بداند که او در کدام صفحه است:
مثال
.active {
رنگ پس‌زمینه: #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>
جداکننده کناره
کناره کناره ویژگی به <li> اضافه شود تا یک جداکننده لینک ایجاد شود:
مثال
/* کناره‌های خاکستری برای همه عناصر لیست اضافه کنید، به استثنای آخرین عنصر (last-child) */
li {
کناره سمت راست: 1px خط فاصله دار سفید #bbb;
}
li:last-child {
کناره سمت راست: هیچ;
}
منوی ثابت
این منو را در بالای یا پایین صفحه نگه می‌دارد، حتی اگر کاربر صفحه را اسکرول کند:
توجه:مکان‌گذاری ثابت ممکن است در دستگاه‌های موبایل به درستی کار نکند.
منوی افقی خاکستری
مثالی از منوی افقی خاکستری با کناره‌های نازک خاکستری
مثال
ul {
کناره: 1px خط فاصله دار سفید #e7e7e7;
رنگ پس‌زمینه: #f3f3f3;
}
li a {
رنگ: #666;
}
منو چسبناک
به <ul> اضافه کنید position: sticky;، برای ایجاد منو چسبناک.
عناصر چسبناک بر اساس موقعیت اسکرول بین مکانات نسبی و ثابت جابجا می‌شوند. آن‌ها تا زمانی که در视پورت به موقعیت تعیین شده برسند مکان‌گذاری نسبی دارند - سپس آن‌ها را در موقعیت مناسب "چسبان" می‌کنند (مثلاً position:fixed).
مثال
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
توجه:اینترنت اکسپلورر، Edge 15 و نسخه‌های قبلی از قرارگیری چسبنده را پشتیبانی نمی‌کنند. Safari نیاز به پیشوند -webkit- دارد (لطفاً مثال بالا را ببینید). شما باید همچنین مشخص کنید بالاوراستوپایین یا چپ حداقل یکی از این‌ها باید برای فعال‌سازی قرارگیری چسبنده باشد.
مثال‌های بیشتر
- ناوبری بالایی واکنش‌گرا
- چگونه می‌توانید با استفاده از معیارهای رسانه‌ای CSS یک ناوبری بالایی واکنش‌گرا ایجاد کنید.
- ناوبری جانبی واکنش‌گرا
- چگونه می‌توانید با استفاده از معیارهای رسانه‌ای CSS یک ناوبری جانبی واکنش‌گرا ایجاد کنید.
- نوار ناوبری فله‌ای
- چگونه می‌توانید یک منوی فله‌ای در نوار ناوبری اضافه کنید.
- صفحه قبلی سی ای ایس عمودی ناویگیشن بار
- صفحه بعدی سی ای ایس ڈروپ داؤن منو
