ساخت یک نوار هدایتی در CSS
Navigation Bar
برای استفاده آسان، وجود Navigation Bar یک بخش بسیار مهم برای وب سایت ها محسوب می شود.
با CSS می توان، منوهای خسته کننده HTML را به Navigation Barهای زیبا تبدیل کرد.
Navigation Bar = لیستی از لینک ها
navigation bar یا نوار هدایتی، اساساً لیستی از لینک هاست که با استفاده از عناصر <ul> و <li> ساخته می شوند:
مثال (ساخت یک نوار هدایتی در CSS)
<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 را از لیستمان حذف کنیم:
توضیح مثال بالا:
- list-style-type:none - علامت ها یا bulletها را حذف می کند، یک navigation bar احتیاجی به علامتگذاری لیست ها ندارد.
- خصوصیت margin و padding را با مقدار 0 تنظیم می کنیم، تا تنظیمات پیشفرض مرورگر را حذف کنیم.
کد مثال بالا یک کد استاندارد است که هم در لینک های افقی و هم در لینک های عمودی استفاده می شود.
Navigation Bar عمودی
برای ساخت یک Navigation Bar عمودی با توجه به کد بالا، فقط کافی است که برای گزینشگر a ، خصوصیت display را با مقدار "block" تنظیم کنیم:
مثال (ساخت یک نوار هدایتی در CSS)
{
display:block;
width:60px;
background-color:#dddddd;
}
توضیح مثال بالا:
- با تنظیم خصوصیت display با مقدار "block" تمام تگ های <a> در یک خط جداگانه قرار می گیرند و تمام فضای لینک قابل کلیک کردن است (نه فقط متن لینک)، و این به ما اجازه می دهد تا عرض لینک را مشخص کنیم.
- عناصر Block به صورت پیشفرض تمام عرض قابل دسترس را اشغال می کنند. ما می توانیم مشخص کنیم که 60 پیکسل از یک خط را اشغال کند.
برای یادگیری بیشتر، یک نگاهی به لینک روبرو بیندازید: style دهی کامل یک navigation bar عمودی
توجه: همیشه عرض تگ <a> استفاده شده در navigation bar را مشخص کنید. اگر انجام این کار را فراموش کنید، IE6 یک نتیجه غیرمنتظره تولید خواهد کرد.
Navigation Bar افقی
دو راه برای ساخت Navigation Bar افقی وجود دارد. استفاده از لیست های inline یا floating
هر دو روش بخوبی کار خواهد کرد، اما اگر می خواهید لینک ها، اندازه یکسان داشته باشند باید از روش floating استفاده کنید.
لیست های inline
یک راه برای ساخت navigation bar افقی این است که عناصر <li> را به صورت inline مشخص کنیم:
توضیح مثال بالا:
- به صورت پیشفرض یک عنصر <li> تمام فضای یک خط را اشغال می کند، با تنظیم خصوصیت display با مقدار "inline" شکستگی خط قبل و بعد هر لیست حذف خواهد شد، بنابراین تمام عناصر <li> در یک خط نمایش داده می شوند.
برای یادگیری بیشتر، یک نگاهی به لینک روبرو بیندازید: style دهی کامل یک navigation bar افقی
Floating
در مثال بالا، لینک ها عرض های متفاوتی دارند.
برای اینکه تمام لینک ها عرض یکسان داشته باشند، عناصر <li> را float می کنیم و عرض عناصر <a> را تنظیم می کنیم:
توضیح مثال بالا:
- در گزینشگر li با تنظیم خصوصیت float با مقدار "left" تمام عناصر <li> در کنار یکدیگر (در یک خط) قرار می گیرند.
- در گزینشگر a با تنظیم خصوصیت display با مقدار "block" تمام عناصر <a> در یک خط جداگانه قرار می گیرند و تمام فضای لینک قابل کلیک کردن است (نه فقط متن لینک)، و این به ما اجازه می دهد تا عرض لینک را مشخص کنیم.
- عناصر Block به صورت پیشفرض تمام عرض قابل دسترس را اشغال می کنند. ما می توانیم مشخص کنیم که 60 پیکسل از یک خط را اشغال کند.
برای یادگیری بیشتر، یک نگاهی به لینک روبرو بیندازید: style دهی کامل یک navigation bar افقی
مثال - خودتان امتحان کنید
در این مثال نحوه ساخت یک منوی دو سطی یا کشویی نشان داده شده است.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 31341