CSS drop-down menu

When we create a drop down menu we want that our menu is lightweighted, fast loading, easy to implement, and also compatible with major browsers.

I am going to define discuss about a CSS drop down menu which has all the qualities stated above. It is a outcome of hardwork we have done few years ago because of quality of such dropdown menus available on net is drastically low. There is no redundant code. You can copy and paste it and also modify it according to your needs.

1. Html Part

The #menucontainer div is our main container div.

<div id=”menucontainer”>
<div id=”mainmenu”>
<ul>
<li><a href=”#”>Home</a>
<ul class=”subhome”>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Register</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Feedback</a></li>
<li><a href=”#”>About Us</a></li>

<li><a href=”#”>RSS/XML</a></li>
</ul>
</li>
<li><a href=”#”>News</a>
<ul class=”subnews”>
<li><a href=”#”>Company Briefs</a></li>
<li><a href=”#”>Company Briefs</a></li>
<li><a href=”#”>Defining Moments </a></li>
<li><a href=”#”>Company Briefs</a></li>
<li><a href=”#”>Company Briefs</a></li>
</ul>
</li>
<li><a href=”#”>Advertising</a>
<ul class=”subad”>
<li><a href=”#”>Creative Showcase</a></li>
<li><a href=”#”>Company Briefs</a></li>
<li><a href=”#”>Company Briefs</a></li>
<li><a href=”#”>Company Briefs</a></li>
</ul>
</li>
<li><a href=”#l”>Media</a>
<ul class=”submedia”>

<li><a href=”#”>Company Briefs</a></li>
<li><a href=”#”>Media Newslets</a></li>
<li><a href=”#”>Company Briefs</a></li>
<li><a href=”#”>Company Briefs</a></li>
<li><a href=”#”>Company Briefs</a></li>
</ul>
</li>
<li><a href=”#”>OOH</a>
<ul class=”subooh”>
<li><a href=”#”>News</a></li>

<li><a href=”#”>Company Briefs</a></li>
<li><a href=”#”>Company Briefs</a></li>
</ul></li></ul></div></div>

2. CSS Part

#menucontainer { width:450px; height:25px; background:#fff; clear:both; z-index:10000;}
#mainmenu {width:440px; height:25px; position:relative; background:#e4e4e4; margin:0 auto; clear:both; z-index:10000;}
#mainmenu ul { padding:0; margin:0; list-style: none;}
#mainmenu li {float:left; position:relative; border-right:1px solid #CCCCCC;}
#mainmenu a {font: 12px Arial, Helvetica, sans-serif; color:#000; height:25px; padding:9px 14px 9px 14px; line-height:25px; text-decoration:none;}
#mainmenu a:hover {color:#fff;  background:#000; }
#mainmenu ul ul {position:absolute;  height:auto; display:none; top:25px; background:#fff none; left:0px; border:1px solid #e4e4e4;}
#mainmenu ul ul a {font:12px Arial, Helvetica, sans-serif; padding:1px 0 3px 5px;  height:20px; line-height:21px; list-style:none; border-top:none; color:#000; background:#fff none; text-decoration:none;  float:left; display:block;}
#mainmenu ul ul a:hover{ height:20px; line-height:21px; color:#fdb813;font-weight:bold;}
.subhome li a{ width:65px;}
.subnews li a{ width:95px;}
.subad li a{ width:100px;}
.submedia li a{ width:105px;}
.subooh li a{ width:90px;}

3. JavaScript Part

paste this javascript in to your body seaction

<script type=”text/javascript”>
function showSubMenuItem()
{
var e = this;
for(var i=0; i<e.childNodes.length; i++)
{
var node = e.childNodes[i];
if(node.nodeName == “UL”)
{
node.style.display = “block”;
}
}
}

function hideSubMenuItem()
{
var e = this;
for(var i=0; i<e.childNodes.length; i++)
{
var node = e.childNodes[i];
if(node.nodeName == “UL”)
{
node.style.display = “none”;
}
}
}

var m = document.getElementById(“mainmenu”);
for(var i=0; i<m.childNodes.length; i++)
{
if(m.childNodes[i].nodeName == “UL”)
{
m = m.childNodes[i];
break;
}
}
for(var i=0; i<m.childNodes.length; i++)
{
var node = m.childNodes[i];
if(node.nodeName == “LI”)
{
node.onmouseover = node.onfocus = showSubMenuItem;
node.onmouseout = node.onblur = hideSubMenuItem;
}
}

</script>

To see a Live demo. Click here
To  download a demo file. Click here

cheers!!
Joginder Poswal

Tags: , ,

This entry was posted on Wednesday, May 27th, 2009 at 4:40 am and is filed under CSS, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

4 Responses to “CSS drop-down menu”

  1. Adrian solute Says:

    Great post! I’ve been looking for something like this for a while now.

    Also I just tested it in IE 6 and it works great!

  2. Amit Says:

    yes it will be helpful article. and drop down menu very important now days.

  3. jposwal Says:

    Thanks amit.

  4. anup Says:

    nice one i could get here lots of thing same as i want!

Leave a Reply

This blog is kept spam free by WP-SpamFree.

 

Get Adobe Flash player