This article mainly introduces the menu switching effect based on jQuery. if you need it, you can refer to it as a very smooth menu display, 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, giving users a smooth 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.
- Apparel
- Luggage accessories
- Digital Appliances
- Beauty & hair protection
- Maternal and Child supplies
- Home building materials
- Food Department Store
- Outdoor cars
- Culture and play
- Life service
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:
Arbitrary html code
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.