如何创建：大型菜单

学习如何创建大型菜单（导航栏中的全宽下拉菜单）。

创建大型菜单

创建一个下拉菜单，当用户将鼠标移动到导航栏中的元素上时会显示该菜单。

第一步 - 添加 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="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 2</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 3</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

Halimbawa na ipinaliwanag:

Maaaring gamitin ang anumang element upang buksan ang dropdown menu, halimbawa ang <button>、<a> o <p> element.

Gamitin ang container element (tulad ng <div class="dropdown-content">) upang lumikha ng dropdown menu, idagdag ang grid (kolom), at pagkatapos dagdag ang link ng dropdown sa loob ng grid.

Gamitin ang <div class="dropdown"> element upang balutin ang button at ang container element (<div class="dropdown-content">) upang maiayos na ma-position ng dropdown menu gamit ang CSS.

Ikalawa - Magdagdag ng CSS:

/*Container ng navigation bar */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/*Link sa loob ng navigation bar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/*Container ng dropdown menu */
.dropdown {
  float: left;
  overflow: hidden;
}
/*Button ng dropdown menu */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit; /*Mahalaga para sa vertical alignment sa mobile devices*/
  margin: 0; /*Mahalaga para sa vertical alignment sa mobile devices*/
}
/*Nagdagdag ng red background color sa link ng navigation bar kapag may hover*/
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/*Nilalaman ng dropdown list (naka-hide sa default) */
.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;
}
/* Malaking header ng menu (kung kailangan) */
.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}
/* Ipakita ang dropdown menu kapag nasa ilalim ng mouse */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Gumawa ng tatlong katumbas na kolum, at ihahatid sila */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}
/* Itaguyod ang mga estilo ng link sa loob ng kolum */
.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Magdagdag ng kulay ng background kapag nasa ilalim ng mouse */
.column a:hover {
  background-color: #ddd;
}
/* Itanggal ang paghahalong pagkatapos ng kolum */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Subukan nang personal

Halimbawa na ipinaliwanag:

Nagtipan namin ng mga estilo ng kulay ng background, padding, at iba pa para sa navigasyon at link ng navigasyon.

Nagtipan namin ng mga estilo ng kulay ng background, padding, at iba pa para sa button ng dropdown menu.

.dropdown-content Ang klase ay naglalaman ng aktwal na dropdown menu. Ito ay kasalukuyang nakakubli, at ipapakita kapag nasa ilalim ng mouse (tingnan sa ibaba). Ito ay na-locate sa ilalim ng button ng dropdown menu, at ang lapad ay naitatag sa 100%, upang takpan ang buong layo ng ekrano.

Hindi gumagamit ng border, kundi gumagamit ng box-shadow Atributo, upang ang dropdown menu ay mukhang isang "kartong". Ginagamit din namin z-index Ilagay ang dropdown menu sa harap ng ibang elemento.

:hover Ang selector ay ginagamit upang ipakita ang dropdown menu kapag nasa ilalim ng mouse ang button ng dropdown menu.

.column Ang klase ay ginagamit upang gumawa ng tatlong paralel na kolum sa loob ng dropdown menu (upang ipakita ang iba't ibang kategorya).

Nakakita ng pahina

Tuturo:CSS 下拉菜单

Tuturo:Paano gumawa ng klickable na dropdown menu

Tuturo:CSS 导航栏

Tuturo:Paano gumawa ng responsibong itaas na navigasyon