Multi Levels and Directions Subs Menu Posted by vuluganck | at Tuesday, June 16, 2009

Hi everyone, today I will bring to you one stylish and amazing menu using Css.Its special feature is very different from the its brother menus.I don't know how to call it exactly but I will name it Multi Level and Directions Menu.

If you feel not enough by my old previous menus like Colorful tabs but don't have sub,Jquery menu but it is so hard to make or 1 sub dropdown menu.Therefore, this menu is coming to you.

This drop down menu has 3 subs, too but not the same as the other drop down one.(I mean it just drop from left to right for all subs).Now you can make it to drop from right to left and combine both directions.Sounds great!Let's look at the demo.

• View live demo

Well ? How do you feel when you see it ?Let's do it now!

1.Add this whole code before the ]]></b:skin> tag:

/* ================================================================
Please don't remove this, you will find Zenplate for help easily
by this credit.
This menu is brought to you by Zenplate (http://zenplate.blogspot.com)
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.

=================================================================== */

#outer {width:750px; height:350px; background:url(filters.jpg) no-repeat right bottom; position:relative;}
.pad1 {width:51px; height:25px; background:#fc0; float:left; margin-top:3px; margin-right:3px; border:1px solid #000;}
.pad2 {width:52px; height:25px; background:#fc0; float:left; margin-top:3px; border:1px solid #000;}
.topline {width:748px; height:3px; border:1px solid #000; background:#fc0; font-size:1px;}

#menu {list-style-type:none; padding:0; margin:0 0 0 3px;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#cdc; margin:3px 3px 0 0; border:1px solid #000; width:123px; height:25px;}
#menu li.sub {background:#aba;}

/* for IE5.5 and IE6 only */

#menu li a {display:block; color:#000; height:25px; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:123px; text-decoration:none; text-align:center;}
#menu li a table {position:absolute; left:0; top:-1px; border-collapse:collapse; width:0; height:0;}

#menu :hover {color:#fff; background:#898; position:relative;}
#menu :hover > a {color:#fff; background:#898;}

#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul,
#menu :hover ul :hover ul ul.left {visibility:hidden; width:0; height:0; overflow:hidden;}

#menu :hover ul {visibility:visible; overflow:visible; position:absolute; height:auto; width:128px; left:-1px;top:26px; background:url(transparent.gif);} /* the background image is for IE7 */

#menu :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul {visibility:visible; overflow:visible; height:auto; width:128px; padding:9px 3px; left:100px; top:0;}

#menu :hover ul :hover ul.left,
#menu :hover ul :hover ul :hover ul.left {visibility:visible; overflow:visible; height:auto; width:128px; padding:9px 3px; left:-106px; top:0;}

<script type="text/javascript">
function ieFix(topLevel)
{
var ua = navigator.userAgent;
var isMSIE = (navigator.appName == "Microsoft Internet Explorer");
var isMSIE5_5 = isMSIE && (ua.indexOf('MSIE 5.5') != -1);
var isMSIE6 = isMSIE && (ua.indexOf('MSIE 6.0') != -1);
if (isMSIE5_5 || isMSIE6)
{
document.getElementById(topLevel).innerHTML = document.getElementById(topLevel).innerHTML.replace (/<ul/gi,"<table><tr><td><ul").replace (/<\/ul>/gi,"</ul></td></tr></table></a>");
for (i=0;i<document.getElementsByTagName("li").length; i++)
{
if (document.getElementsByTagName("li").item(i).className == "sub")
{
document.getElementsByTagName("li").item(i).innerHTML = document.getElementsByTagName("li").item(i).innerHTML.replace(/<\/a>/i,"");
}
}
}
}
</script>

2.The first step is done, very easy right?Ok now Save and create a HTML/Javascript(Add A Gadget) and paste this code, at this step you can change the names,categories,labels by your own:

<div id="outer">
<div class="topline"></div>
<div class="pad1"></div>
<ul id="menu">
<li><a href="#nogo1">Home</a></li>
<li class="sub"><a href="#nogo2">Products</a>
<ul>
<li class="sub"><a href="#nogo3">Cameras</a>
<ul class="left">
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul>

</li>
<li class="sub"><a href="#nogo7">Lenses </a>
<ul>
<li><a href="#nogo8">Wide Angle</a></li>
<li><a href="#nogo9">Standard</a></li>
<li><a href="#nogo10">Telephoto</a></li>
<li class="sub"><a href="#nogo11">Zoom</a>

<ul>
<li><a href="#nogo12">35mm to 125mm</a></li>
<li><a href="#nogo13">50mm to 250mm</a></li>
<li><a href="#nogo14">125mm to 500mm</a></li>
</ul>
</li>
<li><a href="#nogo">Mirror</a></li>

<li class="sub"><a href="#nogo15">Non-standard</a>
<ul class="left">
<li><a href="#nogo16">Bayonet mount</a></li>
<li><a href="#nogo17">Screw mount</a></li>
</ul>
</li>
</ul>

</li>
<li><a href="#nogo18">Flash Guns</a></li>
<li><a href="#nogo19">Tripods</a></li>
<li><a href="#nogo20">Filters</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo21">Services</a>

<ul>
<li><a href="#nogo22">Printing</a></li>
<li><a href="#nogo23">Photo Framing</a></li>
<li><a href="#nogo24">Retouching</a></li>
<li><a href="#nogo25">Archiving</a></li>
</ul>
</li>

<li class="sub"><a href="#nogo26">Shop</a>
<ul>
<li><a href="#nogo27">Online</a></li>
<li><a href="#nogo28">Catalogue</a></li>
<li><a href="#nogo29">Mail Order</a></li>
</ul>
</li>

<li class="sub"><a href="#nogo30">Contacts</a>
<ul>
<li><a href="#nogo31">Support</a></li>
<li class="sub"><a href="#nogo32">Sales</a>
<ul class="left">
<li><a href="#nogo33">USA</a></li>
<li><a href="#nogo34">Canadian</a></li>
<li><a href="#nogo35">South American</a></li>

<li class="sub"><a href="#nogo36">European</a>
<ul class="left">
<li><a href="#nogo37">British</a></li>
<li><a href="#nogo38">French</a></li>
<li><a href="#nogo39">German</a></li>

<li><a href="#nogo40">Spanish</a></li>
<li><a href="#nogo41">Italian</a></li>
</ul>
</li>
<li><a href="#nogo42">Canadian</a></li>
<li><a href="#nogo43">Asian</a></li>
</ul>
</li>
<li><a href="#nogo44">Buying</a></li>
<li><a href="#nogo45">Photographers</a></li>
<li><a href="#nogo46">Stockist</a></li>
<li><a href="#nogo47">General</a></li>
</ul>
</li>
</ul>
<div class="pad2"></div>
</div>


Now Save all and join,if you have any problem please leave me a comment whatever!Hope you like this and don't forget to support me!Thanks very much!

Requirements: CSS
Website: http://www.stunicholls.com
Bring to Blogger: Zenplate