3 Level Menu jQuery

Developer
Hemant Aggarwal
Size
3,122 Kb
Views
8,096
  1. 3 Level Menu jQuery Previews
  2. 3 Level Menu jQuery HTML Codes
  3. 3 Level Menu jQuery CSS Codes
  4. 3 Level Menu jQuery JS Codes

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 Previews
IQ Test

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 &amp; 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();
3 Level Menu jQuery - Script Codes
3 Level Menu jQuery - Script Codes
Home Page Home
Developer Hemant Aggarwal
Username mstoic
Uploaded January 09, 2023
Rating 3
Size 3,122 Kb
Views 8,096
Do you need developer help for 3 Level Menu jQuery?

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!

Hemant Aggarwal (mstoic) Script Codes
Name
Working Ticker
Images For ThemeForest - Envato
Multiple jQuery Sliders
BreadCrumb Design
Navigation Mobile From Right Slide
Divider Shadow
DEL - SIP Calculator
Social Share Count With JS
Adsense Code Converter - Mstoic.com
Amazing Hover Effect for Categories WP
Create amazing web content with AI!

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!