آموزش ساخت منوی بازشونده با بوت استرپ

اگه می‌خواید یک منوی مرتب و واکنش‌گرا بسازید که هم روی کامپیوتر و هم روی موبایل درست کار کنه، بوت‌استرپ بخش زیادی از کار رو براتون انجام می‌ده. در این آموزش، اول فایل‌های لازم بوت‌استرپ ۵ رو به صفحه اضافه می‌کنیم، بعد نوار منو و زیرمنوی کشویی رو می‌سازیم و در آخر ظاهر، رفتار هاور و دسترس‌پذیری اون رو بهتر می‌کنیم.

نمونهٔ اصلی با کلیک باز می‌شه؛ چون کلیک برای موس، لمس و صفحه‌کلید قابل‌اعتمادتره. بعد یک قابلیت کمکی هم اضافه می‌کنیم تا منو روی کامپیوترهایی که واقعاً از هاور پشتیبانی می‌کنن، با رفتن نشانگر موس روی گزینه باز بشه. همهٔ کدها بر پایهٔ بوت‌استرپ ۵ هستن و برای اجرای اون‌ها به jQuery نیاز ندارید.

ساخت منوی بازشونده با بوت‌استرپ چه مراحلی داره؟

منوی بازشونده یا Dropdown منویی هست که با انتخاب یک گزینهٔ اصلی، چند لینک دیگه رو زیر اون نشون می‌ده. برای نمونه، می‌تونید گزینهٔ «خدمات» رو در منوی اصلی بذارید و لینک‌های «طراحی سایت»، «سئو» و «پشتیبانی» رو داخل زیرمنوی اون قرار بدید.

• فایل‌های CSS و JavaScript بوت‌استرپ رو به صفحه اضافه می‌کنیم.
• یک نوار منوی واکنش‌گرا می‌سازیم.
• گزینهٔ اصلی و لینک‌های زیرمنو رو اضافه می‌کنیم.
• ظاهر منو رو با چند خط CSS تغییر می‌دیم.
• هاور رو فقط برای دستگاه مناسب فعال می‌کنیم.
• منو رو با موبایل، موس و صفحه‌کلید آزمایش می‌کنیم.

برای رفتار اصلی، کلیک انتخاب بهتریه. هاور روی صفحهٔ لمسی معنی مشخصی نداره و منویی که فقط با هاور کار کنه، برای بعضی از کاربران صفحه‌کلید هم دردسر درست می‌کنه. پس در این آموزش، هاور جای کلیک رو نمی‌گیره و فقط در دسکتاپ به اون اضافه می‌شه.

قبل از ساخت منوی بازشونده به چه چیزهایی نیاز دارید؟

برای اجرای نمونه فقط به یک ویرایشگر متن، یک مرورگر و یک فایل HTML نیاز دارید. فایل تازه‌ای با نام index.html بسازید. کدهای HTML داخل همین فایل قرار می‌گیرن، CSS داخل تگ <style> و JavaScript هم نزدیک انتهای تگ <body> نوشته می‌شه.

فایل‌های بوت‌استرپ رو از شبکهٔ توزیع محتوا یا CDN می‌گیریم. CDN یعنی سرویسی که فایل‌های عمومی رو از یک سرور نزدیک‌تر به کاربر تحویل می‌ده. برای باز کردن نمونه‌ای که از CDN استفاده می‌کنه، اتصال اینترنت لازمه.

اگه هدفتون استفاده از بوت‌استرپ داخل وردپرسه، اول نمونه رو در یک فایل ساده آزمایش کنید. بعد می‌تونید از آموزش اضافه کردن بوت استرپ ۵ به وردپرس کمک بگیرید تا فایل‌ها رو اصولی وارد سایتتون کنید.

اضافه کردن بوت‌استرپ ۵ به صفحه

اضافه کردن فایل CSS بوت‌استرپ

کد زیر رو داخل بخش <head> صفحه بذارید. ویژگی dir="rtl" هم جهت صفحه رو راست‌به‌چپ می‌کنه. فایل RTL بوت‌استرپ برای صفحه‌های فارسی آماده شده و فاصله‌ها و جهت بعضی از اجزا رو بهتر مدیریت می‌کنه.

