How to Create: Subnavigation

Learn how to use CSS to create a subnavigation menu.

Create Subnavigation

Step 1 - Add HTML:

<!-- 加载 Font Awesome 图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 导航菜单 -->
<div class="navbar">
  <a href="#home">Home</a>
  <div class="subnav">
    <button class="subnavbtn">About <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#company">Company</a>
      <a href="#team">Team</a>
      <a href="#careers">Careers</a>
    </div>
  </div>
  <div class="subnav">
    <button class="subnavbtn">Services <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#bring">Bring</a>
      <a href="#deliver">Deliver</a>
      <a href="#package">Package</a>
      <a href="#express">Express</a>
    </div>
  </div>
  <div class="subnav">
    <button class="subnavbtn">Partners <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#link1">Link 1</a>
      <a href="#link2">Link 2</a>
      <a href="#link3">Link 3</a>
      <a href="#link4">پیوند 4</a>
    </div>
  </div>
  <a href="#contact">تماس</a>
</div>

توضیح مثال:

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

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

برای استفاده از CSS برای موقعیت‌گذاری منوی زیرنویسی، دکمه و <div> را در یک <div> محصور کنید.

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

/* منوی ناوبری */
.navbar {
  تغییر محتوا: مخفی;
  رنگ پس‌زمینه: #333;
}
/* لینک‌های ناوبری */
.navbar a {
  شناور: چپ;
  حجم فونت: 16px;
  رنگ: سفید;
  ترازبندی متن: وسط;
  حاشیه: 14px 16px;
  زیرخط: هیچ;
}
/* منوی زیرنویسی */
.subnav {
  شناور: چپ;
  تغییر محتوا: مخفی;
}
/* دکمه زیرنویسی */
.subnav .subnavbtn {
  حجم فونت: 16px;
  حاشیه: هیچ;
  کонтور: هیچ;
  رنگ: سفید;
  حاشیه: 14px 16px;
  رنگ پس‌زمینه: ارث;
  خانواده فونت: ارث;
  حاشیه: 0;
}
/* وقتی موس را روی لینک‌های ناوبری قرار می‌دهید، پس‌زمینه قرمز اضافه می‌شود */
.navbar a:hover, .subnav:hover .subnavbtn {
  رنگ پس‌زمینه: قرمز;
}
/* استایل‌گذاری محتوای زیرنویسی - استفاده از موقعیت تعاملی */
.subnav-content {
  نمایش: نه;
  موقعیت: تعاملی;
  چپ: 0;
  رنگ پس‌زمینه: قرمز;
  عرض: 100%;
  موقعیت زبر: 1;
}
/* استایل‌گذاری لینک‌های زیرنویسی */
.subnav-content a {
  شناور: چپ;
  رنگ: سفید;
  زیرخط: هیچ;
}
/* وقتی موس را روی آن قرار می‌دهید، پس‌زمینه خاکستری اضافه می‌شود */
.subnav-content a:hover {
  رنگ پس‌زمینه: #eee;
  رنگ: سیاه;
}
/* وقتی موس را روی محفظه زیرنویسی قرار می‌دهید، محتوای زیرنویسی باز می‌شود */
.subnav:hover .subnav-content {
  display: block;
}

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