Kesan penukaran menu berdasarkan jQuery_jquery

Ini ialah kesan paparan menu yang sangat lancar. Ia digunakan pada Amazon Apabila anda menggerakkan tetikus ke atas dan ke bawah, menu kedua akan bertukar dengan sangat pantas tanpa sebarang kelewatan, memberikan pengguna perasaan seperti sutera. Kesan ini dicapai dengan bantuan menu-tujuan plug-in jQuery Artikel ini akan menggunakan contoh untuk menerangkan cara mencapai kesan menu ultra-pantas.

HTML
Pertama, buat menu utama Kami meminjam kategori produk biasa daripada tapak web e-dagang. Kod struktur html adalah seperti berikut, di mana kami menggunakan tetapan atribut data-submenu-id html5, yang sangat berguna apabila memanggil pemalam.

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

Submenu sepadan dengan menu utama Nilai atribut id setiap submenu mesti sepadan dengan nilai atribut data-submenu-id bagi menu utama , dan audio Formatnya adalah seperti berikut:

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

CSS
Kami membetulkan kedudukan menu lungsur turun utama, dan popover submenu disembunyikan secara lalai Melalui teknologi CSS3, kesan bulat bayangan menu boleh ditetapkan dan css kandungan submenu boleh digunakan secara bebas mengikut keperluan.

.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
Di bawah ini kami dengan sungguh-sungguh melancarkan jquery.menu-aim.js Pemalam ini adalah pemalam menu berdasarkan jQuery Pengarang pemalam memberi perhatian kepada pengalaman pengguna dan mahir dalam algoritma Kesan penukaran menu dicapai dengan jelas dan indah ini " Adakah kesan tindak balas "sangat pantas" membuatkan kita berasa "sangat sejuk"? Alamat pemalam:
Gunakan $(element).menuAim() untuk memanggil jquery.menu-aim.js, panggil fungsi tersuai activateSubmenu() apabila tetikus mencetuskan menu utama dan panggil fungsi tersuai nyahaktifkanSubmenu() apabila meninggalkan menu utama.

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

Panggilan di atas boleh melengkapkan penukaran pantas antara submenu jquery.menu-aim.js juga menyediakan beberapa kaedah lain, enter() dan exit(), yang mengawal pergerakan tetikus masuk dan keluar, fungsi panggilan, dsb. .
Seterusnya, kami menulis fungsi tersuai

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

Bagaimana pula, anda juga boleh mencipta kesan menu ala amazon.cn Di atas adalah keseluruhan kandungan artikel ini.