<!doctype html><html lang="fa" dir="rtl"><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>منوی بازشونده با بوت‌استرپ</title>  <link    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css"    rel="stylesheet"  ></head><body></body></html>

اضافه کردن فایل JavaScript بوت‌استرپ به همراه Popper

کد JavaScript زیر رو درست قبل از </body> بذارید. نسخهٔ Bundle شامل Popper هم هست. Popper همون بخشی هست که جای درست زیرمنو رو محاسبه می‌کنه. برای این آموزش لازم نیست فایل جداگانه‌ای برای اون اضافه کنید.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>

بررسی درست بارگذاری شدن فایل‌ها

فایل رو ذخیره کنید و در مرورگر باز کنید. بعد یک دکمه با کلاس‌های بوت‌استرپ داخل <body> بذارید. اگه دکمه آبی شد، فایل CSS درست بارگذاری شده. آزمایش JavaScript رو بعد از ساخت منوی کشویی انجام می‌دیم.

<button class="btn btn-primary" type="button">آزمایش بوت‌استرپ</button>

ساخت نوار منوی واکنش‌گرا با بوت‌استرپ

ساخت ساختار اصلی نوار منو

کلاس navbar ساختار اصلی نوار منو رو آماده می‌کنه. کلاس navbar-expand-lg هم می‌گه منو از اندازهٔ بزرگ به بالا کامل دیده بشه و در صفحه‌های کوچک‌تر جمع بشه. کلاس‌های bg-dark و navbar-dark پس‌زمینهٔ تیره و رنگ مناسب نوشته‌ها رو تنظیم می‌کنن.

اضافه کردن نام یا لوگوی سایت

لینکی که کلاس navbar-brand داره، جای نام یا لوگوی سایت هست. فعلاً نام سایت رو به‌صورت متنی می‌ذاریم. اگه لوگو دارید، می‌تونید متن داخل این لینک رو با تگ تصویر عوض کنید و برای ویژگی alt یک توضیح دقیق بنویسید.

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

در موبایل، لینک‌ها داخل یک بخش جمع‌شونده قرار می‌گیرن. دکمهٔ navbar-toggler این بخش رو باز و بسته می‌کنه. مقدار data-bs-target باید دقیقاً با شناسهٔ بخش جمع‌شونده یکی باشه. برای نمونه، مقدار #mainNavbar به بخشی با id="mainNavbar" وصل می‌شه.

اضافه کردن لینک‌های معمولی به منو

هر لینک معمولی داخل یک li با کلاس nav-item قرار می‌گیره. خود لینک هم کلاس nav-link داره. برای لینک صفحهٔ فعلی می‌تونید کلاس active و ویژگی aria-current="page" رو اضافه کنید.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">  <div class="container">    <a class="navbar-brand" href="#">سایت من</a>    <button class="navbar-toggler" type="button"      data-bs-toggle="collapse"      data-bs-target="#mainNavbar"      aria-controls="mainNavbar"      aria-expanded="false"      aria-label="باز و بسته کردن منو">      <span class="navbar-toggler-icon"></span>    </button>    <div class="collapse navbar-collapse" id="mainNavbar">      <ul class="navbar-nav me-auto mb-2 mb-lg-0">        <li class="nav-item">          <a class="nav-link active" aria-current="page" href="#">خانه</a>        </li>        <li class="nav-item">          <a class="nav-link" href="#about">درباره ما</a>        </li>      </ul>    </div>  </div></nav>

ساخت منوی بازشونده با بوت استرپ

اضافه کردن گزینهٔ اصلی منوی بازشونده

برای ساخت گزینهٔ اصلی، کلاس dropdown رو به li و کلاس dropdown-toggle رو به لینک اون اضافه کنید. ویژگی data-bs-toggle="dropdown" به JavaScript بوت‌استرپ می‌گه که این گزینه باید یک زیرمنو رو کنترل کنه.

ساخت زیرمنو و لینک‌های داخل اون

