« Back to Organix DEV

Drop Up Menu

This is a derivation of my Drop Down Menu demo. The only difference is that this menu has a drop-up submenu.

Example

• Home
• About
• Portfolio
  • Sub Item
  • Another Sub Item
  • Sub Item
• Services
  • Sub Item
  • Another Sub Item
  • Sub Item
• Services
  • Sub Item
  • Another Sub Item
  • Sub Item
• Contact

The HTML

<ul id="menu">
	<li><a href="#" title="Title Here">Home</a></li>
	<li><a href="#" title="Title Here">About</a></li>
	<li class="parent"><a href="#" title="Title Here">Portfolio</a>
		<ul>
			<li><a href="#" title="Title Here">Sub Item</a></li>
			<li><a href="#" title="Title Here">Another Sub Item</a></li>
			<li><a href="#" title="Title Here">Sub Item</a></li>
		</ul>
	</li>
	<li class="parent"><a href="#" title="Title Here">Services</a>
		<ul>
			<li><a href="#" title="Title Here">Sub Item</a></li>
			<li><a href="#" title="Title Here">Another Sub Item</a></li>
			<li><a href="#" title="Title Here">Sub Item</a></li>
		</ul>
	</li>
	<li class="parent"><a href="#" title="Title Here">Services</a>
		<ul>
			<li><a href="#" title="Title Here">Sub Item</a></li>
			<li><a href="#" title="Title Here">Another Sub Item</a></li>
			<li><a href="#" title="Title Here">Sub Item</a></li>
		</ul>
	</li>
	<li><a href="#" title="Title Here">Contact</a></li>
</ul>

The CSS

/* Menu
---------------------------------------------------------------------------------------- */
#menu {
	width: 100%;
	margin: 100px 0 0;
	padding: 0;
	list-style: none;
	background: #EFF3E2;
	border-top: 1px solid #CFD8A9;
	border-right: 1px solid #CFD8A9;
	border-bottom: 1px solid #CFD8A9;
	font-size: 100%;
}
/* Clearfix */
#menu:after {
	content: " ";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
#menu li {
	float: left;
	margin: 0;
	padding: 0;
	position: relative;
}
#menu a {
	float: left;
	display: block;
	padding: 7px 16px;
	text-decoration: none;
	color: #486A00;
	font-weight: bold;
	border-right: 1px solid #FAFBF7;
	border-left: 1px solid #DEE7C2;
}
#menu a:hover {background: #E1E7C9;}
/* The Drop Down: */
#menu .parent a {background: url(../images/bullet_arrow_down.png) no-repeat right center;}
#menu .activeParent a {
	color: #333300;
	background: #E1E7C9 url(../images/bullet_arrow_down.png) no-repeat right center;
}
#menu .parent ul {display: none;} /* Hides the dropdown */
#menu .activeParent ul {
	float: left;
	width: 12em; /* The width of the dropdown */
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 2.15em; /* You may need to change this if you change font-size or padding on the menu */
	left: 0;
	list-style: none;
	z-index: 1000;
}
#menu .activeParent li {
	float: left;
	margin: 0;
	padding: 0;
}
#menu .activeParent li a {
	float: left;
	width: 12em; /* The width of the dropdown */
	margin: 0;
	padding: 3px 8px;
	color: #556A28;
	display: block;
	background: #FFFFFF;
	font-size: 90%;
	border-top: 1px solid #CFD8A9;
	border-right: 1px solid #CFD8A9;
	border-left: 1px solid #CFD8A9;
}
#menu .activeParent li a:hover {
	background: #E1E7C9;
	color: #333300;
}

The Javascript

// GetElementsByClass Function
function getElementsByClass(className) {
	var all = document.all ? document.all : document.getElementsByTagName('*');
	var elements = new Array();
	for (var i = 0; i < all.length; i++)
		if (all[i].className == className)
			elements[elements.length] = all[i];
	return elements;
}

// Menu Function
function menu(start,hover) {
	var elm = getElementsByClass(start);
	for (i=0; i < elm.length; i++) {
		elm[i].onmouseover = function() {
			this.className = hover;
			this.onmouseout = function() {
				this.className = start;
			}
		}
	}
}

// Call Menu Function on page load
window.onload = function() {
	menu('parent','activeParent');
}

The Images

Download

Download Files View the Demo