Implement menu Switching Based on jQuery

Implement menu Switching Based on jQuery

This is a very smooth menu display effect, which is applied on Amazon. When you move the mouse up or down, the level-2 menu will be very light to switch, without any delay, it gives users a silky feeling. With the help of a jQuery plug-in menu-aim, this article will explain how to achieve ultra-fast menu effects with examples.

HTML
First, create the main menu. We use the product categories common to e-commerce websites. The html Structure Code is as follows. We use the data-submenu-id attribute setting of html5, which is very useful for plug-in calling.

<Div class = "active"> <ul class = "dropdown-menu" role = "menu"> <li data-submenu-id = "submenu-patas"> <a href = "#"> Apparel & apparel </a> </li> <li data-submenu-id = "submenu-snub-nosed"> <a href = "#"> bags accessories </a> </li> <li data-submenu-id = "submenu-duoc-langur"> <a href = "#"> Digital Appliances </a> </li> <li data-submenu-id = "submenu-pygmy"> <a href = "#"> hair care </a> </li> <li data-submenu -id = "submenu-tamarin"> <a href = "#"> maternal and child supplies </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 store </a> </li> <li data-submenu-id = "submenu-grivet"> <a href = "#"> outdoor vehicle </a> </li> <li data-submenu-id = "submenu-red-leaf"> <a href = "#"> Culture and play </a> </li> <li data -submenu-id = "submenu-king-colobus"> <a href = "#"> life service </a> </li> </ul> </div>

The sub-menu corresponds to the main menu. The id attribute value of each sub-menu must correspond to the data-submenu-id attribute value of the main menu. The sub-menu content can be any html Tag code, p, img, all audio functions are supported. The format is as follows:

<Div id = "submenu-patas" class = "popover"> arbitrary html code </div>

CSS
We fixed the position of the dropdown-menu in the main menu, and hidden the sub-menu popover by default. With css3 technology, we can set the menu shadow rounded corner effect. css of the sub-menu 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); } 

JQuery
Next we will introduce jquery. menu-aim.js, the plug-in is a jQuery-based menu plug-in, the plug-in author pays attention to the user experience and excellent algorithm, according to the mouse track, the menu switching effect is refined, does this plug-in's "super-fast" response effect make us feel "super? Plug-in address:
Call jquery. menu-aim.js with $ (element). menuAim (), call the custom function activateSubmenu () when the mouse triggers the main menu, and call the deactivateSubmenu () when leaving the main menu ().

$ (Function () {$ (". dropdown-menu "). menuAim ({activate: activateSubmenu, // trigger the main menu. deactivate: deactivateSubmenu // exit the main menu and hide the sub menu });});

The above call can complete the fast switch of the sub-dish single room, jquery. menu-aim.js also provides several other methods, enter () and exit (), are control mouse move out, call the function and so on.
Next, we will write the UDF

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 (); Define submenu.css ({// set the sub-menu style display: "block", // display the sub-menu top: offset. top, left: offset. left + width-5, height: height-4}); // sets the main menu style (when sliding to the main menu) $ row. find (""). addClass ("maintainHover");} function deactivateSubmenu (row) {var $ row = $ (row), submenuId = $ row. data ("submenuId"), $ submenu = $ ("#" + submenuId); then submenu.css ("display", "none"); // hide the sub menu $ row. find (""). removeClass ("maintainHover"); restore the main menu style}

You can also create an amazon.cn-style menu. The above is all the content of this article. I hope this article will help you learn jquery.