jquery Menu Toggle Effect Code

Last Update:2017-01-13 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Let's look at the effect code first.

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.

The code is as follows

Copy Code

<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= "Submenu-tamarin" ><a href= "#" > Maternal and Infant 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 </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 </a></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:

The code is as follows

Copy Code

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

Css

We will be the main menu dropdown-menu position fixed, submenu popover default hidden, through the CSS3 technology can set the menu shadow fillet effect, the submenu content of the CSS can be free to play in accordance with the need, this article has not been posted in detail, specific to view the demo.

The code is as follows

Copy Code

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

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: Https://github.com/kamens/jQuery-menu-aim

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.

The code is as follows	Copy Code
$ (function () { $ (". Dropdown-menu"). Menuaim ({ activate:activatesubmenu,//triggers the main menu, displaying submenus 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

The code is as follows

Copy Code

OK, so save and preview the effect, how, you can also do a amazon.cn-style menu effect.

Full Effect Address

The code is as follows

Copy Code

<! DOCTYPE html>
<meta charset= "Utf-8" >

<title> Fast Menu Switching effect </title>

<link rel= "stylesheet" type= text/css "href=". /css/main.css "/>

<style type= "Text/css" >

. demo{margin:50px Auto 0 Auto width:730px}

. 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 RG BA (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,.maintainhover{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 RGB A (0, 0, 0, 0.2);

}

. popover h3{height:28px; line-height:28px;}

. PopOver UL{MARGIN:6PX}

. popover ul li{height:24px; line-height:24px}

. popover ul li a{margin:6px color: #444}

. popover ul Li A.subm{color: #f90; Font-weight:bold}

. pop_cont{margin:6px}

</style>

</head>

<body>

</div>

<div id= "Submenu-patas" class= "PopOver" >

<h3> Apparel </h3>

<ul>

<li><a href= "#" class= "SUBM" > Ladies </a> <a href= "#" > Dress </a> <a href= "#" > Short-sleeved t-shirt </a > <a href= "#" > Vest skirt </a> <a href= "#" > Cardigan </a></li>

<li><a href= "#" class= "SUBM" > Men </a> <a href= "#" >t t-shirt </a> <a href= "#" >polo</a > <a href= "#" > Shirts </a> <a href= "#" > Vest </a> <a href= "#" > Jeans </a></li>

<li><a href= "#" class= "SUBM" > Underwear </a> <a href= "#" > Bra </a> <a href= "#" > Plastic body </a> & Lt;a href= "#" > Pajamas </a> <a href= "#" > Underwear </a></li>

<li><a href= "#" class= "SUBM" > Women's Shoes </a> <a href= "#" > New </a> <a href= "#" > Rome </a> & Lt;a href= "#" > Sandals </a> <a href= "#" > Slippers </a></li>

</ul>

</div>

<div id= "submenu-snub-nosed" class= "PopOver" >

<h3> Luggage Accessories </h3>

<ul>

<li><a href= "#" class= "SUBM" > Bags </a> <a href= "#" > Handbag </a> <a href= "#" > Single shoulder </a> & Lt;a href= "#" > Men's Bag </a> <a href= "#" > Travel </a> <a href= "#" > Shoulders </a></li>

<li><a href= "#" class= "SUBM" > Accessories </a> <a href= "#" > Scarf Shawl </a> <a href= "#" > Visor </a > <a href= "#" > Straw hat </a> <a href= "#" > Belt </a></li>

<li><a href= "#" class= "SUBM" > Jewelry </a> <a href= "#" > Necklace </a> <a href= "#" > Earring </a> & Lt;a href= "#" > Hair </a> <a href= "#" > Bracelet </a> <a href= "#" > Bracelet </a></li>

<li><a href= "#" class= "SUBM" > Glasses </a> <a href= "#" > Sunglasses </a> <a href= "#" > Glasses frame </a > <a href= "#" > Quit smoking </a> <a href= "#" >Zippo</a></li>

</ul>

</div>

<div id= "Submenu-duoc-langur" class= "PopOver" >

<h3> Digital Appliances </h3>

<div class= "Pop_cont" ><a href= "#" ><img src= "images/ipad.jpg" "alt=" "></a></div>

</div>

<div id= "Submenu-pygmy" class= "PopOver" >

<h3> Cosmetic Hair </h3>

<div class= "Pop_cont" ><a href= "#" ><img src= "images/xshui.jpg" "alt=" "></a></div>

</div>

<div id= "Submenu-tamarin" class= "PopOver" >

<h3> Maternal and Infant supplies </h3>

<div class= "Pop_cont" ><a href= "#" ><img src= "images/muying.jpg" "alt=" "></a></div>

</div>

<div id= "Submenu-monk" class= "PopOver" >

<h3> Home Building Materials </h3>

<div class= "Pop_cont" ><a href= "#" ><img src= "images/taideng.jpg" "alt=" "></a></div>

</div>

<div id= "Submenu-gabon" class= "PopOver" >

<h3> Food Department </h3>

<div class= "Pop_cont" ><a href= "#" ><img src= "images/shipin.jpg" "alt=" "></a></div>

</div>

<div id= "Submenu-grivet" class= "PopOver" >

<h3> Outdoor Car </h3>

<div class= "Pop_cont" ><a href= "#" ><img src= "images/qiche.jpg" "alt=" "></a></div>

</div>

<div id= "Submenu-red-leaf" class= "PopOver" >

<h3> Cultural Fun </h3>

<div class= "Pop_cont" ><a href= "#" ><img src= "images/hua.jpg" "alt=" "></a></div>

</div>

<div id= "Submenu-king-colobus" class= "PopOver" >

<h3> Life Services </h3>

<ul>

<li><a href= "#" class= "SUBM" > Shop service </a> <a href= "#" > Capture </a> <a href= "#" > Carton </a > <a href= "#" > Custom design </a></li>

<li><a href= "#" class= "SUBM" > Skittles </a> <a href= "#" > Beijing </a> <a href= "#" > Guangdong </a > <a href= "#" > Shanghai </a> <a href= "#" > Hong Kong </a></li>

<li><a href= "#" class= "SUBM" > Discount voucher </a> <a href= "#" > Bread cake </a> <a href= "#" > Dining </a > <a href= "#" > Performance Events </a> </li>

<li><a href= "#" class= "SUBM" > Real estate </a> <a href= "#" > Rental </a> <a href= "#" > Landlord listings </a > <a href= "#" > Second-hand housing </a></li>

</ul>

</div>

</div>

</div>

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,//main should overlay submenu
Height:height-4//padding for main dropdown ' s arrow
});

$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");
}

$ (document). Click (function () {
$ (". PopOver"). CSS ("display", "none");
});
</script>

</body>

Effect Download Address: Http://file.111cn.net/download/2013/05/15/menuAim.rar

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jquery Menu Toggle Effect Code

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support