Husababu: Sidebar ya menyu ya chagua

Page ya kabla Mifungo wa kijani cha kwenye kichwako cha juu
下一页带下拉菜单的响应式导航栏

Mwongozo wa kujua kuhakikisha menyu ya chagua katika sidebar ya msingi.

Menyu ya chagua katika sidebar ya msingi

Kujenga sidebar ya menyu ya chagua

Kipimo cha kwanza - Ongeza HTML:

<div class="sidenav">
  <a href="#about">Kuhusu</a>
  <a href="#services">Serivisi</a>
  <a href="#clients">Wafungaji</a>
  <a href="#contact">Wasifu</a>
  <button class="dropdown-btn">Dropdown
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  <a href="#contact">Tafuta</a>
</div>

Mifano ya maelezo:

Tumia elementi yoyote kufungua menu ya kwanza, kama <button>, <a> au elementi ya <p>.

Tumia elementi ya eneo kubwa (kama <div>) kuanzisha menu ya kwanza, na kuongeza viungo vya menu ya kwanza. Tutaongeza kwa viungo vyote vya sidebar kwa hii mifano ya uzoefu.

Mwaka - 2 - Ongeza CSS:

/* Sidebar inafikia kikuu inayotambua kwa kuzingatia */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}
/* Kufanya mifano ya uzoefu kwa viungo vya sidebar na vifungo vya menu vya kwanza */
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}
/* Kichwa kina kama inafikia kikuu */
.sidenav a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
}
/* 主要内容 */
.main {
  margin-left: 200px; /* 与侧边栏的宽度相同 */
  font-size: 20px; /* Kuongeza uharifu kwa kufungua kusoma */
  padding: 0px 10px;
}
/* Kusababisha kiwango cha kijani cha kushiriki cha gwanzo cha kijani cha kushiriki */
.active {
  background-color: green;
  color: white;
}
/* Kijani cha kushiriki cha kijani cha kushiriki (kwa kawaida inaonyesha). Chaguo: kuongeza mabara ya mbali ya kijani cha kushiriki na mbali wa kushiriki kwa kubadilisha muundo */
.dropdown-container {
  display: none;
  background-color: #262626;
  padding-left: 8px;
}
/* Chaguo: usababisha stili ya ikoni ya kichwa cha kifo cha kidogo */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

Jifungua tena

Tathmini ya tatu -ongezesha JavaScript:

/* Kusafiri kwa kila gwanzo cha kijani cha kushiriki ili kutumia mawasiliano ya kubonye na kusichosha kwenye kijani cha kushiriki - hii iningaa ina kijani cha kushiriki zaidi kuliko yote bila kusababisha kosa yoyote */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

Jifungua tena