آموزش نوار منوی بالا (ناوبری) Navigation Bar در css

حامد محمدیحامد محمدی
386 بازدید
آموزش منوی ناوبری

نوار منوی ناوبری Navigation Bar یکی دیگر از امکانات مهمی است که css در اختیار طراحان سایت قرار می دهد.

داشتن نوار منوی ناوبری Navigation Bar برای هر سایتی لازم و مهم به نظر می رسد.

با این ویژگی css ، شما می توانید منوهای خسته کننده و پیچیده HTML را به ظاهر زیبا و جذاب منوهای افقی تبدیل کنید.

در آموزش امروز قصد داریم کار با این ویژگی جذاب و مهم را با هم  مرور کنیم.

در ادامه آموزش همرا ما باشید.

با سلام خدمت همراهان همیشگی سایت پرنیان طرح

نوار منوی ناوبری Navigation Bar یکی دیگر از امکانات مهمی است که css در اختیار طراحان سایت قرار می دهد.

داشتن نوار منوی ناوبری Navigation Bar برای هر سایتی لازم و مهم به نظر می رسد.

با این ویژگی css ، شما می توانید منوهای خسته کننده و پیچیده HTML را به ظاهر زیبا و جذاب منوهای افقی تبدیل کنید.

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

برای ایجاد یک نواربری، شما به صورت پایه به کدهای استاندارد HTML نیاز دارید.

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

در مثال های این آموزش ، از طریق لیست های استاندارد HTML نوارناوبری را ایجاد خواهیم کرد.

به مثال زیر دقت کنید:

[php]

<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#news”>News</a></li>
<li><a href=”#contact”>Contact</a></li>
<li><a href=”#about”>About</a></li>
</ul>

[/php]

نتیجه را مشاهده کنید.

حالا گلوله ها و حاشیه های خارجی و حاشیه های داخلی را حذف میکنیم.
کد زیر را ببینید:

[PHP]
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
[/PHP]

حالا نتیجه را مشاهده کنید.

توضیحات بیشتر برای مثال بالا

۱- گزینه list-style-type: none; گلوله های قبل از موارد را حذف می کند. یک نوار ناوبری Navigation Bar نیازی به علامت های لیست ندارد.

۲- تنظیم کردن گزینه های Margin=0 و Padding=0 باعث می شوذ که تنظیمات پیشفرض مرورگر حذف شود. در اینحالت شما می توانید مقادیر دلخواه خود را وارد کنید.

۳- مثالی که در بالا برای شما ارائه شد ، کد استانداردی است که برای هر دو نوار ناوبری Navigation Bar افق و عمود مورد استفاده قرار می گیرد.

نوارناوبری عمودی Vertical Navigation Bar

برای ایجاد یک نوار ناوبری عمودی Vertical Navigation Bar شما می توانید علاوه بر کد بالا، عناصر <a> را نیز در داخل لیست قرار دهید.

به مثال زیر توجه کنید:

[php]
li a {
display: block;
width: 60px;
}
[/php]

نتیجه را مشاهده کنید.

 

توضیحات بیشتر برای مثال

گزینه display: block; لینک ها را به صورت عناصر بلوک Block نمایش می دهد. این حالت باعث می شود که کل منطقه ای که لینک در آن قرار دارد قابلیت کلیک کردن داشته باشد( نه فقط متن!) و همچنین اجازه می دهد تا در صورت تمایل بتوانید عرض( و حاشیه خارجی،حاشیه داخلی، ارتفاع و…) را تعیین مقدار کنید.

گزینه width: 60px; : باید توجه داشته باشید که عناصر بلوک به طور پیشفرض تمام عرض موجود را دربرمی گیرند. با استفاده ا این گزینه ما میخواهیم که عرض ۶۰پیکسل را برای عنصر مورد نظر تعیین کنیم.

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

به کد زیر دقت کنید:

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

li a {
display: block;
}
[/php]

نتیجه را مشاهده کنید.

مثال هایی برای ایجاد نوار ناوبری عمودی

در این مثال میخواهیم، یک نوار ناوبری با شرایط زیر ایجاد کنیم.

