Howa kumepa: Menu kubwa

Tafakari kuhakikisha kumepa menu kubwa (menu ya kifungo cha kina na kuelekea kila eneo).

Una menu kubwa

Una menu ya kuleta, ambao inahusu uendelevu wa kilele cha kifungo kwa sababu inaonyesha menu hii.

Kipande wa Kwanza - Ongeza 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>

例子解释：

Inaweza kutumia elementi yoyote kwa kufungua menyu ya kilele, kama <button> au <a> au <p> elementi.

Tumia kipande cha kikata cha kilele (kama <div class="dropdown-content">) kwa kumwiza menyu ya kilele, na kuongeza mtandao (mabara), kisha kuongeza viungo vya menyu ya kilele katika mtandao hii.

Tumia elementi ya <div class="dropdown"> kuwarudisha mabaya na kipande cha kikata cha kilele (kama <div class="dropdown-content">) kwa sababu ya kufafanua menyu ya kilele kwa CSS.

Kipindi cha pili - Ongeza CSS:

/* Kikata cha kipande cha kichwa cha kilele) */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* Viungo vya kichwa cha kilele) */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Kikata cha kipande cha menyu cha kilele cha kichwa) */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Kikata cha menyu cha kilele cha kichwa) */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit; /* Kinaingia kwa muungano wa kichwa cha kilele kwa simu ni muhimu */
  margin: 0; /* Kinaingia kwa muungano wa kichwa cha kilele kwa simu ni muhimu */
}
/* Kima kushika mabaya katika kichwa cha kilele kinaongea kwa mabaya ya kichwa cha kilele kwa rangi ya kichwa) */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Muungano wa kipande cha kichwa cha kilele (kama kinachotumika) */
.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;
}
/* Kichwa kubwa cha menyu (kama inahitajika) */
.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}
/* 鼠标悬停时显示下拉菜单 */
.dropdown:hover .dropdown-content {
  display: block;
}
/* 创建三个等宽的列，并使其并排浮动 */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}
/* 为列内的链接设置样式 */
.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* 鼠标悬停时添加背景颜色 */
.column a:hover {
  background-color: #ddd;
}
/* 清除列后的浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Tafakari kwa kufikia

例子解释：

我们已经为导航栏和导航栏链接设置了背景色、内边距等样式。

我们为下拉菜单按钮设置了背景色、内边距等样式。

.dropdown-content 类包含实际的下拉菜单。它默认是隐藏的，将在鼠标悬停时显示（见下文）。它被定位在下拉菜单按钮的正下方，并且宽度设置为 100%，以覆盖整个屏幕。

我们没有使用边框，而是使用了 box-shadow 属性，使下拉菜单看起来像一个“卡片”。我们还使用 z-index 将下拉菜单放置在其他元素的前面。

:hover 选择器用于在用户将鼠标悬停在下拉菜单按钮上时显示下拉菜单。

.column 类用于在下拉菜单内创建三个并排浮动的列（以显示不同的类别）。

Makao ya kusikitisha

Makao:Menu ya kina cha CSS

Makao:Kwa huzunguka na kujenga menyu yenye viwango vya kufikia

Makao:Bara ya kina cha CSS

Makao:Kwa huzunguka na kujenga bar ya muungano wa kifaa kina kina