Mwongozo wa kuhusiana: Beti ya "More" kwenye menyu ya navigesheni

Mwongozo wa kuhakikisha: Beti ya "More" kwenye menyu ya navigesheni

Kubadilisha menyu ya kudhaa ya navigesheni

Kwa sababu ya kuingia msikilo kwenye eneo la menyu ya navigesheni, menyu ya kudhaa itakapokutana.

Mwongozo wa kwanza - Ongeza HTML:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">More
      <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>
</div>

Mafunzo ya mawasiliano:

Tumia eneo kama <button>、<a> au eneo ya <p> kufungua menyu ya kudhaa.

Tumia elementi kama <div> kubadilisha menyu ya kudhaa, na kuongeza viungo vya menyu ya kudhaa.

Tumia elementi ya <div> kuwarudisha mibaridi na eneo nyingine ya <div> kwa sababu ya ukitumia CSS kufafanisha menyu ya kudhaa.

Mwongozo wa pili - Ongeza CSS:

/* Kikaa cha menyu ya navigesheni */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* Viungo vya menyu ya navigesheni */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Kikaa cha menyu ya kudhaa */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Msikilio wa menyu ya kudhaa */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  
  font-family: inherit; /* Kwa msikilizo kwenye simu inahusiana na ujumbe wa kikabila kwa kina */,
  margin: 0; /* Inafikirika kwa kumekadiri kina kina kwenye simu kwa sababu ya kusikitisha kichwa cha butuni cha menyu ya kudanganywa */
}
/* Inafikirika kumekadiri kina kina cha mifumo ya kutumika kwa sababu ya kusikitisha kichwa cha butuni cha menyu ya kudanganywa */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Matokeo ya menyu ya kudanganywa (inaonekana kama kufikirika) */
.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;
}
/* Kina kina kwenye menyu ya kudanganywa */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Inafikirika kumekadiri kina kina cha menyu ya kudanganywa kwa sababu ya kusikitisha kichwa cha butuni cha menyu ya kudanganywa */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* Inafikirika kumekadiri menyu ya kudanganywa kwa sababu ya kusikitisha kichwa cha butuni cha menyu ya kudanganywa */
.dropdown:hover .dropdown-content {
  display: block;
}

Jifunze tena

Mafunzo ya mawasiliano:

Tumewahusisha mabaki ya mabaki ya mifumo ya kutumika na kina kina.

Tumewahusisha mabaki ya mabaki ya menyu ya kichwa cha mifumo ya kutumika na kina kina.

.dropdown kikundi .dropdown-content kina kina. Kwa sababu hii ni kina kina bila kina kina, inafikirika kuwa ina uharibifu kwa sababu ya kumiliki kina kingine kwenye kina kingine.

.dropdown-content kikundi kinachohusiana na menyu ya kudanganywa. Ilingeza kwa kawaida ni kufikirika, itakutonjika kwa sababu ya kusikitisha kichwa cha butuni cha menyu ya kudanganywa. Kwa kumekadiri, uwezo wa upekee wa uangalifu ni 160px. Inafikirika kumutaza mpangilio huo.

Sijatumia mbinu yenye uwanja, wengi wame tumia box-shadow mabaki, inaonekana kama kadi. Sijatumia mbinu yenye uwanja, wengi wame tumia z-index Ingiza menyu ya kudanganywa kwenye kina kwenye kina kingine.

:hover Mbinu inayoweza kutonjika menyu ya kudanganywa kwa sababu ya kusikitisha kichwa cha butuni cha menyu ya kudanganywa.

Mawasiliano ya kilele

Mafunzo:CSS 下拉菜单

Mafunzo:jinsi kumuea menyu ya kudanganywa ambayo inaweza kufanyika kichwa

Mafunzo:CSS 导航栏

Mafunzo:jinsi kwa kumuea kichwa cha mifumo ya kutumika kwa kila kina