نوار ناوبری (Navbar) در CSS
«نوار ناوبری (Navbar)» یکی از بخش های حیاتی هر وب سایت است؛ زیرا جابه جایی بین بخش ها را ساده می کند. معمولاً نوارها در بالا یا کناره صفحه قرار می گیرند و با HTML ساده (فهرست ها) ساخته و سپس با CSS زیبا می شوند.
نوار ناوبری = فهرستی از لینک ها
پایه یک نوار ناوبری، فهرستی از پیوندها است؛ به همین دلیل استفاده از عناصر ul
و li
کاملاً منطقی است. برای شروع، نشانه گذاری پیش فرض فهرست را حذف کنید:
ul { list-style-type: none; margin: 0; padding: 0; }
این کد، بولت ها و فاصله های پیش فرض مرورگر را برمی دارد و مبنای مشترک هر دو نوع عمودی و افقی را فراهم می کند.
انواع نوار ناوبری: عمودی و افقی
نوار ناوبری می تواند عمودی یا افقی باشد. هر دو بر پایه همان فهرست HTML ساخته می شوند و سپس با CSS چیدمان می گیرند. نمونه ساده افقی معمولاً آیتم های فهرست را در یک خط نشان می دهد؛ درحالی که نمونه عمودی، آیتم ها را زیر هم قرار می دهد.
جای گذاری در صفحه
به طور معمول نوار ناوبری در بالای صفحه یا کنار صفحه قرار می گیرد. پس از پیاده سازی پایه، می توانید رفتارها را با «کلاس شبه (Pseudo-class)» مانند :hover
بهبود دهید و ظاهر را مطابق طراحی خود ارتقا دهید.
نکته: همان کد پایه بالا برای هر دو نوار عمودی و افقی به کار می رود و در فصل های بعدی می توانید شیوه چیدمان هر کدام را تکمیل کنید.
مطالعه بیشتر و گام های بعدی
برای تعاملات هاور به بخش کلاس های شبه مراجعه کنید. همچنین برای چیدمان آیتم ها در یک خط، بخش اینلاین-بلاک مفید است. جهت تراز کردن موقعیت ها نیز می توانید فصل تراز کردن را ببینید. مرجع این فصل: نوار ناوبری.