Create 1 sub " Drop down menu" using Jquery(next version) Posted by vuluganck | at Sunday, May 17, 2009

Hi everyone, today I will show you the basic ,simple dropdown menu using Jquery, it is a lightweight so don't worry about loading slowdown on your site.
This menu is from visitmix.com and I have converted it to work on blogspot.

Next to here is the screen shot of its look.
Its advantage is you can move the menu bar to anywhere you want but there are just 3 tabs have subnav.So if you want to create more you have to know a little about Jquery to make more.

Now let's do it now :
1.The 1st thing you have to do is adding this script to your source code , before the </head> tag:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>


2.Next , you have to add this CSS code before the ]]></b:skin> tag:

body
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
margin-left:40px;
background-color:#e5e5e5;
}

#main_navigation
{ margin: 0;
padding: 0;
position:absolute;}

#main_navigation li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#main_navigation li a
{ display: block;
background: #ccc;
background-image:url('images/dropdown_bg.jpg');
background-repeat:repeat-x;
padding: 5px 10px 5px 10px;
text-decoration: none;
border-right: 1px solid white;
width: auto;
color: #333;
white-space: nowrap}

#main_navigation li a:hover
{ background: #999;}

#main_navigation li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}

#main_navigation li ul li
{ float: none;
display: inline}

#main_navigation li ul li a
{ width: auto;
background: #fff;}

#main_navigation li ul li a:hover
{ background: #999;}

Note:If you have any problem while this step is being added, please put all the CSS code above between 2 meta tag (if you does not have any problem please skip this), it looks like this :
<style type="text/css">
...CSS code here...
</style>

The red code:Option it by your own style.
3.Next , you have to add this function jquery code before the </head> tag again:

<script type="text/javascript">
jQuery(function($) {
var timer;
function OnMouseHover0(event)
{
$("#main_navigation li ul").css("visibility","hidden");
$("#subNav0").css("visibility","visible");
}

function OnMouseOut0(event)
{
$("#subNav0").css("visibility","hidden");
}

function OnMouseHover1(event)
{
$("#main_navigation li ul").css("visibility","hidden");
$("#subNav1").css("visibility","visible");
}

function OnMouseOut1(event)
{
$("#subNav1").css("visibility","hidden");
}

function OnMouseHover2(event)
{
$("#main_navigation li ul").css("visibility","hidden");
$("#subNav2").css("visibility","visible");
}

function OnMouseOut2(event)
{
$("#subNav2").css("visibility","hidden");
}

$('#trigger0').bind('mouseover', OnMouseHover0);

$('#trigger0').bind('mouseout', OnMouseOut0);

$('#trigger1').bind('mouseover', OnMouseHover1);

$('#trigger1').bind('mouseout', OnMouseOut1);

$('#trigger2').bind('mouseover', OnMouseHover2);

$('#trigger2').bind('mouseout', OnMouseOut2);

});
</script>

Note(you don't have to do this): At this step , you can copy all the function jquery code then put it in a js file then upload it to your host to prevent the memory for your blog.If you do this , you have to put the js file that you have uploaded and got the direct link in this meta form:

<script src='http://yourjsfile direct URL here' type='text/javascript'/>

And add it before the </head> tag ( just like above right?).

4.Final step, create a HTML/Javascript then copy/paste all the code here:

<ul id="main_navigation">
<li id="trigger0"><a href="#">Tab1</a>
<ul id="subNav0" class="subNavMenuItems">
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
<li><a href="#">Sub 4</a></li>
<li><a href="#">Sub 5</a></li>
</ul>
</li>
<li id="trigger1"><a href="#">Tab2</a>
<ul id="subNav1" class="subNavMenuItems">
<li><a href="#">Edit 1</a></li>
<li><a href="#">Edit 2</a></li>
<li><a href="#">Edit 3</a></li>
<li><a href="#">Edit 4</a></li>
<li><a href="#">Edit 5</a></li>
<li><a href="#">Edit 6</a></li>
</ul>
</li>
<li id="trigger2"><a href="http://zenplate.blogspot.com">About Zenplate</a>
<ul id="subNav2" class="subNavMenuItems">
<li><a href="http://zenplate.blogspot.com/2008/12/about-me.html">About Zen</a></li>
<li><a href="http://twitter.com/zendersto">Zen's Twitter</a></li>
<li><a href="http://zenplate.blogspot.com">Zenplate</a></li>
<li><a href="http://zenplate.blogspot.com">Need for help</a></li>
</ul>
</li>
</ul>

Note: At this step you can option your links, your labels, anything you want here.If you know a little bit about Jquery, you can make more subnav for this type of menu.Hope you like it and it will run good on your blog.
Please leave me a comment if you are in trouble.


Requirements:Jquery
Website :http://visitmix.com/Lab/glimmer
Developer :The MIX Online Team
Convert to blogger : Zenplate