نسخه نمایشی  Navigation Bar (نوار هدایتی)

Navigation Bar

Wiki

برای استفاده آسان، وجود Navigation Bar یک بخش بسیار مهم برای وب سایت ها محسوب می شود.

با CSS می توان، منوهای خسته کننده HTML را به Navigation Barهای زیبا تبدیل کرد.

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

Wiki

navigation bar یا نوار هدایتی، اساساً لیستی از لینک هاست که با استفاده از عناصر <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>
خودتان امتحان کنید »

حالا اجازه دهید تا bulletها ، margin و padding را از لیستمان حذف کنیم:

مثال (ساخت یک نوار هدایتی در CSS)

ul
{
list-style-type:none;
margin:0;
padding:0;
}
خودتان امتحان کنید »

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

  • list-style-type:none - علامت ها یا bulletها را حذف می کند، یک navigation bar احتیاجی به علامتگذاری لیست ها ندارد.
  • خصوصیت margin و padding را با مقدار 0 تنظیم می کنیم، تا تنظیمات پیشفرض مرورگر را حذف کنیم.

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

Navigation Bar عمودی

Wiki

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

مثال (ساخت یک نوار هدایتی در CSS)

a
{
display:block;
width:60px;
background-color:#dddddd;
}
خودتان امتحان کنید »

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

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

برای یادگیری بیشتر، یک نگاهی به لینک روبرو بیندازید: style دهی کامل یک navigation bar عمودی

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

Navigation Bar افقی

Wiki

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

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

لیست های inline

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

مثال (ساخت یک نوار هدایتی در CSS)

li
{
display:inline;
}
خودتان امتحان کنید »

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

  • به صورت پیشفرض یک عنصر <li> تمام فضای یک خط را اشغال می کند، با تنظیم خصوصیت display با مقدار "inline" شکستگی خط قبل و بعد هر لیست حذف خواهد شد، بنابراین تمام عناصر <li> در یک خط نمایش داده می شوند.

برای یادگیری بیشتر، یک نگاهی به لینک روبرو بیندازید: style دهی کامل یک navigation bar افقی

Floating

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

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

مثال (ساخت یک نوار هدایتی در CSS)

li
{
float:left;
}
a
{
display:block;
width:60px;
}
خودتان امتحان کنید »

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

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

برای یادگیری بیشتر، یک نگاهی به لینک روبرو بیندازید: style دهی کامل یک navigation bar افقی

مثال

مثال - خودتان امتحان کنید

نحوه ساخت یک منوی دو سطحی

در این مثال نحوه ساخت یک منوی دو سطی یا کشویی نشان داده شده است.