Menüwechseleffekt basierend auf jQuery

Menüwechseleffekt basierend auf jQuery_jquery

WBOY

Freigeben： 2016-05-16 15:36:21

Original

1128 Leute haben es durchsucht

Dies ist ein sehr sanfter Menüanzeigeeffekt. Er wird bei Amazon angewendet. Wenn Sie die Maus nach oben und unten bewegen, wechselt das sekundäre Menü sehr schnell und ohne Verzögerung, was dem Benutzer ein seidiges Gefühl vermittelt. Dieser Effekt wird mit Hilfe eines jQuery-Plug-ins „menu-aim“ erreicht. In diesem Artikel wird anhand von Beispielen erläutert, wie man ultraschnelle Menüeffekte erzielt.

HTML
Erstellen Sie zunächst das Hauptmenü. Wir leihen uns gängige Produktkategorien von E-Commerce-Websites aus. Der HTML-Strukturcode lautet wie folgt: Wir verwenden die Attributeinstellung data-submenu-id von HTML5, was beim Aufrufen des Plug-Ins sehr nützlich ist.

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

Nach dem Login kopieren

Das Untermenü entspricht dem Hauptmenü. Der Attributwert „id“ jedes Untermenüs muss dem Attributwert „data-submenu-id“ des Hauptmenüs entsprechen. Der Inhalt des Untermenüs kann ein beliebiger HTML-Tag-Code sein, einschließlich p, img , und Audio. Das Format ist wie folgt:

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

Nach dem Login kopieren

CSS
Wir haben die Position des Hauptmenü-Dropdown-Menüs korrigiert und das Untermenü-Popover ist standardmäßig ausgeblendet. Durch die CSS3-Technologie kann der Menüschatten-Rundungseffekt eingestellt werden und das CSS des Untermenüinhalts kann nach Bedarf frei verwendet werden.

.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); 
}

Nach dem Login kopieren

jQuery
Im Folgenden starten wir feierlich jquery.menu-aim.js. Dieses Plug-in ist ein auf jQuery basierendes Plug-in, das auf die Benutzererfahrung achtet und sich mit Algorithmen auskennt Der Menüwechseleffekt wird anschaulich und exquisit erreicht. „Fühlen wir uns durch den „superschnellen“ Reaktionseffekt „super cool“? Plug-in-Adresse:
Verwenden Sie $(element).menuAim(), um jquery.menu-aim.js aufzurufen, rufen Sie die benutzerdefinierte Funktion „activateSubmenu()“ auf, wenn die Maus das Hauptmenü auslöst, und rufen Sie die benutzerdefinierte Funktion „deactivateSubmenu()“ auf, wenn Sie das Hauptmenü verlassen.

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

Nach dem Login kopieren

Der obige Aufruf kann den schnellen Wechsel zwischen Untermenüs vervollständigen. jquery.menu-aim.js bietet auch mehrere andere Methoden, enter() und exit(), die die Bewegung der Maus hinein und heraus steuern, Funktionen aufrufen usw .
Als nächstes schreiben wir eine benutzerdefinierte Funktion

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");恢复主菜单样式 
}

Nach dem Login kopieren

Wie wäre es, wenn Sie auch einen Menüeffekt im Amazon.cn-Stil erstellen könnten? Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dieser Artikel wird für alle hilfreich sein, die JQuery lernen.