چگونه ایجاد می‌کنیم: منوی بزرگ

آموزش ایجاد منوی بزرگ (منوی کشویی تمام‌عرض نوار ناوبری).

ایجاد منوی بزرگ

یک منوی کشویی ایجاد کنید که وقتی کاربر موس را روی عنصرهای نوار 导航 حرکت می‌دهد، این منو نمایش داده شود.

مرحلة اولیة - اضافه HTML:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Mega Menu</h2>
      </div>
      <div class="row">
        <div class="column">
          <h3>Category 1</h3>
          <a href="#">لینک 1</a>
          <a href="#">لینک 2</a>
          <a href="#">لینک 3</a>
        </div>
        <div class="column">
          <h3>Category 2</h3>
          <a href="#">لینک 1</a>
          <a href="#">لینک 2</a>
          <a href="#">لینک 3</a>
        </div>
        <div class="column">
          <h3>دسته‌بندی 3</h3>
          <a href="#">لینک 1</a>
          <a href="#">لینک 2</a>
          <a href="#">لینک 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

توضیح مثال:

می‌توان از هر عنصری برای باز کردن لیست کشویی استفاده کرد، به عنوان مثال عنصر <button>، <a> یا <p>.

از عنصر محیطی (مانند <div class="dropdown-content">) برای ایجاد لیست کشویی استفاده کنید، سپس شبکه‌ای (ستون) اضافه کنید و سپس لینک‌های لیست کشویی را در شبکه قرار دهید.

از عنصر <div class="dropdown"> برای بسته‌بندی دکمه و عنصر محیطی (<div class="dropdown-content">) استفاده کنید، تا لیست کشویی را به درستی با استفاده از CSS قرار دهید.

مرحله دوم - اضافه کردن CSS:

/* محیط ناوبری */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* لینک‌های داخل ناوبری */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* محیط لیست کشویی */
.dropdown {
  float: left;
  overflow: hidden;
}
/* دکمه لیست کشویی */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit; /* برای عمودیت در دستگاه‌های موبایل بسیار مهم است */
  margin: 0; /* برای عمودیت در دستگاه‌های موبایل بسیار مهم است */
}
/* در حالت قرارگیری موس بر روی لینک‌های ناوبری، رنگ پس‌زمینه قرمز اضافه می‌شود */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* محتوای لیست کشویی (پنهان به عنوان پیش‌فرض) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* بزرگترین عنوان منو (اگر نیاز باشد) */
.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}
/* نمایش منوی فلاپ‌داون در زمان قرار گرفتن ماوس بر روی آن */
.dropdown:hover .dropdown-content {
  display: block;
}
/* ایجاد سه ستون برابر و موازی */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}
/* تنظیم استایل برای لینک‌های داخل ستون */
.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* افزودن رنگ پس‌زمینه در زمان قرار گرفتن ماوس بر روی آن */
.column a:hover {
  background-color: #ddd;
}
/* پاکسازی شناور پس از ستون‌ها */
.row:after {
  content: "";
  display: table;
  clear: both;
}

به طور مستقیم امتحان کنید

توضیح مثال:

ما برای ناوبری و لینک‌های ناوبری رنگ پس‌زمینه و حاشیه‌ها و سایر استایل‌ها را تنظیم کرده‌ایم.

ما برای دکمه منوی فلاپ‌داون رنگ پس‌زمینه و حاشیه‌ها و سایر استایل‌ها را تنظیم کرده‌ایم.

.dropdown-content شامل منوی فلاپ‌داون واقعی است. به طور پیش‌فرض مخفی است و در زمان قرار گرفتن ماوس بر روی آن نمایش داده می‌شود (در زیر توضیح داده می‌شود). آن در زیر دکمه منوی فلاپ‌داون قرار دارد و عرض آن به 100% تنظیم شده است تا کل صفحه را پوشش دهد.

استفاده نمی‌کنیم، بلکه از box-shadow ، منوی فلاپ‌داون به نظر می‌رسد مانند یک کارت. ما همچنین از ویژگی منوی فلاپ‌داون را در جلوی عناصر دیگر قرار می‌دهد.

:hover انتخابگر برای نمایش منوی فلاپ‌داون زمانی که کاربر ماوس را بر روی دکمه منوی فلاپ‌داون قرار می‌دهد.

.column طبقه‌بندی برای ایجاد سه ستون موازی در داخل منوی فلاپ‌داون (برای نمایش دسته‌بندی‌های مختلف) استفاده می‌شود.

صفحات مرتبط

تدریس:منوهای کشویی CSS

تدریس:چگونه یک منوی فلاپ‌داون قابل کلیک ایجاد کنیم

تدریس:نوارهای ابزار CSS

تدریس:چگونه یک ناوبری بالای پاسخگو ایجاد کنیم