چگونه ایجاد می‌شود: ناوبری بالای صفحه پاسخگو با منو بازشو

آموزش ایجاد ناوبری بالای صفحه پاسخگو با منو بازشو.

ایجاد ناوبری بالای صفحه پاسخگو با منو بازشو

قدم اول - اضافه کردن HTML:

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>

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

/* رنگ پس‌زمینه سیاه برای ناوبری بالایی اضافه می‌شود */
.topnav {
  background-color: #333;
  overflow: hidden;
}
/* سبک لینک‌های ناوبری را تنظیم می‌کند */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/* یک کلاس فعال اضافه می‌کند تا صفحه فعلی را برجسته کند */
.active {
  background-color: #04AA6D;
  color: سفید;
}
/* در صفحه‌های کوچک، لینک‌های باز و بستن ناوبری بالایی را مخفی می‌کند */
.topnav .icon {
  display: none;
}
/* جعبه منوی فلاپ‌دون - برای قرار دادن محتوای منوی فلاپ‌دون استفاده می‌شود */
.dropdown {
  float: left;
  overflow: hidden;
}
/* سبک دکمه‌های منوی فلاپ‌دون را تنظیم می‌کند تا با ناوبری بالایی سازگار باشد */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: سفید;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
/* سبک محتوای منوی فلاپ‌دون را تنظیم می‌کند (به صورت پیش‌فرض مخفی است) */
.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: سیاه;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* در حالت قرار گرفتن موش بر روی آن، به لینک‌های ناوبری بالایی و دکمه‌های منوی فلاپ‌دون پس‌زمینه تیره اضافه می‌شود */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: سفید;
}
/* در حالت قرار گرفتن موش بر روی آن، به لینک‌های منوی فلاپ‌دون پس‌زمینه خاکستری اضافه می‌شود */
.dropdown-content a:hover {
  background-color: #ddd;
  color: سیاه;
}
/* هنگامی که کاربر ماوس را بر روی دکمه منو فلیپتون قرار می‌دهد، منو فلیپتون نمایش داده می‌شود */
.dropdown:hover .dropdown-content {
  display: block;
}
/* هنگامی که عرض صفحه کمتر از 600 پیکسل باشد، لینک‌های غیر اولیه ("خانه") را مخفی می‌کند. لینک‌هایی که باید نوار ناوبری بالایی را باز و بسته کنند (آیکون) نمایش داده می‌شوند */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}
/* هنگام کلیک کاربر بر روی آیکون، JavaScript کلاس "responsive" را به نوار ناوبری بالایی اضافه می‌کند. این کلاس باعث می‌شود که نوار ناوبری بالایی در صفحه‌های کوچک بهتر به نظر برسد (لینک‌ها به صورت عمودی نمایش داده می‌شوند تا جایگزین نمایش افقی شوند) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

مرحله سوم - افزودن JavaScript:

/* هنگام کلیک کاربر بر روی آیکون، بین افزودن و حذف "responsive" کلاس در نوار ناوبری بالایی بین قطع و وصل می‌شود */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

با خودتان امتحان کنید

صفحات مرتبط

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

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

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

تدریس:چگونه نوار کناری را ایجاد کنیم