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

صفحه قبل منوی فروپاشی پیچیده
صفحه بعدی منوهای فروپاشی در ناوبری جانبی

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

منوی فهرست در نوار ناوبری

ناوبری فهرست فلیپتک ایجاد کنید

وقتی کاربر موس خود را روی عناصر نوار ناوبری حرکت می‌دهد، منوی فهرست ظاهر می‌شود.

مرحله‌ی اول - اضافه کردن HTML:

<div class="navbar">
  <a href="#home">خانه</a>
  <a href="#news">اخبار</a>
  <div class="dropdown">
    <button class="dropbtn">فهرست
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">لینک 1</a>
      <a href="#">لینک 2</a>
      <a href="#">لینک 3</a>
    </div>
  </div>
</div>

مثال توضیحی:

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

منوی فهرست را با استفاده از عنصر محفظه (مانند <div>) ایجاد کنید و لینک‌های منوی فهرست را در آن اضافه کنید.

یک عنصر <div> را دور از دکمه و یک عنصر دیگری <div> بپیوندید تا منوی فهرست را به درستی موقعیت دهید.

مرحله‌ی دوم - اضافه کردن 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-family: inherit; /* برای عمودی هماهنگی روی تلفن‌های موبایل بسیار مهم است */
  margin: 0; /* برای همراستایی عمودی در موبایل‌ها بسیار مهم است */
}
/* رنگ پس‌زمینه قرمز به لینک‌های ناوبری در حالت hover اضافه می‌شود */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* محتوای منوهای فروکش (به صورت پیش‌فرض پنهان است) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* لینک‌های منوهای فروکش */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* رنگ پس‌زمینه خاکستری به لینک‌های منوهای فروکش در حالت hover اضافه می‌شود */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* منوهای فروکش در حالت hover نمایش داده می‌شوند */
.dropdown:hover .dropdown-content {
  display: block;
}

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

مثال توضیحی:

ما برای لینک‌های ناوبری و ناوبری پیکربندی‌های رنگ پس‌زمینه، حاشیه داخلی و غیره را انجام داده‌ایم.

ما برای دکمه‌های منوهای فروکش پیکربندی‌های رنگ پس‌زمینه، حاشیه داخلی و غیره را انجام داده‌ایم.

.dropdown کلاس .dropdown-content مخزن. چون این یک عنصر <div> است و نه <a>، باید آن را شناور کنیم تا در کنار لینک باقی بماند.

.dropdown-content کلاس‌هایی که منوهای فروکش واقعی را شامل می‌شوند استفاده کردیم. این‌ها به صورت پیش‌فرض پنهان هستند و در هنگام قرار گرفتن موس روی آن‌ها نمایش داده می‌شوند (در ادامه مشاهده می‌کنید). توجه داشته باشید که حداقل عرض تنظیم شده به 160px است. می‌توانید این تنظیم را تغییر دهید.

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

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