CSS based horizontal menu for HTML

Websites with static webpages and with CSS menu look beautiful. Its easy to develop such menu system using JavaScript kit. The menu will be horizontal with main level & sub level. Sub menu items will be displayed upon mouse hover on the related main menu item.

css code for the above styles: Copy the below css code and paste into a file named menu.css

.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
margin-bottom: 0;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.basictab li{
display: inline;
margin: 0;
}

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 2px;
border: 1px solid gray;
border-bottom: none;
background-color: white;
color: black;
}

.basictab li a:visited{
color: black;
}

.basictab li a:hover{
background-color: #dbffff;
color: black;
}

.basictab li a:active{
color: black;
}

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #dbffff;
color: black;
}

.submenustyle{
padding: 2px 1px;
border: 1px solid black;
border-top-width: 0;
width: auto;
display: none;
filter:alpha(opacity=0);
-moz-opacity:0;
}

* html .submenustyle{ /*IE only width definition*/
width: 100%;
}

.submenustyle a{
border-right: 1px dashed black;
padding: 1px 5px;
text-decoration: none;
}

.submenustyle a:hover{
background-color: #ebffff;
}

JavaScript Code: Copy the below JavaScript Code and paste into a file named menu.js

var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""

function showsubmenu(masterid, id){
if (typeof highlighting!="undefined")
clearInterval(highlighting)
submenuobject=document.getElementById(id)
mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : ""
hidesubmenus(mastertabvar[masterid])
submenuobject.style.display="block"
instantset(mastertabvar.baseopacity)
highlighting=setInterval("gradualfade(submenuobject)",50)
}

function hidesubmenus(submenuarray){
for (var i=0; i<submenuarray.length; i++)
document.getElementById(submenuarray[i]).style.display="none"
}

function instantset(degree){
if (mastertabvar.browserdetect=="mozilla")
submenuobject.style.MozOpacity=degree/100
else if (mastertabvar.browserdetect=="ie")
submenuobject.filters.alpha.opacity=degree
}

function gradualfade(cur2){
if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (typeof highlighting!="undefined") //fading animation over
clearInterval(highlighting)
}

function initalizetab(tabid){
mastertabvar[tabid]=new Array()
var menuitems=document.getElementById(tabid).getElementsByTagName("li")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
if (menuitems[i].className=="selected")
showsubmenu(tabid, menuitems[i].getAttribute("rel"))
menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){
showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
}
}
}
}

HTML code: Copy the below html code and paste into a file named TestMenu.html

<html>
<head>
<title>Test Menu</title>
<link rel="stylesheet" type="text/css" href="menu.css" mce_href="menu.css" />
<mce:script type="text/javascript" src="menu.js" mce_src="menu.js"></mce:script>

</head>
<body>
<ul id="maintab" class="basictab">
<li><a href="JavaScript:alert('Clicked Home');" mce_href="JavaScript:alert('Clicked Home');">Home</a></li>
<li class="selected" rel="SubMenu1"><a href="#" mce_href="#">Menu-1 ▼</a></li>
<li rel="SubMenu2"><a href="#" mce_href="#">Menu-2 ▼</a></li>
<li><a href="JavaScript:alert('Clicked Exit');" mce_href="JavaScript:alert('Clicked Exit');">Exit</a></li>
</ul>
<div id="SubMenu1" class="submenustyle">
<a href="JavaScript:alert('Clicked Child Menu-1');" mce_href="JavaScript:alert('Clicked Child Menu-1');">Child Menu-1</a>
<a href="JavaScript:alert('Clicked Child Menu-2');" mce_href="JavaScript:alert('Clicked Child Menu-2');">Child Menu-2</a>
<a href="JavaScript:alert('Clicked Child Menu-3');" mce_href="JavaScript:alert('Clicked Child Menu-3');">Child Menu-3</a>
</div>
<div id="SubMenu2" class="submenustyle">
<a href="JavaScript:alert('Clicked Child Menu-1');" mce_href="JavaScript:alert('Clicked Child Menu-1');">Child Menu-1</a>
<a href="JavaScript:alert('Clicked Child Menu-2');" mce_href="JavaScript:alert('Clicked Child Menu-2');">Child Menu-2</a>
</div>

<mce:script type="text/javascript"><!--
//initialize tab menu, by passing in ID of UL
initalizetab("maintab")
// --></mce:script>
</body>

3 Responses to “CSS based horizontal menu for HTML”

Karthikeyan says:

June 22, 2009 at 9:35 am

Nice trick to put child menu using CSS bro thanks for explaining great article ..
Beautiful Boobs %0B says:

January 30, 2011 at 12:15 am

.’. I am very thankful to this topic because it really gives up to date information .*~
Shyam says:

April 27, 2011 at 9:59 pm

With pleasure …