_jquery of menu switching effect based on jquery

This is a very smooth menu display effect, applied to Amazon, when you move the mouse up and down, the level two menu will be very light switch, without any delay, to the user such as silky feeling. This effect with the help of a jquery plug-in Menu-aim, this article will be combined with examples to explain how to achieve a fast-speed menu effect.

Html
First of all, we set up the main menu, we borrow the common product classification of the electric website. The HTML structure code is as follows, where we use the HTML5 Data-submenu-id property setting, which is useful when the plug-in is invoked.

<div class= "Active" > <ul class= "dropdown-menu" role= "menu" > <li data-submenu-id= "Submenu-patas" <a href= "#" > Apparel </a></li> <li data-submenu-id= "submenu-snub-nosed" ><a href= "#" > Luggage Accessories 
    </a></li> <li data-submenu-id= "Submenu-duoc-langur" ><a href= "#" > Digital Appliance </a></li> <li data-submenu-id= "Submenu-pygmy" ><a href= "#" > Beauty hair </a></li> <li data-submenu-id= "SUBM Enu-tamarin "><a href=" # "> Maternity Products </a></li> <li data-submenu-id=" Submenu-monk "><a href=" # "> Home building Materials </a></li> <li data-submenu-id=" Submenu-gabon "><a href=" # "> Food Department </a></li > <li data-submenu-id= "Submenu-grivet" ><a href= "#" > Outdoor car </a></li> <li data-submenu- Id= "Submenu-red-leaf" ><a href= "#" > Cultural play </a></li> <li data-submenu-id= "Submenu-king-colobus "><a href=" # "> Life service &LT;/A&GT;&LT;/li> </ul> </div> 
 

The submenu corresponds to the main menu, the id attribute value of each submenu must correspond to the Data-submenu-id property value of the main menu, the submenu content can be any HTML tag code, P,img,audio can be, the format is as follows:

<div id= "Submenu-patas" class= "PopOver" > 
arbitrary HTML code 

Css
We will be the main menu dropdown-menu position fixed, submenu popover default hidden, through the CSS3 technology can set menu shadow fillet effect, submenu content of CSS can be free to play according to need.

. 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 R 
GBA (0, 0, 0, 0.2); }. Dropdown-menu li{height:24px line-height:24px text-align:center} dropdown-menu li A{display:block}. dropdown-men U 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 RG 
BA (0, 0, 0, 0.2);  }

Jquery
Below we grandly launches Jquery.menu-aim.js, this plug-in is a jquery based menu plug-in, the plugin author pays attention to the user experience and is proficient in the algorithm, according to the mouse trajectory, will realize the menu switching effect dripping exquisite, this plug-in "super fast" the reaction effect is not let us have in "super cool" The feeling? Plugin Address:
Use $ (Element). Menuaim () to invoke Jquery.menu-aim.js, call the Custom function Activatesubmenu () when the mouse triggers the main menu, and invoke the Custom function Deactivatesubmenu () when leaving the main menu.

$ (function () { 
   $ (". Dropdown-menu"). Menuaim ({ 
      activate:activatesubmenu,//triggers the main menu, displaying submenu 
      deactivate: Deactivatesubmenu//Leave main menu, Hide submenu 
   }); 

such as on the call can complete the fast switch between submenus, Jquery.menu-aim.js also provides several other methods, enter () and exit (), are control the mouse to move out, call the function and so on.
Next, we write the custom function

var $menu = $ (". Dropdown-menu"); 
 
function Activatesubmenu (row) { 
  var $row = $ (row), 
  submenuid = $row. Data ("Submenuid"), 
  $submenu = $ ("#" + Sub MENUID), 
  offset = $menu. Offset (), 
  height = $menu. Outerheight (), 
  width = $menu. Outerwidth (); 
 
  $submenu. CSS ({//Set submenu style 
     display: block,//Display submenu 
     top:offset.top, 
     left:offset.left + width-5, 
     Height:height-4  
  }); 
  Sets the main menu style (when the mouse slides to the main menu) 
  $row. Find ("a"). AddClass ("Maintainhover"); 
 
function Deactivatesubmenu (row) { 
  var $row = $ (row), 
  submenuid = $row. Data ("Submenuid"), 
  $submenu = $ ("# "+ submenuid); 
 
  $submenu. CSS ("display", "none"); Hide submenu 
  $row. Find ("a"). Removeclass ("Maintainhover"); Restore main Menu style 

How, you can also do a amazon.cn-style menu effect, the above is the entire content of this article, I hope this article for everyone to learn jquery help.