Home > Categories > Navigations > JQuery roll over two level menu

JQuery roll over two level menu

 




This script creates a menu with two levels. The second level is hidden and will only appear when you move over a menu button. The menu buttons of the second level are displayed on a single row. This is a userfriendly menu type and saves a lot of space on the page. Although the second menu slides from under the first menu. This effect is obtained by using JQuery. The menu is built using ul and li tags. The CSS provides the layout.

How to use the twolevel function

The script is built as JQuery plugin. The plugin has a single option resetTimer. This option is used to restore the original state of the menu when you move your mouse away from the menu. The default value is 1000 milliseconds. As default, the menu waits 1 second to restore the original state of the menu.


HTML, CCS and JQuery code

<style>
.placemainmenu {
	font-family: "CenturyGothicRegular", "Century Gothic", Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 0px;
	margin: 0px;
	height: 59px;
	background: #fff url(header.png) repeat-x;
}

.twoLevelMenu {
	list-style: none;
	height: 31px;
	float: left;
	margin: 0px;
	padding: 2px 0 0 2px;
	background:
		url(sepmenu.png)
		no-repeat 0 2px;
	position: relative;
}

.twoLevelMenu li {
	float: left;
	height: 29px;
	background:
		url(sepmenu.png)
		no-repeat 100% 0;
	padding: 0 2px 0 0;
}

.twoLevelMenu li a {
	display: inline;
	float: left;
	height: 22px;
	font-size: 1.2em;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	padding: 7px 17px 0 17px;
	text-decoration: none;
}

.twoLevelMenu li:hover a,.twoLevelMenu li.active a {
	text-decoration: none;
	background: #0870a1;
}

.placemainmenu ul ul {
	list-style: none;
	position: absolute;
	display: none;
	width: 990px;
	height: 29px;
	top: 29px;
	left: 0;
	padding: 0;
}

.placemainmenu ul li ul li {
	height: 27px;
	background: none;
	padding: 3px 0 0 0;
	margin: 0;
	float: left;
}

.placemainmenu .twoLevelMenu li ul li a {
	border-right: 1px solid silver;
	color: #4d4d4d;
	font-size: 1.1em;
	height: 20px;
	font-weight: bold;
	text-transform: none;
	padding: 7px 18px 0 18px;
	margin: 0;
	background: none;
	float: left;
}

.placemainmenu .twoLevelMenu li:hover ul li:hover a:hover{
	text-decoration: none;
	color: #000;
	background: #eee;
}


<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="scriptbreaker-twolevel-1.0.js"></script>
<script language="JavaScript">
$(document).ready(function() {
	$("#mainmenu").twolevel(
			{resetTimer: 100}
	);
});
</script>

 Download full sourcecode

Add a comment...