ساخت منوی سایت توسط Bootstrap

طراحی منوی responsive یکی از مهمترین بخش های هر سایت می باشد که در Bootstrap نیز توجه ویژه ای به آن شده است تا در دستگاه های متفاوت، منو به شکل مناسبی نمایش داده شود.

نحوه ایجاد منوی افقی

برای طراحی منو سه کلاس اصلی به شکل زیر وجود دارد:

  • nav: کلاسی که به ul اصلی اختصاص داده می شود.
  • nav-item: کلاسی که به هریک از گزینه های منوها اختصاص داده می شود.
  • nav-link: کلاسی که تگ های a موجود در هر منو اختصاص داده می شود.
<div class="container">
      <h2>ساخت منو در Bootstrap</h2>
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link" href="#">خانه</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">محصولات</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">درباره ما</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">تماس با ما</a>
        </li>
     </ul>
</div>

حاصل اجرای کدها به شکل زیر خواهد بود.

آموزش بوت استرپ-ساخت منو

برای تعیین چیدمان یا محل قرار گیری منو می توانید از کلاس های زیر استفاده نمایید.

  • justify-content-center: منو را در مرکز صفحه نمایش می دهد.
  • justify-content-end: منو را در سمت چپ صفحه نمایش می دهد.
<ul class="nav justify-content-end">

در صورتیکه قصد داشته باشید به جای منوی افقی، منوی عمودی نمایش داده شود می توانید کلاس flex-column را به ul اضافه نمایید.

<ul class="nav flex-column">

منوی دو سطحی

در بسیاری موارد نیاز به منوهایی می باشد که حاوی زیر منو هستند. برای پیاده سازی این نوع منوها می بایست درون li مربوط به گزینه منو، یک لیست جدید برای زیر منوها ایجاد نمایید.

<li class="nav-item">
  <a class="nav-link" href="#">محصولات</a>
  <div>
    <a href="#">آموزش سی شارپ</a>
    <a href="#">آموزش پایتون</a>
    <a href="#">آموزش ری اکت</a>
    <a href="#">آموزش انگولار</a>
  </div>
</li>

برای تبدیل شدن منو از حالت ساده به منوی حاوی زیر منو، می بایست به li مربوط به منو، کلاس dropdown را اضافه نمایید.

<li class="nav-item dropdown">

و در ادامه تگ a را به شکل زیر اصلاح نمایید.

<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">محصولات</a>

در پایان گزینه های زیر منو را به شکل زیر اصلاح نمایید.

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">آموزش سی شارپ</a>
  <a class="dropdown-item" href="#">آموزش پایتون</a>
  <a class="dropdown-item" href="#">آموزش ری اکت</a>
  <a class="dropdown-item" href="#">آموزش انگولار</a>
</div>

کد کامل این تمرین به شکل زیر خواهد بود.

<div class="container">
  <h2>ساخت منو در Bootstrap</h2>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#">خانه</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">محصولات</a
      >
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">آموزش سی شارپ</a>
        <a class="dropdown-item" href="#">آموزش پایتون</a>
        <a class="dropdown-item" href="#">آموزش ری اکت</a>
        <a class="dropdown-item" href="#">آموزش انگولار</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">درباره ما</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">تماس با ما</a>
    </li>
  </ul>
</div>

حاصل اجرای کدهای فوق به شکل زیر می باشد.

آموزش بوت استرپ-منوی دو سطحی

نوار منو

با استفاده از نوار منو می توان منوهایی شکیل تر با قابلیت بیشتر داشت. برای ساخت نوار منو می توانید یک تگ nav قرار داده و کلاس های زیر را به آن اضافه نمایید.

<nav class="navbar navbar-expand-sm bg-dark">

دقت کنید که کل محتوای منو می بایست به داخل تگ nav منتقل شده و کلاس navbar-nav را نیز به آن اختصاص داد.

<ul class="navbar-nav">

سایر تنظیمات منو همانند بخش قبل می باشد.

<div class="container">
  <h2>ساخت نوار منو در Bootstrap</h2>
  <nav class="navbar navbar-expand-sm bg-dark">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">خانه</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">محصولات</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">آموزش سی شارپ</a>
          <a class="dropdown-item" href="#">آموزش پایتون</a>
          <a class="dropdown-item" href="#">آموزش ری اکت</a>
          <a class="dropdown-item" href="#">آموزش انگولار</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">درباره ما</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">تماس با ما</a>
      </li>
    </ul>
  </nav>
</div>

جهت افزودن نام سایت (برند) می توانید در داخل تگ nav دستور زیر را اضافه نمایید.

<a class="navbar-brand" href="#">بنو</a>

در صورتیکه قصد داشته باشید با کوچک شدن عرض صفحه (مشابه سایز موبایل) منو ها مخفی شده و علامت برگر نمایش داده شود که با کلیک بر روی آن بتوانید گزینه های منو را مشاهده نمایید می بایست دکمه زیر را بعد از برند اضافه نمایید.

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
</button>

سپس کل منو (تگ ul) را درون یک div قرار داده و کلاس های زیر را به آن اضافه کنید.

<div class="collapse navbar-collapse" id="collapsibleNavbar">

کد کامل این مثال به شکل زیر خواهد بود.

<div class="container">
    <h2>ساخت نوار منو در Bootstrap</h2>
    <nav class="navbar navbar-expand-sm bg-dark">
        <a class="navbar-brand" href="#">بنو</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">خانه</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown"  href="#">محصولات</a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">آموزش سی شارپ</a>
                <a class="dropdown-item" href="#">آموزش پایتون</a>
                <a class="dropdown-item" href="#">آموزش ری اکت</a>
                <a class="dropdown-item" href="#">آموزش انگولار</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">درباره ما</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">تماس با ما</a>
            </li>
          </ul>
        </div>
    </nav>
</div>

پس از تغییر کدها به شکل فوق، با کوچک شدن اندازه صفحه، گزینه های منو مخفی شده و تنها برند نمایش داده می شود که با کلیک رو علامت برگر می توانید گزینه های منو را مشاهده نمایید.

آموزش بوت استرپ-ساخت منوی برگر