3 Level Menu jQuery
How do I make an 3 level menu jquery?
What is a 3 level menu jquery? How do you make a 3 level menu jquery? This script and codes were developed by Hemant Aggarwal on 09 January 2023, Monday.
3 Level Menu jQuery - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3 Level Menu jQuery</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="below_header_navigation"><ul><li id="menu-item-2119" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-2119"><a href="http://localhost/eclipse%20project/">Home</a>
<ul class="sub-menu"> <li id="menu-item-2120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2120"><a href="http://localhost/eclipse%20project/?page_id=243">About Hansel & Petal</a></li> <li id="menu-item-2121" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2121"><a href="http://localhost/eclipse%20project/?page_id=273">Fiver</a></li> <li id="menu-item-2122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2122"><a href="http://localhost/eclipse%20project/?page_id=2">Sample Page</a></li> <li id="menu-item-2123" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2123"><a href="http://localhost/eclipse%20project/?page_id=294">Search Results</a></li>
</ul>
</li>
<li id="menu-item-2124" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2124"><a href="http://localhost/eclipse%20project/?page_id=1243">Start Here!</a>
<ul class="sub-menu"> <li id="menu-item-2125" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2125"><a href="http://localhost/eclipse%20project/?page_id=197">Write Guest Post For Geeky Inspirations</a></li> <li id="menu-item-2126" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2126"><a href="http://localhost/eclipse%20project/?cat=53">Tips And Tricks</a> <ul class="sub-menu"> <li id="menu-item-2127" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2127"><a href="http://localhost/eclipse%20project/?cat=38">Facebook</a></li> <li id="menu-item-2128" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2128"><a href="http://localhost/eclipse%20project/?cat=56">Windows</a></li> <li id="menu-item-2129" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2129"><a href="http://localhost/eclipse%20project/?cat=45">How To</a></li> </ul>
</li>
</ul>
</li>
<li id="menu-item-2130" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2130"><a href="http://localhost/eclipse%20project/?cat=50">Security</a>
<ul class="sub-menu"> <li id="menu-item-2131" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2131"><a href="http://localhost/eclipse%20project/?cat=46">Information</a></li> <li id="menu-item-2132" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2132"><a href="http://localhost/eclipse%20project/?cat=40">Gmail</a></li> <li id="menu-item-2133" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2133"><a href="http://localhost/eclipse%20project/?cat=5">News</a></li> <li id="menu-item-2134" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2134"><a href="http://localhost/eclipse%20project/?cat=36">Customization</a></li>
</ul>
</li>
<li id="menu-item-2135" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2135"><a href="http://localhost/eclipse%20project/?cat=44">Hosting Coupons</a></li>
</ul></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
3 Level Menu jQuery - Script Codes CSS Codes
body { font-family: helvetica, arial, sans-serif; background: #e3e3e3; text-align: center;
}
/* MENU */
#below_header_navigation { background: #e5e5e5; float: left; margin: 0; padding: 0; border: 1px solid white; border-bottom: none;
}
#below_header_navigation li a, #below_header_navigation li { float: left;
}
#below_header_navigation li { list-style: none; position: relative;
}
#below_header_navigation li a { padding: 1em 2em; text-decoration: none; color: white; background: #292929; background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px); background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929)); border-right: 1px solid #3c3c3c; border-left: 1px solid #292929; border-bottom: 1px solid #232323; border-top: 1px solid #545454;
}
#below_header_navigation li a:hover { background: #2a0d65; background: -moz-linear-gradient(top, #11032e, #2a0d65); background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}
/* Submenu */
.hasChildren { position: absolute; width: 5px; height: 5px; background: black; right : 0; bottom: 0;
}
#below_header_navigation li ul { display: none; position: absolute; left: 0; top: 100%; padding: 0; margin: 0;
}
#below_header_navigation li:hover > ul { display: block;
}
#below_header_navigation li ul li, #below_header_navigation li ul li a { float: none;
}
#below_header_navigation li ul li { _display: inline; /* for IE6 */
}
#below_header_navigation li ul li a { width: 150px; display: block;
}
/* SUBSUB Menu */
#below_header_navigation li ul li ul { display: none;
}
#below_header_navigation li ul li:hover ul { left: 100%; top: 0;
}
#below_header_navigation li ul
3 Level Menu jQuery - Script Codes JS Codes
var site = function() { this.navLi = $('#below_header_navigation li').children('ul').hide().end(); this.init();
};
site.prototype = { init : function() { this.setMenu(); }, // Enables the slidedown menu, and adds support for IE6 setMenu : function() { $.each(this.navLi, function() { if ( $(this).children('ul')[0] ) { $(this) .append('<span />') .children('span') .addClass('hasChildren') } }); this.navLi.hover(function() { // mouseover $(this).find('> ul').stop(true, true).slideDown('slow', 'easeOutBounce'); }, function() { // mouseout $(this).find('> ul').stop(true, true).hide(); }); $('li').hover(function() {
$(this).html().animate({left:"3"},400);
}); }
}
new site();
Developer | Hemant Aggarwal |
Username | mstoic |
Uploaded | January 09, 2023 |
Rating | 3 |
Size | 3,122 Kb |
Views | 8,096 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Adsense Code Converter - Mstoic.com | 2,017 Kb |
Amazing White Border Below Link | 1,867 Kb |
Simple Slider Images | 3,348 Kb |
Nav for Mobile | 1,896 Kb |
NAV WPMANAGER | 1,991 Kb |
Continuous News Ticker jQuery | 2,279 Kb |
A Pen by Hemant Aggarwal | 3,716 Kb |
Amazing Hover Effect | 2,091 Kb |
Navigation for Touch | 2,305 Kb |
Pop Up AAA | 1,823 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Header | Er40 | 1,542 Kb |
Google Maps API Ground Overlay | Boycetrus | 2,961 Kb |
Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
Header Line Issue | Charlie-volpe | 1,768 Kb |
About Us | Francescaedits | 1,902 Kb |
Placeholder support for contentEditable elements, without JavaScript | Flesler | 1,863 Kb |
Twitch Live Channels | Inkblotty | 4,956 Kb |
A Pen by Jonas Bjork | Jonasbjork | 3,115 Kb |
Apple website | Jds317 | 1,835 Kb |
Box-sizing | Elad2412 | 1,572 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!