Einfacher CSS3-Dropdown-Menüeffekt mit Unterstreichungs-Folgeeffekt

Kurzes Tutorial

Dies ist ein Dropdown-Menüeffekt mit folgendem Unterstreichungseffekt, der mit reinem CSS3 erstellt wurde. Das Dropdown-Menü verwendet CSS3-Transformation und -Übergang, um Unterstreichungs-Folgeeffekte und Dropdown-Menüeffekte zu erstellen.

Verwendung

HTML-Struktur

Dieses Dropdown-Menü verwendet das c787b9a589a3ece771e842a6176cf8e9-Element, um eine ungeordnete Liste einzuschließen.

<nav>
  <ul id="main">
    <li>主页</li>
    <li>关于我们</li>
    <li>项目分类
      <ul class="drop">
        <p>
        <li>scss</li>
        <li>jquery</li>
        <li>html</li>
        </p>
      </ul>
    </li>
    <li>联系我们</li>
    <p id="marker"></p>
  </ul>
</nav>

CSS-Stil

Das gesamte Menü ul#mian wird mittels relativer Positionierung positioniert. Die Anzeige wird als Inline-Element auf Blockebene angezeigt. Die Größe der Menüelemente wird mithilfe der Auffüllung angepasst und die Mindestbreite (min-width) ist auf 120 Pixel festgelegt.

#main {
  position: relative;
  list-style: none;
  background: #6BBE92;
  font-weight: 400;
  font-size: 0;
  text-transform: uppercase;
  display: inline-block;
  padding: 0;
  margin: 50px auto;
}
#main li {
  font-size: 0.8rem;
  display: inline-block;
  position: relative;
  padding: 15px 20px;
  cursor: pointer;
  z-index: 5;
  min-width: 120px;
}
li {
  margin: 0;
}

In der HTML-Struktur ist ul.drop die Dropdown-Menükomponente. Die Positionierungsmethode verwendet die absolute Positionierung. Das darin enthaltene p-Element verwendet die Übersetzungsfunktion, um -100 % auf der Y-Achse zu verschieben, um es auszublenden (overflow:hidden wird für .drop verwendet).

.drop {
  overflow: hidden;
  list-style: none;
  position: absolute;
  padding: 0;
  width: 100%;
  left: 0;
  top: 48px;
}
.drop p {
  -webkit-transform: translate(0, -100%);
  -moz-transform: translate(0, -100%);
  -ms-transform: translate(0, -100%);
  transform: translate(0, -100%);
  -webkit-transition: all 0.5s 0.1s;
  -moz-transition: all 0.5s 0.1s;
  -ms-transition: all 0.5s 0.1s;
  transition: all 0.5s 0.1s;
  position: relative;
}
.drop li {
  display: block;
  padding: 0;
  width: 100%;
  background: #3E8760 !important;
}

#marker ist ein Unterstreichungselement. Es verwendet auch eine absolute Positionierung. Und stellen Sie für alle Animationen einen Animationsübergangseffekt von 0,35 Sekunden ein.

#marker {
  height: 6px;
  background: #3E8760 !important;
  position: absolute;
  bottom: 0;
  width: 120px;
  z-index: 2;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -ms-transition: all 0.35s;
  transition: all 0.35s;
}

Wenn die Maus über den Menüpunkt #main li element gleitet, verwenden Sie nth-child, um zu bestimmen, über welchen Menüpunkt die Maus aktuell gleitet. Setzen Sie dann die Y-Achsenposition des Untermenüs im Menüelement auf 0 zurück, zeigen Sie das Dropdown-Menü an und legen Sie den Bewegungswert in X-Richtung der Übersetzungsfunktion fest, um die Unterstreichung entsprechend den verschiedenen Menüelementen zu verschieben.

#main li:nth-child(1):hover ul p {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}
#main li:nth-child(1):hover ~ #marker {
  -webkit-transform: translate(0px, 0);
  -moz-transform: translate(0px, 0);
  -ms-transform: translate(0px, 0);
  transform: translate(0px, 0);
}
 
#main li:nth-child(2):hover ul p {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}
#main li:nth-child(2):hover ~ #marker {
  -webkit-transform: translate(120px, 0);
  -moz-transform: translate(120px, 0);
  -ms-transform: translate(120px, 0);
  transform: translate(120px, 0);
}
 
#main li:nth-child(3):hover ul p {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}
#main li:nth-child(3):hover ~ #marker {
  -webkit-transform: translate(240px, 0);
  -moz-transform: translate(240px, 0);
  -ms-transform: translate(240px, 0);
  transform: translate(240px, 0);
}
 
#main li:nth-child(4):hover ul p {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}
#main li:nth-child(4):hover ~ #marker {
  -webkit-transform: translate(360px, 0);
  -moz-transform: translate(360px, 0);
  -ms-transform: translate(360px, 0);
  transform: translate(360px, 0);
}

Das Obige ist der Inhalt des einfachen CSS3-Dropdown-Menüeffekts mit Unterstreichungseffekt. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn). )!

Verwandte Artikel:

Einführung in die einfache Methode zum Erstellen eines CSS-Dropdown-Menüs

CSS-Drop -Down-Menü

Detaillierte Erläuterung des CSS-Dropdown-Menüs