نوار ناوبری عمودی (Vertical Navbar) در CSS
«نوار ناوبری عمودی (Vertical Navbar)» فهرستی از پیوندهاست که زیر هم چیده می شود. معمولاً این فهرست در سمت چپ یا راست صفحه قرار می گیرد. ابتدا ساختار را با ul و li می سازیم و سپس با CSS آن را استایل می دهیم تا دسترس پذیر، واضح و قابل کلیک باشد.
پایه نوار ناوبری عمودی
برای آغاز، استایل های پیش فرض فهرست را حذف کنید و پیوندها را بلوکی کنید تا کل ردیف قابل کلیک شود. سپس رنگ زمینه ملایم و فاصله داخلی اضافه کنید:
ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; }
li a { display: block; color: black; padding: 8px 16px; text-decoration: none; }
/* حالت هاور برای برجسته سازی لینک */
li a:hover { background-color: #555555; color: white; }نکته: نمایش بلوکیِ لینک ها، تعیین عرض و پدینگ را ممکن می کند و تجربه کلیک بهتری می دهد.
هایلایت صفحه جاری (Active)
برای نشان دادن صفحه فعال، یک کلاس «active» تنظیم کنید. بنابراین کاربر سریع می فهمد کجاست:
.active { background-color: #04AA6D; color: white; }مرکزچین و مرزبندی آیتم ها
می توانید متن آیتم ها را مرکزچین کنید و برای جداسازی، مرز بیرونی و داخلی بگذارید. برای آیتم آخر، مرز پایینی را بردارید:
ul { border: 1px solid #555555; }
li { text-align: center; border-bottom: 1px solid #555555; }
li:last-child { border-bottom: none; }نوار عمودی تمام قد و چسبنده
برای نوار کناری تمام قد و چسبنده، از ارتفاع صددرصد، position: fixed و اسکرول داخلی استفاده کنید تا محتوای طولانی قابل پیمایش بماند:
ul { list-style-type: none; margin: 0; padding: 0; width: 130px; background-color: #f1f1f1; height: 100%; position: fixed; overflow: auto; }هشدار: این الگو ممکن است در برخی نمایشگرهای کوچک نیاز به تنظیمات پاسخ گرا داشته باشد.
پاسخ گویی (Responsive) و ادامه یادگیری
با Media Query می توانید عرض، پدینگ و جایگاه نوار را در موبایل تغییر دهید. برای مقدمات، به مقدمه نوار ناوبری برگردید. همچنین برای حالت افقی، صفحه نوار ناوبری افقی را ببینید. تعامل های هاور نیز در کلاس های شبه توضیح داده شده اند. برای تراز متن آیتم ها، صفحه تراز کردن کاربردی است. مرجع این فصل: نوار ناوبری عمودی.