jQuery_jqueryに基づくメニュー切り替え効果

これは、Amazon で適用される非常に滑らかなメニュー表示効果です。マウスを上下に動かすと、二次メニューが遅延なく切り替わり、ユーザーに滑らかな感触を与えます。この効果は、jQuery プラグインの menu-aim を使用して実現されます。この記事では、超高速のメニュー効果を実現する方法を例を使用して説明します。

HTML
まずはメインメニューをECサイトから拝借して作成します。 HTML 構造コードは次のとおりです。ここでは、プラグインを呼び出すときに非常に便利な html5 の data-submenu-id 属性設定を使用します。

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

サブメニューはメイン メニューに対応します。各サブメニューの id 属性値は、メイン メニューの data-submenu-id 属性値に対応する必要があります。サブメニューの内容は、p、img を含む任意の HTML タグ コードにすることができます。 、音声の形式は次のとおりです:

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

CSS
メイン メニューのドロップダウン メニューの位置を固定し、サブメニューのポップオーバーはデフォルトで非表示になっています。CSS3 テクノロジーにより、メニューの影の丸みを設定でき、必要に応じてサブメニュー コンテンツの CSS を自由に使用できます。

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

jQuery
以下では、jquery.menu-aim.js を厳粛に起動します。このプラグインは、ユーザー エクスペリエンスに注意を払い、アルゴリズムに精通しています。このプラグインは、メニュー切り替えエフェクトを鮮やかかつ絶妙に実現しています。 「超高速」レスポンスエフェクトは「超クール」を感じさせますか？プラグインのアドレス:
$(element).menuAim() を使用して jquery.menu-aim.js を呼び出し、マウスがメイン メニューをトリガーするときにカスタム関数 activateSubmenu() を呼び出し、メイン メニューを終了するときにカスタム関数 deactivateSubmenu() を呼び出します。

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

上記の呼び出しにより、サブメニュー間の素早い切り替えを完了できます。jquery.menu-aim.js には、マウスの出入りや関数の呼び出しなどを制御する他のメソッドもいくつか用意されています。 。
次に、カスタム関数を作成します

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

どうでしょうか、amazon.cn スタイルのメニューエフェクトを作成することもできます。 以上がこの記事の全内容です。この記事が jquery を学ぶすべての人に役立つことを願っています。