Effet de changement de menu basé sur jQuery

Effet de changement de menu basé sur jQuery_jquery

WBOY

Libérer： 2016-05-16 15:36:21

original

1126 Les gens l'ont consulté

Il s'agit d'un effet d'affichage de menu très fluide. Il est appliqué sur Amazon. Lorsque vous déplacez la souris de haut en bas, le menu secondaire change très rapidement sans aucun délai, donnant à l'utilisateur une sensation soyeuse. Cet effet est obtenu à l'aide d'un objectif de menu du plug-in jQuery. Cet article utilisera des exemples pour expliquer comment obtenir des effets de menu ultra-rapides.

HTML
Tout d’abord, créez le menu principal. Nous empruntons des catégories de produits courantes aux sites de commerce électronique. Le code de structure HTML est le suivant, dans lequel nous utilisons le paramètre d'attribut data-submenu-id de html5, ce qui est très utile lors de l'appel du plug-in.

<div class="active"> 
  <ul class="dropdown-menu" role="menu"> 
    <li data-submenu-id="submenu-patas"><a href="#">服装服饰</a></li> 
    <li data-submenu-id="submenu-snub-nosed"><a href="#"> 箱包配饰</a></li> 
    <li data-submenu-id="submenu-duoc-langur"><a href="#">数码家电</a></li> 
    <li data-submenu-id="submenu-pygmy"><a href="#">美容护发</a></li> 
    <li data-submenu-id="submenu-tamarin"><a href="#">母婴用品</a></li> 
    <li data-submenu-id="submenu-monk"><a href="#">家居建材</a></li> 
    <li data-submenu-id="submenu-gabon"><a href="#">食品百货</a></li> 
    <li data-submenu-id="submenu-grivet"><a href="#">户外汽车</a></li> 
    <li data-submenu-id="submenu-red-leaf"><a href="#">文化玩乐</a></li> 
    <li data-submenu-id="submenu-king-colobus"><a href="#">生活服务</a></li> 
  </ul> 
</div>

Copier après la connexion

Le sous-menu correspond au menu principal. La valeur de l'attribut id de chaque sous-menu doit correspondre à la valeur de l'attribut data-submenu-id du menu principal. Le contenu du sous-menu peut être n'importe quel code de balise html, y compris p, img. , et audio. Le format est le suivant :

<div id="submenu-patas" class="popover"> 
任意html代码 
</div>

Copier après la connexion

CSS
Nous avons corrigé la position du menu déroulant du menu principal et le popover du sous-menu est masqué par défaut. Grâce à la technologie CSS3, l'effet arrondi de l'ombre du menu peut être défini et le CSS du contenu du sous-menu peut être utilisé librement selon les besoins.

.active{position:relative} 
.dropdown-menu { position: absolute; 
 z-index: 1000;float: left; 
 min-width: 120px;padding: 5px 0;margin: 2px 0 0;list-style: none; 
 background-color: #ffffff;border: 1px solid #ccc; 
 -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px; 
 -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 5px 10px 
rgba(0, 0, 0, 0.2);box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
} 
.dropdown-menu li{height:24px; line-height:24px; text-align:center} 
.dropdown-menu li a{display:block} 
.dropdown-menu li a:hover{color:#fff; text-decoration:none; background:#39f} 
.popover { 
 position: absolute;top: 0;left: 0; z-index: 1010;display: none; 
 width: 320px;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px; 
 -webkit-border-top-left-radius: 0px;-webkit-border-bottom-left-radius: 0px; 
 border-top-left-radius: 0px;border-bottom-left-radius: 0px;overflow: hidden;    
 padding: 1px 1px 1px 15px;text-align: left;white-space: normal; 
 background-color: #fff;border: 1px solid #ccc; 
 border: 1px solid rgba(0, 0, 0, 0.2); 
 webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 5px 10px 
rgba(0, 0, 0, 0.2);box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
}

Copier après la connexion

jQuery
Ci-dessous, nous lançons solennellement jquery.menu-aim.js. Ce plug-in est un plug-in de menu basé sur jQuery. L'auteur du plug-in est attentif à l'expérience utilisateur et maîtrise les algorithmes selon la trajectoire de la souris. L'effet de changement de menu est obtenu de manière vivante et exquise. Ce plug-in " L'effet de réponse « super rapide » nous fait-il sentir « super cool » ? Adresse du plug-in :
Utilisez $(element).menuAim() pour appeler jquery.menu-aim.js, appelez la fonction personnalisée activateSubmenu() lorsque la souris déclenche le menu principal et appelez la fonction personnalisée deactivateSubmenu() lorsque vous quittez le menu principal.

$(function(){ 
   $(".dropdown-menu").menuAim({ 
      activate: activateSubmenu,//触发主菜单，显示子菜单 
      deactivate: deactivateSubmenu //离开主菜单，隐藏子菜单 
   }); 
});

Copier après la connexion

L'appel ci-dessus peut compléter la commutation rapide entre les sous-menus. jquery.menu-aim.js fournit également plusieurs autres méthodes, enter() et exit(), qui contrôlent le mouvement d'entrée et de sortie de la souris, l'appel de fonctions, etc. .
Ensuite, nous écrivons une fonction personnalisée

var $menu = $(".dropdown-menu"); 
 
function activateSubmenu(row) { 
  var $row = $(row), 
  submenuId = $row.data("submenuId"), 
  $submenu = $("#" + submenuId), 
  offset = $menu.offset(), 
  height = $menu.outerHeight(), 
  width = $menu.outerWidth(); 
 
  $submenu.css({ //设置子菜单样式 
     display: "block", //显示子菜单 
     top: offset.top, 
     left: offset.left + width - 5, 
     height: height - 4  
  }); 
  //设置主菜单样式（鼠标滑向主菜单时） 
  $row.find("a").addClass("maintainHover"); 
} 
 
function deactivateSubmenu(row) { 
  var $row = $(row), 
  submenuId = $row.data("submenuId"), 
  $submenu = $("#" + submenuId); 
 
  $submenu.css("display", "none"); //隐藏子菜单 
  $row.find("a").removeClass("maintainHover");恢复主菜单样式 
}

Copier après la connexion

Que diriez-vous, vous pouvez également créer un effet de menu de style amazon.cn. Ce qui précède représente l'intégralité du contenu de cet article. J'espère que cet article sera utile à tous ceux qui apprennent jquery.