2009/06/16

Multi Levels and Directions Subs Menu

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.



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

1 comments:

Webbielady said...

I see it highly innovative to be able to have them available in all directions. Was that created by you? You must be a genius...

I hope I still have time to try and see the results but it's midnight in my end and it's working day tomorrow.. Till the next time then.. Keep up the great job.

Post a Comment

Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words tohelp each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on Zenplate.
Best regard
Zen

 
.