jQuery implémente un menu de navigation simple effect

jQuery implémente un menu de navigation simple effect_jquery

WBOY

Libérer： 2016-05-16 15:30:42

original

1127 Les gens l'ont consulté

L'exemple de cet article décrit le code du menu d'étirement et de réduction implémenté en JavaScript. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
La capture d'écran de l'effet en cours d'exécution est la suivante :

Lorsque la souris survole, les éléments de menu se déplacent vers le haut en texte blanc sur fond bleu. Après avoir cliqué, une barre bleue apparaîtra en bas pour indiquer l'élément actuellement sélectionné.

Code de page, chaque élément du menu est un div, y compris un ul pour placer le texte affiché, etc., et l'autre div est la barre bleue en bas. Différentes classes doivent être définies pour la première et la dernière. items , le style doit utiliser :

<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>

Copier après la connexion

Style, principalement le réglage des bordures gauche et droite de chaque élément de menu et le réglage de la position de ul et 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;
}

Copier après la connexion

L'étape suivante consiste à écrire le code js pour les événements de survol et de clic pour le menu. Lors du survol, déplacez le ul jusqu'à la hauteur du li, puis restaurez-le une fois la souris éloignée. ajoutez simplement des styles à la div de la barre bleue :

$(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');
 });
})

Copier après la connexion

Ce qui précède est le code clé permettant à jQuery d'obtenir un effet de menu de navigation simple. J'espère que cela sera utile à l'apprentissage de chacun.