۱-عمودی باشد.

۲-دارای پس زمینه خاکستری باشد.

۳-رنگ پس زمینه لینک ها، زمانی که ماوس از روی ان عبور میکند ، تغییر کند.

 

کد این مثال به صوت زیر خواهد بود:

[php]
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;
}
[/php]

نتیجه را مشاهده کنید.

Active/Current Navigation Link ساخت پیوند ناویری فعال/جاری

برای ایجاد یک لینک جاری یا فعال ، یک کلاس “active” به لینک دلخواه اضافه می کنیم. اینکار باعث می شود کاربر بتواند تشخصی دهد در کدام صفحه و مربوط به کدام لینک قرار دارد.

کد ایجاد کلاس به شکل زیر خواهد بود:

[php]
.active {
background-color: #4CAF50;
color: white;
}
[/php]

نتیجه را ببینید.

لینک های مرکزی و اضافه کردن مرز

برای اینکه متن لینک ها در مرکز عنصر والد قرار بگیرد، گزینه text-align:center را به عنصر<li> و یا عنصر <a> اضافه میکنیم.

اضافه کردن ویژگی border به عنصر <ul> یک مرز در اطراف نوار ناوبری ایجاد می کند.

اگر میخواهید مرزهایی در داخل نوار ناوبری وجود داشته باشد، ویژگی border-bottom را به تمام عناصر اضافه کنید. بجز آخرین مورد!

[php]
ul {
border: 1px solid #555;
}

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

li:last-child {
border-bottom: none;
}
[/php]
نتیجه را مشاهده کنید.

 

ایجاد نوار ناوبری ثابت و تمام قد Full-height Fixed Vertical Navbar

این نوار ناوبری در تمام مدتی که شما در حال اسکرول کردن صفحه هستید، در کناره چپ یا راست صفحه(هر طرف که شما تنظیم کرده باشید) ثابت باقی خواهند ماند.
مثال
[php]
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 */
}
[/php]
نتیجه را مشاهده کنید.
نکته : این مثال ممکن است در دستگا های موبایل به خوبی کار نکند.

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

در کل دو روش برای ایجاد نوار پیمایش افقی وجود دارد. استفاده از  گزشنه های لیست inline یا floating.

گزینه های لیست inline

یکی از را های ساختن نوار ناوبری افقی تعریف کردن عناصر <li> به صورت درون خطی است. البته علاوه بر کد استاندارد  بالا:

مثال:
[php]
li {
display: inline;
}
[/php]
نتیجه را مشاهده کنید.

 

توضیحات بیشتر برای مثال بالا:

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

 لیست موارد شناور Floating List Items

روش دیگر برای ایجاد نوار ناوبری افقی ، شناور کردن عناصر <li> و سپس تعریف کردن یک طرح (layout) برای لینک های ناوبری است.

مثال:
[php]
li {
float: left;
}
a {
display: block;
padding: ۸px;
background-color: #dddddd;
}
[/php]

نتیجه را مشاهده کنید.

توضیحات بیشتر برای مثال:

float: left; : برای به دست آوردن عناصر بلوک block گزینه float  استفاده می کنیم . به این ترتیب عناصر بلوک در کنار هم و در یک خط افقی قرار میگیرند.

display: block; : نمایش دادن لینک ها ب صورت عناصر بلوک ، تمام منصطه لینک را (و نه فقط متن را) قابل کلیک کردن می کند.  و این به ما اجازه می دهد که مقادیر حاشه داخلی( و ارتفاع، عرض، حاشیه خارجی و…) را در صورت تمایل تعیین کنیم.

padding: 8px; از انجا که عناصر بلوک ، کل عرض عنصر والد را در اختیار خود میگیرند، پس نمی توانند در کنار یکدیگر و در یک خط افقی قرار بگیرند.(float) . بنابراین گزینه padding را برای زیباترشدن عناصر ، مقداردهی کنید.

background-color: #dddddd; یک پس زمینه خاکستری برای تمام عناصر تعیین کنید.

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

