Create 1 sub "Drop down menu" using Jquery Posted by vuluganck | at Thursday, May 07, 2009

Drop Down Menu- the words are quite familiar to blogger , this bar is very necessary on each blog to contain the labels.Beside, it makes your blog looks professional.Because of its importance , I decided to make the first tip about drop down menu bar.

This is the simple menu bar, so you just have to add some codes to your source code,its advantages are you can change the color and move it to anywhere on your blog.

• View live demo


• Download

-To make it , simple log in your blogger account , then go straight to Edit HTML (No check Expand Widget Templates).
-Next add this code before the </head> tag:

<!--jquery-DD-Menu-Starts-->

/* menu styles */
#jsddm
{ margin: 0;
padding: 0}

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

#jsddm li a
{ display: block;
background: #324143; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap}

#jsddm li a:hover
{ background: #24313C}

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

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

#jsddm li ul li a
{ width: auto;
background: #A9C251; /*LIGHT-GREEN*/
color: #24313C}

#jsddm li ul li a:hover
{ background: #8EA344}



<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="Jmenu.js URL" type="text/javascript"></script>
<!--jquery-DD-Menu-Stops-http://zenplate.blogspot.com-->

-Look for the red code above , that is the color code for this menu bar that I have already set it to green, in case you would like to change the color, please click here to get whole color code.
-And the pink code is the link of the js file you have to download above,upload it to your favorite host,I use 110mb.com here.
-Now Save your template, then lets go out to Layout then create a HTML/JavaScript , paste this code in here:

<!--BODY-CODE-->
<ul id="jsddm">
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">jQuery Plugin</a></li>
<li><a href="#">Ajax Navigation</a></li>
</ul>
</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>
</li>
<li><a href="#">Navigation</a></li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="http://zenplate.blogspot.com">Blogger Help</a></li>
</ul>

Done! Join it now, If you have any problem please leave me a comment below , thanks guys and don't forget to subscribe me, thanks much.
Zen


Requirements:Jquery
Convert to blogger : Zenplate