نوار هدایتی(Navigation Bar) در CSS

نوار هدایتی در CSS

داشتن یک نوار هدایتی(Navigation Bar) مناسب که استفاده از آن آسان باشد برای هر وبسایتی ضروریست.

با استفاده از عناصر HTML میتوانید یک نوار هدایتی زیبا برای وب سایتتان طراحی کنید.

نوار هدایتی = لیستی از لینک ها

یک نوار هدایتی به طور اساسی از لیستی از لینک ها تشکیل شده است، بنابراین استفاده از عناصر <ul> و <li> کاملا احساس میشود.

در نمونه مثال زیر نحوه ی استفاده از عناصر لیست را برای ساخت یک منو مشاهده میکنید. در این مرحله هنوز از CSS برای زیبا سازی منو استفاده نکرده ایم :

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

برای حذف بولت ها از لیست و هیمن طور حذف margin و padding از آن به طریق زیر عمل میکنیم :

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

توضیح مثال :

• list-style-type: none - برای حذف بولت ها استفاده شده است. یک نوار هدایتی نیازی به نشانگر ها (همان بولت ها) ندارد.
• با تنظیم margin: 0 و padding: 0 مقادیر پیشفرض مرورگر برای این صفات را حذف کرده ایم.

نمونه مثال بالا کد استانداردی است که برای هر دوی نوار های هدایتی عمودی و افقی استفاده میشود. 

نوار هدایتی عمودی

برای ساخت یک نوار هدایتی عمودی، شما میتوانید عنصر <a> را داخل لیست فرمت بندی کنید، به کد های بالا کد زیر را نیز اضافه کنید :

li a {
    display: block;
    width: 60px;
}

توضیح مثال :

• display: block - نمایش لینک ها به عنوان عناصر بلاک، همه ی ناحیه ی یک لینک را قابل کلیک میکند(نه فقط متن آن را) و به ما اجازه میدهد برای آنها پهنا (width) مشخص کنیم(و همینطور padding،margin،height و ... . در صورتی که بخواهیم)
• width: 60px - عناصر بلاک به صورت پیشفرض کل طول فضای موجود را اشغال میکنند. ما میخواهیم این مقدار برابر با 60 پیکسل باشد

شما همچنین میتوانید مقدار صفت width را برای عنصر <ul> تنظیم  کرده و مقدار width برای عناصر <a> را حذف کنید. این همان نتیجه ای که مثال قبل داشت را در بر خواهد داشت : 

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60px;
} 

li a {
    display: block;
}

مثال های نوار هدایتی عمودی

نمونه مثال زیر ساخت یک نوار هدایتی عمودی را نشان میدهد که  دارای رنگ پیش زمینه ی خاکستری است و وقتی که موس کاربر بر روی لینک ها قرار میگیرد، رنگ پیش زمینه تغییر خواهد کرد :

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
    background-color: #555;
    color: white;
}

لینک های هدایتی فعال

اضافه کردن یک کلاس "active" به لینک جاری، به کاربر اجازه خواهد داد که بداند در حال حاضر در کدام صفحه حضور دارد :

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

وسط چین کردن متن لینک ها و افزودن border به آنها

اضافه کردن text-align:center به عناصر <li> و <a> باعث وسط چین شدن محتویات لینک ها خواهد شد.

اضافه کردن صفت border به عنصر <ul>، خط دوری را به اطراف نوار هدایتی اضافه میکند. اگر میخواهید خط های دور به داخل نوار هدایتی هم اضافه شود، صفت border-bottom را برای همه عناصر <li> تنظیم کنید (به جز آخرین <li>) :

ul {
    border: 1px solid #555;
}

li {
    text-align: center;
    border-bottom: 1px solid #555;
}

li:last-child {
    border-bottom: none;
}

ساخت یک نوار هدایتی عمودی fixed و چسبیده به یک طرف

برای ساخت یک نوار هدایتی عمودی که ثابت بوده و به یک طرف مرورگر چسبیده باشد به صورت زیر عمل میکنیم :

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* Full height */
    position: fixed; /* Make it stick, even on scroll */
    overflow: auto; /* Enable scrolling if the sidenav has too much content */
}

نوار هدایتی افقی 

به دو روش میتوان نوار هدایتی افقی ساخت. با استفاده آیتم های لیست به صورت inline و یا با استفاده از float.

آیتم های لیست به صورت inline

یک روش برای ساخت یک نوار هدایتی افقی تبدیل عناصر <li> به عنصری در سطح inline است، کد زیر را به کد مثال بالا اضافه کنید :

li {
    display: inline;
}

توضیح مثال :

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

افقی کردن نوار هدایتی با استفاده از float 

روش دیگر برای ساخت یک نوار هدایتی افقی استفاده از صفت float برای عناصر <li> است :

li {
    float: left;
}

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

توضیح مثال :

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

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

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;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #111;
}

لینک های هدایتی فعال

با افزودن یک کلاس با مقدار  "active" میتوان لینک جاری را مشخص کرد و به کاربر اجازه داد بداند در کدام صفحه قرار گرفته است :

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

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

برای راست چین کردن لینک ها در نوار های هدایتی افقی از float:right استفاده کنید :

<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

با اضافه کردن صفت border-right به عناصر <li> میتوان جدا کننده ایجاد کرد :

/* Add a gray right border to all list items, except the last item (last-child) */
li {
    border-right: 1px solid #bbb;
}

li:last-child {
    border-right: none;
}

نوار های هدایتی fiexd

میتوان نوار های هدایتی را به صورت ثابت در بالا و پایین صفحه قرار داد، حتی وقتی کاربر صفحه را پیمایش میکند :

نوار هدایتی ثابت در بالا :

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;
}