» » Multi Levels and Directions Subs Menu

Multi Levels and Directions Subs Menu

Friday, January 1, 2010 | Posted by Admin

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

/* ================================================================
Please don't remove this, you will find Mutiaramail for help easily
by this credit.
This menu is brought to you by Mutiaramail (http://Mutiaramail.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>

Related With:

Tips

Labels: , , ,  

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)