Menu switching effect based on jQuery_jquery-JS Tutorial-php.cn

Menu switching effect based on jQuery_jquery

WBOY

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

Original

1128 people have browsed it

This is a very smooth menu display effect. It is applied on Amazon. When you move the mouse up and down, the secondary menu will switch very briskly without any delay, giving the user a silky feeling. This effect is achieved with the help of a jQuery plug-in menu-aim. This article will use examples to explain how to achieve ultra-fast menu effects.

HTML
First, create the main menu. We borrow common product categories from e-commerce websites. The html structure code is as follows, in which we use the data-submenu-id attribute setting of html5, which is very useful when calling the 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>

Copy after login

The submenu corresponds to the main menu. The id attribute value of each submenu must correspond to the data-submenu-id attribute value of the main menu. The content of the submenu can be any html tag code, including p, img, and audio. The format is as follows:

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

Copy after login

CSS
We fixed the position of the main menu dropdown-menu, and the submenu popover is hidden by default. Through CSS3 technology, the menu shadow rounded effect can be set, and the css of the submenu content can be freely used as needed.

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

Copy after login

jQuery
Below we solemnly launch jquery.menu-aim.js. This plug-in is a menu plug-in based on jQuery. The plug-in author pays attention to the user experience and is proficient in algorithms. According to the mouse trajectory, the menu switching effect is vividly and exquisitely achieved. This plug-in " Does the "super fast" response effect make us feel "super cool"? Plug-in address:
Use $(element).menuAim() to call jquery.menu-aim.js, call the custom function activateSubmenu() when the mouse triggers the main menu, and call the custom function deactivateSubmenu() when leaving the main menu.

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

Copy after login

The above call can complete the quick switching between submenus. jquery.menu-aim.js also provides several other methods, enter() and exit(), which control the movement of the mouse in and out, calling functions, etc.
Next, we write a custom function

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

Copy after login

How about, you can also create an amazon.cn-style menu effect. The above is the entire content of this article. I hope this article will be helpful to everyone learning jquery.