افقی

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها


Navigation Bar افقی

دو راه برای ساخت یک navigation bar افقی وجود دارد. استفاده از آیتم‌های لیست inline یا float.[۱]

inline کردن آیتم های لیست

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

مثال
li {
  display: inline;
}

توضیح مثال:

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

Float کردن آیتم های لیست

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

مثال
1 li {
2   float: left;
3 }
4 
5 a {
6   display: block;
7   padding: 8px;
8   background-color: #dddddd;
9 }


توضیح مثال:

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

نکته: اگر رنگ پس زمینه تمام عرض می‌خواهید ویژگی background-color را به جای عناصر <a> به عناصر <ul> اضافه کنید.

مثال
1 ul {
2   background-color: #dddddd;
3 }


مثال Navigation Barهای افقی

ساخت یک Navigation bar افقی ساده با پس زمینه سیاه و تغییر رنگ لینک‌ها برای زمانی که کاربر نشانه‌گر موس را روی آنها می‌برد:

مثال
 1 ul {
 2   list-style-type: none;
 3   margin: 0;
 4   padding: 0;
 5   overflow: hidden;
 6   background-color: #333;
 7 }
 8 
 9 li {
10   float: left;
11 }
12 
13 li a {
14   display: block;
15   color: white;
16   text-align: center;
17   padding: 14px 16px;
18   text-decoration: none;
19 }
20 
21 /* Change the link color to #111 (black) on hover */
22 li a:hover {
23   background-color: #111;
24 }


لینکهای Navigation فعال / جاری

یک کلاس "active" به لینک جاری اضافه کنید تا به کاربر اجازه دهید که بداند در کدام صفحه است؟

مثال
1 .active {
2   background-color: #4CAF50;
3 }


لینکهای راست چین

لینک‌ها را با استفاده از float کردن آیتم‌های لیست به سمت راست (float:right;) راست چین کنید:

مثال
1 <ul>
2   <li><a href="#home">Home</a></li>
3   <li><a href="#news">News</a></li>
4   <li><a href="#contact">Contact</a></li>
5   <li style="float:right"><a class="active" href="#about">About</a></li>
6 </ul>


Border Dividers

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

مثال
1 /* Add a gray right border to all list items, except the last item (last-child) */
2 li {
3   border-right: 1px solid #bbb;
4 }
5 
6 li:last-child {
7   border-right: none;
8 }


Navigation Bar ثابت

navigation bar در بالا یا پایین صفحه باقی می‌ماند، حتی در مواقعی که کاربر صفحه را پیمایش می‌کند.

ثابت بالا
1 ul {
2   position: fixed;
3   top: 0;
4   width: 100%;
5 }

ثابت پایین
1 ul {
2   position: fixed;
3   bottom: 0;
4   width: 100%;
5 }

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

Navbar افقی خاکستری

مثالی از یک navigation bar افقی با یک کادر خاکستری

مثال
1 ul {
2   border: 1px solid #e7e7e7;
3   background-color: #f3f3f3;
4 }
5 
6 li a {
7   color: #666;
8 }


Navbar چسبنده

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

یک عنصر sticky بین موقعیت نسبی (به انگلیسی: relative) و ثابت (به انگلیسی: fixed)، با توجه به موقعیت پیمایش تغییر می‌کند.تا زمانی که موقعیت offest داده شده در viewport برآورده شود، بطور نسبی موقعت‌دهی می‌شود - سپس عنصر در آن محل «می‌چسبد» (مانند position:fixed).

مثال
1 ul {
2   position: -webkit-sticky; /* Safari */
3   position: sticky;
4   top: 0;
5 }


نکته: اینترنت اکسپلور، Edge 15 و نسخه‌های قدیمی‌تر از موقعیت‌دهی چسبنده پشتیبانی نمی‌کنند. مرورگر Safari نیازمند یک پیشوند -webkit- است

(مثال بالا را ببینید). شما می‌بایست حداقل یکی از top ،right ،bottom یا left را برای موقعیت دهی sticky مشخص کنید تا کار کند.

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

Topnav واکنش گرا

چطور از media queryهای CSS برای ساخت یک top navigation واکنش گرا استفاده کنیم؟


Sidenav واکنش گرا

چطور از media queryهای CSS برای ساخت یک side navigation واکنش گرا استفاده کنیم؟


Navbar کشویی

چطور یک منوی کشویی درون یک navigationbar اضافه کنیم.




منابع آموزشی