عمودی
برای ساخت یک navigation bar عمودی، علامه بر کد صفحه قبل، میتوانید عناصر <a> درون لیست را استایل دهی کنید:[۱]
توضیح مثال:
display: block;
- لینکها را به صورت عناصر block نمایش میدهد که موجب میشود کل ناحیه لینک (نه فقط متن) قابل کلیک باشد، و به ما اجازه میدهد که عرض (به انگلیسی: width) (و padding ,حاشیه، ارتفاع و… را در صورت نیاز) مشخص کنیم
width: 60px;
- عناصر block به صورت پیشفرض کل عرض موجود را اشغال میکنند. میخواهیم عرضی به اندازه 60px را مشخص کنیم
همچنین میتوانید عرض <ul> را تنظیم کنید، و عرض <a> را حذف کنید، چرا که آنها تمامی عرض موجود را در هنگامی که به صورت عناصر block نمایش داده میشوند، اشغال میکنند. کد زیر نتیجه ای مشابه نتیجه مثال قبل خواهد داشت:
ساخت یک navigation bar عمومی ساده با پس زمینه خاکستری و تغییر رنگ پس زمینه لینکها هنگامی که کاربر نشانهگر موس را روی آنها قرار میدهد:
یک کلاس "active" به لینک جاری اضافه کنید تا به کاربر اجازه دهید که بداند در کدام صفحه است؟
وسطچین کردن لینکها و اضافهکردن کادرها
text-align:center
را به <li> یا <a> اضافه کنید تا لینکها وسط چین شوند.
اضافهکردن ویژگی border به <ul> موجب اضافه شدن یک کادر در اطراف navbar میشود. همچنین اگر شما میخواهید درون navbar هم کادر داشته باشید، ویژگی border-bottom
را به تمامی عناصر <li> ، به جز آخری، اضافه کنید:
ساخت یک navigation جانبی تمام قد، «چسبیده»:
نکته: این مثال بر روی دستگاههای موبایلی ممکن است کار نکند.
منابع آموزشی