Creating Simple Drop Down Menu

Posted by Yusuf Sinaga.dr Labels: Blogger Hack, bLogSpot.com

Today i've changed my header menu appearance with a simple drop down menu style. Like its name, the sub menu will appear from the parent menu if you hover your mouse on it.

You can see the screen shot on top-left side of this post, or you can go try it live in my blog :)

As a comparison this is my old header menu:

And i like this drop down menu better than the old one :)
I'll guide you how to create this fancy but simple drop down menu, but all the credit will goes to Bloggerstop.net.
Because as you now, I'am not a HTML expert but I hope this article could help you a little :).

First: login to your Blogger account - go to layout - edit HTML

Second: find (ctrl + F) this code: </head>
and then right after that code, paste this below code:

<style type='text/css'>
/* menu styles */
#jsddm
{ margin: 3.5px 0px 0px 120px;
padding: 0}

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

#jsddm li a
{ display: block;
background: #007EBB; /*Main Menu Background Color*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 104px;
color: #EAFFED;
white-space: nowrap}

#jsddm li a:hover
{ background: #24313C; /*Main Menu Shadow*/}

#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: 104px;
background: #4DAFD6; /*Sub Menu Background Color*/
color: #24313C}

#jsddm li ul li a:hover
{ background: #8bc7e1; /*Sub Menu Shadow*/}
</style>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);});

document.onclick = jsddm_close;
</script>

You can modified the code in "Red Color" to bring into line with your theme color. The "Blue Color" is to explain which color will be changed.
Preview your changing, and then saved.

Third: Go to "Page Elements" -> add a gadget -> choose HTML/Java Script gadget.

Fourth: Paste below code in the new HTML gadget

<ul id="jsddm">
<li><center><a href="http://PUT_LINK_HERE">Home</a></center>
<ul>
<li><center><a href="http://PUT_LINK_HERE">About Me</a></center></li>
<li><center><a href="http://PUT_LINK_HERE">Contact</a></center></li>
</ul>
</li>
<li><center><a href="http://PUT_LINK_HERE">Link Exchange</a></center></li>
<li><center><a href="http://PUT_LINK_HERE">Search People Here</a></center></li>
</ul>

Here's the explanation:
- You must change all "PUT_LINK_HERE" with your destination page link.
- Red Color code : parent menu
- Blue Color code : sub menu
- Green Color code : is the menu alignment, the default (if you erase it) will align to left.
Save the widget, and now you have your own drop down menu...