فهرست زیرمنو کلاس dropdown-menu داره و هر لینک داخل اون با کلاس dropdown-item ساخته می‌شه. این بخش رو بعد از لینک اصلی و داخل همون li قرار بدید.

<li class="nav-item dropdown">  <a class="nav-link dropdown-toggle" href="#"    id="servicesDropdown"    role="button"    data-bs-toggle="dropdown"    aria-expanded="false">    خدمات  </a>  <ul class="dropdown-menu" aria-labelledby="servicesDropdown">    <li><a class="dropdown-item" href="#design">طراحی سایت</a></li>    <li><a class="dropdown-item" href="#seo">سئو سایت</a></li>    <li><a class="dropdown-item" href="#support">پشتیبانی سایت</a></li>  </ul></li>

کاربرد ویژگی‌های data-bs و aria به زبان ساده

• data-bs-toggle="dropdown" قابلیت باز و بسته شدن زیرمنو رو فعال می‌کنه.
• aria-expanded وضعیت باز یا بسته بودن منو رو برای ابزارهای کمکی مشخص می‌کنه. بوت‌استرپ مقدار اون رو موقع باز و بسته شدن تغییر می‌ده.
• aria-labelledby زیرمنو رو به گزینهٔ اصلی خودش وصل می‌کنه.
• role="button" مشخص می‌کنه لینک اصلی در اینجا مثل یک دکمه عمل می‌کنه.

اضافه کردن جداکننده داخل منوی کشویی

اگه می‌خواید چند گزینه رو از بقیه جدا کنید، یک آیتم با کلاس dropdown-divider بین اون‌ها بذارید. ویژگی aria-hidden="true" هم می‌گه این خط فقط ظاهر منو رو مرتب می‌کنه و اطلاعات تازه‌ای برای ابزارهای کمکی نداره.

<li><hr class="dropdown-divider" aria-hidden="true"></li>

کد کامل منوی بازشونده با قابلیت کلیک

کد زیر یک نمونهٔ کامل و قابل‌اجراست. اون رو داخل فایل index.html بذارید، فایل رو ذخیره کنید و با مرورگر بازش کنید. در دسکتاپ روی «خدمات» کلیک کنید. در موبایل اول دکمهٔ سه‌خط رو بزنید و بعد گزینهٔ «خدمات» رو انتخاب کنید.

<!doctype html><html lang="fa" dir="rtl"><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>منوی بازشونده با بوت‌استرپ</title>  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css" rel="stylesheet"></head><body><nav class="navbar navbar-expand-lg navbar-dark bg-dark">  <div class="container">    <a class="navbar-brand" href="#">سایت من</a>    <button class="navbar-toggler" type="button"      data-bs-toggle="collapse"      data-bs-target="#mainNavbar"      aria-controls="mainNavbar"      aria-expanded="false"      aria-label="باز و بسته کردن منو">      <span class="navbar-toggler-icon"></span>    </button>    <div class="collapse navbar-collapse" id="mainNavbar">      <ul class="navbar-nav me-auto mb-2 mb-lg-0">        <li class="nav-item">          <a class="nav-link active" aria-current="page" href="#">خانه</a>        </li>        <li class="nav-item">          <a class="nav-link" href="#about">درباره ما</a>        </li>        <li class="nav-item dropdown">          <a class="nav-link dropdown-toggle" href="#"            id="servicesDropdown"            role="button"            data-bs-toggle="dropdown"            aria-expanded="false">            خدمات          </a>          <ul class="dropdown-menu" aria-labelledby="servicesDropdown">            <li><a class="dropdown-item" href="#design">طراحی سایت</a></li>            <li><a class="dropdown-item" href="#seo">سئو سایت</a></li>            <li><hr class="dropdown-divider" aria-hidden="true"></li>            <li><a class="dropdown-item" href="#support">پشتیبانی سایت</a></li>          </ul>        </li>        <li class="nav-item">          <a class="nav-link" href="#contact">تماس با ما</a>        </li>      </ul>    </div>  </div></nav><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script></body></html>

