جلسه سیزدهم: نوار ناوبری یا Navigation bar در CSS

نوار ناوبری یا Navigation bar در CSS

خوش اومدین به سیزدهمین جلسه از دوره آموزش رایگان CSS. امروز قرار هست که در مورد نوار ناوبری (Navigation Bar) و نحوه ایجاد اون صحبت کنیم. نوار ناوبری بر سهولت دسترسی کاربرها به بخش های مختلف یک وبسایت قرار داده میشه و به بخش ثابتی از وبسایت ها تبدیل شده. یک بخش پرکاربرد و مهم که در همه صفحات وبسایت هم تکرار میشه. ما امروز میخایم با استفاده از مطالبی که تا اینجای دوره یادگرفتیم نوار ناوبری افقی و عمودی طراحی کنیم و نکات مهم در این خصوص رو بررسی کنیم. پس تا انتهای این جلسه همراه من باشید.

بهترین شیوه برای ایجاد نوار ناوبری استفاده از لیست ها هست. ما توی این جلسه با استفاده از لیست نوار ناوبری عمودی و افقی طراحی میکنیم.

طراحی نوار ناوبری عمودی Vertical Navigation Bar

ما میتونیم با استفاده از لیست ها یک ناوبری عمودی ایجاد کنیم. با استایل دهی مناسب هر بخش یک لیست تبدیل به یک آیتم نوار ناوبری ما میشه. تصویر زیر رو ببینید:

نوار ناوبری بالا با استفاده از کدهای html که در سمت چپ تصویر میبینید ایجاد شده. ما کدهای css زیر رو برای این تگ ها تعریف کردیم. کدها رو ببینید تا در مورد نکات مهم اون توضیححاتی بدم:

ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 200px;
      background-color: #f1f1f1;
      border: 1px solid #555;
    }

    li a {
      display: block;
      color: #000;
      padding: 8px 16px;
      text-decoration: none;
    }

    li {
      text-align: center;
      border-bottom: 1px solid #555;
    }

    li:last-child {
      border-bottom: none;
    }

    li a.active {
      background-color: #bb0000;
      color: white;
    }

    li a:hover:not(.active) {
      background-color: #555;
      color: white;
    }

در ابتدا به ul استایل دهی کردیم. با قرار دادن مقدار none برای list-style-type علاپم یا شماره هایی که باید کنار هر لیست قرار میگرفت رو حذف کردیم. و عرض 200px رو هم براش تعریف کردیم. همونطور که میدونید تگ a جزو تگ های inline بود ما اون رو به block تبدیل کردیم تا کل عرض li رو پر بکنه. برای اینکه مرز بین آیتم ها مشخص باشه از border-bottom استفاده کردم و مقدار 1px رو بهش دادم ولی آیتم آخری نیازی به مرز نداره، چونکه کادر پایین ul اونجا هست پس با استفاده از li:last-child به آخرین li دسترسی پیدا کردم و مقدار none رو برای border-bottom اون قرار دادم. ما یک کلاس به اسم active داریم که آیتم فعال رو نشون میده در آخرین بخش این کد برای li a:hover استایل دهی انجام دادم. من نمیخواستم که کلاس active از این استایل دهی استفاده کنه بنابراین اومدم و کلاس active رو با استفاده از not از این قاعده مستثنی کردم.

طراحی نوار ناوبری افقی Horizontal Navigation Bar

دقیقا با همون کدی که در بالا ناوبری عمودی ایجاد کردیم، اینجا یک ناوبری افقی ایجاد کردیم. تنها با تغییر کدهای css و بدون تغییر در کدهای html منوی بالا رو به شکل زیر تغییر دادیم. تصویر زیر رو ببینید:

همونطور که میبینید تغییری در کدهای html ندادم و دقیقا از همون کدها برای این منو استفاده کردم.

کدهای css این منو رو در پایین میتونید ببینید:

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }

    li {
      float: left;
    }

    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    li a:hover:not(.active) {
      background-color: #111;
    }

    .active {
      background-color: #bb0000;
    }

تنها تفاوت اساسی که باعث افقی شدن نوار ناوبری ما شده ویژگی float هست که باعث میشه آیتم های ما در کنار همدیگه قرار بگیرند.

در ویدیو این جلسه نوار ناوبری ثابت در بالا و پایین صفحه رو هم توضیح دادم و همچنین navigation هایی که هنگام اسکرول صفحه به بالای صفحه میچسبند رو هم شرح دادم. پیشنهاد میکنم ویدیو این جلسه رو از دست ندید.

همه ویدیوهای دوره آموزش CSS