Home > Developer > JavaScript
Jquery professional navigation menu special effects code sharing, jquery navigation menu
This article describes the Special drop-down menu effects of jquery. Share it with you for your reference. The details are as follows:
This is a professional drop-down menu Effect Based on jquery. The blue drop-down menu is very classic. Whether the website has an attractive navigation will affect the user's long stay, just as the article content edited by the editor affects the long-lasting access time of the members. You must learn how to create a navigation menu in your own website style.
Run: ------------------- view the download result source code -------------------
TIPS: If the browser cannot run properly, you can try to switch the browsing mode.
Key code:
stuHover = function() {var cssRule;var newSelector;for (var i = 0; i < document.styleSheets.length; i++)for (var x = 0; x < document.styleSheets[i].rules.length ; x++){cssRule = document.styleSheets[i].rules[x];if (cssRule.selectorText.indexOf("LI:hover") != -1){ newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);}}var getElm = document.getElementById("nav").getElementsByTagName("LI");for (var i=0; i<getElm.length; i++) {getElm[i].onmouseover=function() {this.className+=" iehover";}getElm[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" iehover\\b"), "");}}}if (window.attachEvent) window.attachEvent("onload", stuHover);
The special drop-down menu effects of jquery are as follows:
<Head> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <title> jquery professional drop-down menu effects </title> <meta name =" Author "content =" Stu Nicholls "/> <link rel =" stylesheet "type =" text/css "href =" pro_drop_1/pro_drop_1.css "/> <script src =" pro_drop_1/stuHover. js "type =" text/javascript "> </script>The above is the jquery professional navigation menu special effect code shared for you. I hope you will like it and apply it to practice.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
