jQuery implementiert ein einfaches Navigationsmenü effect

jQuery implementiert ein einfaches Navigationsmenü effect_jquery

WBOY

Freigeben： 2016-05-16 15:30:42

Original

1127 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt den in JavaScript implementierten Menücode zum Dehnen und Verkleinern. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Der Screenshot des Laufeffekts sieht wie folgt aus:

Wenn Sie mit der Maus darüber fahren, werden die Menüelemente nach oben in weißen Text auf blauem Hintergrund verschoben. Nach dem Klicken erscheint unten ein blauer Balken, der das aktuell ausgewählte Element anzeigt.

Seitencode, jedes Element des Menüs ist ein Div, einschließlich einer UL zum Platzieren des Anzeigetextes usw., und das andere Div ist die blaue Leiste unten. Für die erste und letzte müssen unterschiedliche Klassen festgelegt werden Elemente, der Stil muss verwendet werden:

<div id="nav">
　　<div class="navItem indexNavItem">
　　　　<ul class="navUl">
　　　　　　<li>首页</li>
　　　　　　<li class="hoverLi">首页</li>
　　　　</ul>
　　　　<div class="highlighter selectedNav"></div>
　　</div>
　　<div class="navItem">
　　　　<ul class="navUl">
　　　　　　<li>A</li>
　　　　　　<li class="hoverLi">A</li>
  </ul>
　　　　<div class="highlighter"></div>
　　</div>
　　<div class="navItem lastNavItem">
　　　　<ul class="navUl">
　　　　　　<li>A</li>
　　　　　　<li class="hoverLi">A</li>
　　　　</ul>
　　　　<div class="highlighter"></div>
　　</div>
　　<div id="logoutNavItem" class="navItem logoutNavItem lastNavItem">
　　　　<ul class="navUl">
　　　　　　<li>退出</li>
　　　　　　<li class="hoverLi">退出</li>
　　　　</ul>
　　　　<div class="highlighter"></div> 
　　</div>
</div>

Nach dem Login kopieren

Stil, hauptsächlich die Einstellung der linken und rechten Ränder jedes Menüelements und die Positionseinstellung von ul und li:

*
{
 padding: 0;
 margin: 0;
}
body
{
 background-color: #fffff3;
 font: 12px/1.6em Helvetica, Arial, sans-serif;
}
ul,li{
 list-style: none;
}
#nav
{
 text-align: center;
 height: 50px;
 font-size: 10px;
 line-height: 30px;
 background-color: #F0E6DB;
 margin-bottom: 10px;
}
.navItem
{
 cursor: pointer;
 position: relative;
 float: left;
 width: 100px;
 height: 50px;
 font-size: 15px;
 border-right: 2px solid rgb(255,255,255);
 border-left: 2px solid rgb(255,255,255);
 overflow: hidden;
 font-weight:bold;
}
.indexNavItem
{
 border-left: 4px solid rgb(255,255,255);
 margin-left: 10px;
}
.lastNavItem
{
 border-right: 4px solid rgb(255,255,255);
}
.logoutNavItem
{
 float: right;
 width: 120px;
 margin-right: 10px;
 border-left: 4px solid rgb(255,255,255);
}
.navUl
{
 position: relative;
 height: 100px;
 width: 100%;
 border-bottom: 5px solid rgb(2,159,212);
}
.navUl li
{
 height: 50px;
 line-height: 50px;
}
.highlighter
{
 position: absolute;
 bottom: 0;
 height: 5px;
 width: 100%;
}
.selectedNav
{
 background-color: #029FD4;
}
.hoverLi
{
 background-color: #029FD4;
 color: #ffffff;
}

Nach dem Login kopieren

Der nächste Schritt besteht darin, den JS-Code für die Hover- und Click-Ereignisse für das Menü zu schreiben. Bewegen Sie den UL beim Schweben auf die Höhe des Li und stellen Sie ihn dann wieder her, nachdem Sie die Maus wegbewegt haben. Fügen Sie einfach Stile zum blauen Balken-Div hinzu:

$(function() {
 $(".navItem").hover(function() {
  $(this).children("ul").animate({
   top: "-50px"
  }, 100);
 }, function() {
  $(this).children("ul").animate({
   top: "0px"
  }, 100);
 });
 
 $(".navItem").click(function(event) {
  $(this).siblings().children('.highlighter').removeClass('selectedNav');
  $(this).children('.highlighter').addClass('selectedNav');
 });
})

Nach dem Login kopieren

Das Obige ist der Schlüsselcode für jQuery, um einen einfachen Navigationsmenüeffekt zu erzielen. Ich hoffe, dass er für das Lernen aller hilfreich ist.