CSSطراحی سایتگوناگون

۲۳-ساخت نوار هدایتی در CSS

نحوه ساخت نوار هدایتی در صفحه به کمک CSS

 

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

 

نمونه یک  Navigation Bar (نوار هدایتی):

 


 

Navigation Bar = لیستی از لینک ها

 

navigation bar یا همان نوار هدایتی در واقع لیستی از لینک ها بوده که به کمک عناصر ul و li ایجاد میشود.

 

  • تصویر قطعه کد بالا به شکل زیر است:

 

 

حال میخواهیم شکل های دایره ای و همچنین margin و  padding هارا حذف کنیم تا لیستمان نمای بهتری پیداکند.

 

 


 

Navigation Bar عمودی

 

برای ساخت یک Navigation Bar عمودی با توجه به کد بالا، فقط کافی است که برای گزینشگر a ، خصوصیت display را با مقدار “block” تنظیم کنیم:

 

  • تصویر قطعه کد بالا به شکل زیر است:

 

 


 

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

  • با تنظیم خصوصیت display با مقدار “block” تمام تگ های <a> در یک خط جداگانه قرار می گیرند و تمام فضای لینک قابل کلیک کردن است (نه فقط متن لینک)، و این به ما اجازه می دهد تا عرض لینک را مشخص کنیم.
  • عناصر Block به صورت پیشفرض تمام عرض قابل دسترس را اشغال می کنند. ما می توانیم مشخص کنیم که ۶۰ پیکسل از یک خط را اشغال کند.

توجه: همیشه عرض تگ <a> استفاده شده در navigation bar را مشخص کنید. اگر انجام این کار را فراموش کنید، IE6 یک نتیجه غیرمنتظره تولید خواهد کرد.

 


 

Navigation Bar افقی

 

دو راه برای ساخت نوار هدایتی افقی وجود دارد. استفاده از لیست های inline یا floating

هر دو روش برای ساخت نوار مناسب میباشند، اما اگر می خواهید لینک ها، اندازه یکسان داشته باشند باید از روش floating استفاده کنید.

لیست های inline

 

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

 

  • تصویر قطعه کد بالا به شکل زیر است:

 

 

 

 

Floating

 

در مثال بالا، لینک ها عرض های متفاوتی دارند.

برای اینکه تمام لینک ها عرض یکسان داشته باشند، عناصر <li> را float می کنیم و عرض عناصر <a> را تنظیم می کنیم:

 

  • تصویر قطعه کد بالا به شکل زیر است:

 

 


 

ساخت منوی کشویی

 

  • تصویر قطعه کد بالا به شکل زیر است:

توجه داشته باشید که به کمک Bootstrap ساخت منوی کشویی بسیار راحت تر میباشد.

 

 


بخش بعدی

بخش قبلی

به این پست امتیاز دهید.
برچسب ها
مشاهده بیشتر

رضااسدزاده

رضااسدزاده هستم مهندس نرم افزار علاقه مند به فضای وب از تاریخ 12شهریور سال96 سایت تیچ وب رو راه اندازی کردیم با هدف گسترش اطلاعات نرم افزاری و زبان های برنامه نویسی . امیدوارم با حمایت شما دوستان بتونیم به این هدف بزرگ دست پیدا کنیم.

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

7 دیدگاه

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

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

همچنین ببینید

بستن
بستن