چگونه ایجاد می‌شود: دکمه "بیشتر" در ناوبری

صفحه قبل دکمه‌های صفحه بعد/قبلی
صفحه بعدی دکمه‌های بلوک

آموزش ایجاد دکمه "بیشتر".

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

ناوبری منو فروپاشی ایجاد کنید

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

第一步 - اضافه کردن 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 به درستی قرار دهید.

第二步 - اضافه کردن 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; /* برای عمودرسازی روی تلفن‌ها بسیار مهم است */
}
/* رنگ پس‌زمینه قرمز برای لینک‌های ناوبری در زمان موس‌ورس اضافه می‌شود */
.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;
}
/* رنگ پس‌زمینه خاکستری برای لینک‌های منوهای فلیپتون در زمان موس‌ورس اضافه می‌شود */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* منوهای فلیپتون در زمان موس‌ورس نمایش داده می‌شوند */
.dropdown:hover .dropdown-content {
  display: block;
}

آزمایش کنید

توضیح مثال:

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

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

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

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

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

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