برای تغییر متن‌ها، فقط نوشتهٔ بین تگ‌های <a> رو عوض کنید. برای تغییر مقصد هر لینک هم مقدار href رو با آدرس صفحهٔ موردنظرتون جایگزین کنید. اگه گزینهٔ بیشتری می‌خواید، یکی از liهای داخل dropdown-menu رو کپی کنید و متن و آدرس اون رو تغییر بدید.

زیباتر کردن منوی بازشونده با CSS

تنظیم فاصلهٔ گزینه‌های منو

برای اینکه گزینه‌های منوی اصلی به هم نچسبن، می‌تونید از ویژگی gap استفاده کنید. این قانون رو فقط در اندازه‌ای فعال می‌کنیم که منو از حالت موبایل خارج شده.

@media (min-width: 992px) {  .navbar-nav {    gap: 0.75rem;  }}

تغییر رنگ، پس‌زمینه و حالت قرار گرفتن موس

کد زیر گوشه‌های زیرمنو رو گرد می‌کنه، سایهٔ ملایمی می‌ده و رنگ گزینه‌ای رو که نشانگر موس روی اون قرار گرفته تغییر می‌ده. حالت :focus هم برای کاربری هست که با صفحه‌کلید بین لینک‌ها حرکت می‌کنه.

.dropdown-menu {  min-width: 14rem;  padding: 0.5rem;  border: 0;  border-radius: 0.75rem;  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.15);}.dropdown-item {  padding: 0.65rem 0.85rem;  border-radius: 0.5rem;}.dropdown-item:hover,.dropdown-item:focus {  color: #0a58ca;  background-color: #eaf2ff;}

تنظیم فاصله و جایگاه زیرمنو

یک فاصلهٔ خیلی کوچک بین گزینهٔ اصلی و زیرمنو ظاهر مرتب‌تری می‌ده. ولی اگه قصد دارید هاور رو هم فعال کنید، فاصلهٔ زیاد ممکنه باعث بسته شدن منو هنگام حرکت موس بشه. مقدار کم زیر معمولاً انتخاب مناسبیه.

@media (min-width: 992px) {  .dropdown-menu {    margin-top: 0.25rem;  }}

اضافه کردن حرکت نرم به آیکون منو

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

.dropdown-toggle::after {  transition: transform 0.2s ease;}.dropdown-toggle.show::after {  transform: rotate(180deg);}@media (prefers-reduced-motion: reduce) {  .dropdown-toggle::after {    transition: none;  }}

باز کردن منو با هاور در دسکتاپ

چرا کلیک باید رفتار اصلی منو باقی بمونه؟

طبق الگوی اصلی Dropdown در مستندات بوت‌استرپ، باز شدن منو با کلیک کنترل می‌شه. این رفتار روی صفحهٔ لمسی، موس و صفحه‌کلید نتیجهٔ قابل‌اعتماد‌تری داره. پس کدی که در ادامه می‌بینید قابلیت کلیک بوت‌استرپ رو حذف نمی‌کنه.

تشخیص دستگاهی که واقعاً از هاور پشتیبانی می‌کنه

عرض صفحه به‌تنهایی نشون نمی‌ده که دستگاه موس داره. یک تبلت بزرگ ممکنه فقط صفحهٔ لمسی داشته باشه و یک لپ‌تاپ هم ممکنه هم‌زمان از لمس و موس پشتیبانی کنه. برای همین از عبارت (hover: hover) and (pointer: fine) استفاده می‌کنیم. بخش اول توانایی هاور و بخش دوم وجود نشانگر دقیق مثل موس رو بررسی می‌کنه.

اضافه کردن هاور با JavaScript معمولی و بدون jQuery

بوت‌استرپ ۵ به jQuery نیاز نداره. کد زیر منوهای کشویی داخل نوار منو رو پیدا می‌کنه و با ورود موس، نمونهٔ Dropdown مربوط به هر گزینه رو باز می‌کنه. با خروج موس هم همون نمونه بسته می‌شه.

const canHover = window.matchMedia(  '(hover: hover) and (pointer: fine)');const dropdowns = document.querySelectorAll(  '.navbar .dropdown');function enableHoverDropdowns() {  dropdowns.forEach((dropdown) => {    const toggle = dropdown.querySelector('[data-bs-toggle="dropdown"]');    const instance = bootstrap.Dropdown.getOrCreateInstance(toggle);    dropdown.addEventListener('mouseenter', () => {      if (canHover.matches) {        instance.show();      }    });    dropdown.addEventListener('mouseleave', () => {      if (canHover.matches) {        instance.hide();      }    });  });}enableHoverDropdowns();

بستن منو بعد از خارج شدن نشانگر موس

رویداد mouseleave وقتی اجرا می‌شه که نشانگر از کل محدودهٔ گزینه و زیرمنوی اون بیرون بره. برای اینکه کاربر بتونه موس رو راحت از گزینهٔ اصلی به زیرمنو برسونه، فاصلهٔ این دو بخش رو خیلی زیاد نکنید.

حفظ امکان باز کردن منو با کلیک و صفحه‌کلید

کد هاور فقط رویدادهای ورود و خروج موس رو اضافه می‌کنه. ویژگی data-bs-toggle="dropdown" سر جاش می‌مونه، پس کاربر هنوز می‌تونه با کلیک یا صفحه‌کلید منو رو باز کنه. یادتون نره هاور رو جایگزین کلیک نکنید.

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

در نمونهٔ زیر، HTML، CSS و JavaScript کنار هم قرار گرفتن. CSS داخل <style> و کد سفارشی JavaScript بعد از فایل بوت‌استرپ نوشته شده. این ترتیب مهمه؛ چون کد هاور برای اجرا به JavaScript بوت‌استرپ نیاز داره.

<!doctype html><html lang="fa" dir="rtl"><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>منوی کلیکی و هاور با بوت‌استرپ</title>  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css" rel="stylesheet">  <style>    .dropdown-menu {      min-width: 14rem;      padding: 0.5rem;      border: 0;      border-radius: 0.75rem;      box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.15);    }    .dropdown-item {      padding: 0.65rem 0.85rem;      border-radius: 0.5rem;    }    .dropdown-item:hover,    .dropdown-item:focus {      color: #0a58ca;      background-color: #eaf2ff;    }    .dropdown-toggle::after {      transition: transform 0.2s ease;    }    .dropdown-toggle.show::after {      transform: rotate(180deg);    }    @media (min-width: 992px) {      .navbar-nav {        gap: 0.75rem;      }      .dropdown-menu {        margin-top: 0.25rem;      }    }    @media (max-width: 991.98px) {      .navbar .dropdown-menu {        width: 100%;        max-width: 100%;        box-shadow: none;      }    }    @media (prefers-reduced-motion: reduce) {      .dropdown-toggle::after {        transition: none;      }    }  </style></head><body><nav class="navbar navbar-expand-lg navbar-dark bg-dark">  <div class="container">    <a class="navbar-brand" href="#">سایت من</a>    <button class="navbar-toggler" type="button"      data-bs-toggle="collapse"      data-bs-target="#mainNavbar"      aria-controls="mainNavbar"      aria-expanded="false"      aria-label="باز و بسته کردن منو">      <span class="navbar-toggler-icon"></span>    </button>    <div class="collapse navbar-collapse" id="mainNavbar">      <ul class="navbar-nav me-auto mb-2 mb-lg-0">        <li class="nav-item">          <a class="nav-link active" aria-current="page" href="#">خانه</a>        </li>        <li class="nav-item dropdown">          <a class="nav-link dropdown-toggle" href="#"            id="servicesDropdown"            role="button"            data-bs-toggle="dropdown"            aria-expanded="false">            خدمات          </a>          <ul class="dropdown-menu" aria-labelledby="servicesDropdown">            <li><a class="dropdown-item" href="#design">طراحی سایت</a></li>            <li><a class="dropdown-item" href="#seo">سئو سایت</a></li>            <li><hr class="dropdown-divider" aria-hidden="true"></li>            <li><a class="dropdown-item" href="#support">پشتیبانی سایت</a></li>          </ul>        </li>        <li class="nav-item">          <a class="nav-link" href="#about">درباره ما</a>        </li>        <li class="nav-item">          <a class="nav-link" href="#contact">تماس با ما</a>        </li>      </ul>    </div>  </div></nav><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script><script>  const canHover = window.matchMedia(    '(hover: hover) and (pointer: fine)'  );  document.querySelectorAll('.navbar .dropdown').forEach((dropdown) => {    const toggle = dropdown.querySelector('[data-bs-toggle="dropdown"]');    const instance = bootstrap.Dropdown.getOrCreateInstance(toggle);    dropdown.addEventListener('mouseenter', () => {      if (canHover.matches) {        instance.show();      }    });    dropdown.addEventListener('mouseleave', () => {      if (canHover.matches) {        instance.hide();      }    });  });</script></body></html>

فایل رو با پسوند .html ذخیره کنید و با دوبار کلیک در مرورگر بازش کنید. اگه ظاهر بوت‌استرپ دیده نمی‌شه، اتصال اینترنت و آدرس فایل CSS رو بررسی کنید. اگه منو ظاهر مناسبی داره ولی باز نمی‌شه، فایل JavaScript رو بررسی کنید.

سازگار کردن منوی بازشونده با موبایل

استفاده از کلیک در موبایل و نمایشگر لمسی

روی موبایل، کاربر با لمس کار می‌کنه. شرط hover: hover اجازه نمی‌ده کد هاور روی بیشتر صفحه‌های لمسی اجرا بشه. قابلیت کلیک بوت‌استرپ همچنان فعاله و کاربر می‌تونه بعد از باز کردن نوار منو، روی گزینهٔ «خدمات» بزند.

تنظیم نقطهٔ تغییر حالت منو برای اندازه‌های مختلف

کلاس navbar-expand-lg منو رو از عرض ۹۹۲ پیکسل به بالا باز نگه می‌داره. اگه می‌خواید این تغییر زودتر اتفاق بیفته، از navbar-expand-md استفاده کنید. اگه منوی شما گزینه‌های زیادی داره، بهتره نقطهٔ تغییر بزرگ‌تری مثل navbar-expand-xl انتخاب کنید تا لینک‌ها روی هم نیفتن.

جلوگیری از بیرون رفتن زیرمنو از صفحه

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

@media (max-width: 991.98px) {  .navbar .dropdown-menu {    width: 100%;    max-width: 100%;    box-shadow: none;  }}

اگه زیرمنو نزدیک لبهٔ صفحه باز می‌شه، اول بررسی کنید فایل RTL رو برای صفحهٔ فارسی گذاشته باشید. برای منویی که نزدیک سمت مخالف صفحه قرار گرفته هم می‌تونید کلاس dropdown-menu-end رو آزمایش کنید.

بهبود دسترس‌پذیری منوی بازشونده

استفاده از منو با کلید Tab و Enter

با کلید Tab بین لینک‌های منو حرکت کنید. وقتی تمرکز روی گزینهٔ کشویی قرار گرفت، Enter رو بزنید تا منو باز بشه. بعد دوباره با Tab بین لینک‌های داخل زیرمنو حرکت کنید. با Escape هم باید بتونید زیرمنو رو ببندید.

نمایش واضح گزینه‌ای که با صفحه‌کلید انتخاب شده

مرورگر و بوت‌استرپ معمولاً حالت تمرکز رو نشون می‌دن، ولی ممکنه CSS قالب سایتتون اون رو کم‌رنگ کرده باشه. با قانون زیر یک خط دور واضح برای لینک متمرکز می‌ذارید.

.navbar a:focus-visible,.navbar button:focus-visible {  outline: 3px solid #ffc107;  outline-offset: 3px;}

هماهنگ نگه داشتن وضعیت aria-expanded

وقتی منو رو با رابط رسمی JavaScript بوت‌استرپ باز و بسته می‌کنید، مقدار aria-expanded هم همراه وضعیت منو تغییر می‌کنه. به همین دلیل در کد هاور از instance.show() و instance.hide() استفاده کردیم و کلاس show رو دستی به عناصر اضافه نکردیم.

پرهیز از ساخت منویی که فقط با هاور کار می‌کنه

اگه منو فقط با هاور باز بشه، کاربر موبایل راه مطمئنی برای باز کردن اون نداره. بعضی از کاربران صفحه‌کلید هم نمی‌تونن به لینک‌های زیرمنو برسن. پس گزینهٔ اصلی باید با کلیک و صفحه‌کلید هم کار کنه و هاور فقط یک روش اضافه باشه.

خطاهای رایج در ساخت منوی بازشونده با بوت استرپ

باز نشدن زیرمنو به‌خاطر اضافه نشدن فایل JavaScript

فایل CSS فقط ظاهر منو رو می‌سازه. برای باز و بسته شدن Dropdown به فایل JavaScript بوت‌استرپ هم نیاز دارید. بهتره از bootstrap.bundle.min.js استفاده کنید؛ چون Popper رو هم همراه خودش داره.

استفاده از ویژگی‌های قدیمی data-toggle و data-target

در بوت‌استرپ ۵، ویژگی‌ها پیشوند data-bs- دارن. برای Dropdown از data-bs-toggle="dropdown" و برای دکمهٔ موبایل از data-bs-toggle="collapse" و data-bs-target استفاده کنید.

تداخل کدهای CSS قالب با کلاس‌های بوت‌استرپ

گاهی قالب سایت برای کلاس‌هایی مثل dropdown-menu یا nav-link قانون جداگانه‌ای داره. ابزار Inspect مرورگر رو باز کنید و ببینید کدوم قانون رنگ، جایگاه یا نمایش منو رو عوض کرده. برای محدود کردن CSS خودتون هم بهتره قانون رو با والد مشخصی مثل .navbar .dropdown-menu بنویسید.

کار نکردن هاور روی موبایل و دستگاه لمسی

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

بسته نشدن درست تگ‌های HTML

هر تگ باید با تگ درست خودش بسته بشه. برای نمونه، <nav> با </nav> و <ul> با </ul> بسته می‌شه. یک تگ ناقص می‌تونه ساختار کل منو رو به هم بریزه. تورفتگی مرتب کد هم پیدا کردن این خطاها رو آسون‌تر می‌کنه.

روش تست منو قبل از استفاده در سایت

1. کلیک: روی گزینهٔ اصلی چند بار کلیک کنید و باز و بسته شدن زیرمنو رو ببینید.
2. هاور دسکتاپ: با موس وارد گزینه و زیرمنو بشید و بعد نشانگر رو از کل محدوده بیرون ببرید.
3. موبایل و لمس: منو رو در یک گوشی واقعی یا حالت شبیه‌ساز موبایل مرورگر آزمایش کنید.
4. صفحه‌کلید: فقط با Tab، Shift+Tab، Enter و Escape بین گزینه‌ها حرکت کنید.
5. عرض‌های مختلف: عرض پنجره رو کم و زیاد کنید و مطمئن بشید لینک‌ها روی هم نمی‌افتن.
6. لبه‌های صفحه: بررسی کنید زیرمنو از سمت چپ یا راست صفحه بیرون نمی‌ره.
7. لینک‌ها: همهٔ مقصدها رو باز کنید تا لینک خالی یا اشتباه باقی نمونه.

جمع‌بندی ساخت منوی بازشونده با بوت استرپ

برای ساخت منوی بازشونده با بوت استرپ، اول فایل CSS و نسخهٔ Bundle جاوااسکریپت بوت‌استرپ ۵ رو اضافه کنید. بعد نوار منوی واکنش‌گرا، گزینهٔ dropdown-toggle و فهرست dropdown-menu رو بسازید. همین ساختار برای یک منوی کلیکی و سازگار با موبایل کافیه.

اگه باز شدن با هاور رو هم می‌خواید، قابلیت کلیک رو نگه دارید و هاور رو با JavaScript معمولی فقط برای دستگاه دارای موس دقیق فعال کنید. در پایان حتماً منو رو با لمس، موس و صفحه‌کلید آزمایش کنید. این چند آزمایش ساده جلوی بیشتر مشکلاتی رو می‌گیره که بعد از انتشار سایت دیده می‌شن.

سؤال‌های رایج دربارهٔ منوی بازشونده بوت‌استرپ

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.