مثال:
[php]
ul {
background-color: #dddddd;
}
[/php]
نتیجه را مشاهده کنید.

مثال هایی از نوار پیمایش افقی

در این مثال یک نوار ناوبری افقی اصلی  با یک پس زمینه  تیره ایجاد میکنیم. و ویژگی تغغیر رنگ لینک ها وقتی که ماوس از روی انها رد می شود را نیز به لینک ها اضافه میکنیم.
[php]
ul {
list-style-type: none;
margin: ۰;
padding: ۰;
overflow: hidden;
background-color: #۳۳۳;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: ۱۴px 16px;
text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #۱۱۱;
}
[/php]
نتیجه را مشاهده کنید.

لینک ناوبری فعال/جاری

با اضافه کردن یک کلاس “active” به  لینک جاری، به کاربر کمک می کنید که بداند در صفحه مربوط به کدام لینک قرار دارد.
[php]
.active {
background-color: #۴CAF50;
}
[/php]
نتیجه را مشاهده کنید

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

برای ایجاد لینک های راست چین شناور (float) از کد زیر استفاده می کنیم. (float:right;)

[php]

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

[/php]

نتیجه را مشاهده کنید.

تقسیم کننده های مرز

برای ایجاد یک تقسیم کننده لینک، ویژگی border-right را به عنصر <li> اضافه کنید.

مثال:

[php]
/* اضافه کردن یک مرز خاکستری به تمام عناصر، بجز آخرین مورد(last-child) */
li {
border-right: 1px solid #bbb;
}

li:last-child {
border-right: none;
}
[/php]
نتیجه را مشاهده کنید.

ایجاد نوار ناوبری ثابت Fixed Navigation Bar

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

مثال برای ثابت ماندن در بالا:

[php]
ul {
position: fixed;
top: 0;
width: 100%;
}
[/php]
نتیجه را ببینید.

مثال برای ثابت ماندن در پایین صفحه:
[php]
ul {
position: fixed;
bottom: 0;
width: 100%;
}
[/php]
نتیجه را ببینید.

نکته: نوارهای پیمایش ثابت، ممکن است در دستگاه های موبایل، به درستی کار نکنند.

Gray Horizontal Navbar  نوار ناوبری افقی

یک مثال برای ایجاد نوار ناوبری افقی خاکستری با مرزهای خاکستری نازک.

[php]
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}

li a {
color: #666;
}
[/php]
نتیجه را ببینید.

Sticky Navbar ایجاد نوار ناوبری چسبان

برای ایجاد یک نوار ناوبری چسبان کافیست ویژگی position: sticky; را به عنصر <ul> اضافه کنید

یک عنصر چسبان، بسته به موقعیت پیمایش، بین دو حالت نسبی و ثابت، تغییر می کند.  موقعیت پیشفرض به حالت نسبی است. البته تا زمانی که یک موقعیت افست داده شده، در طرح صفحه ایجاد شود. پس از این ، در جای مشخص خود قرار می گیرند. (مانند موقعیت: ثابت)

به عبارت دیگر تا زمانی که به محل مشخصی از صفجه برسد، موقعیت نسبی دارد. و بعد از آنکه به محل تعیین شده برسد، حالت ثابت به خود میگیرد.

مثال زیر این حالت را به شما نشان خواهد داد:

[php]
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
[/php]
نتیجه را ببینید.

توجه: اینترنت اکسپلورر ، نسخه۱۵ و نسخه های قبلی از موقعیت چسبنده پشتیبانی نمی کنند.
مرورگر Safari به یک پیشوند -webkit- نیاز دارد (مثال بالا را ببینید). همچنین باید حداقل یکی از قسمت های بالا ، راست ، پایین یا چپ را برای نوار چسبان برای درست کار کردن آن مشخص کنید.

دسته بندی آموزش css
اشتراک گذاری
راه حل صحیح موفقیت این است که اشتیاق شما به پیروزی بیشتر از ترس شما از شکست باشد.”انیشتین“

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

23+ محصولات
405+ سفارشات تکمیل شده
2098+ کاربران
399+ مطالب وبلاگ
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت