How To Blog

Today i am sharing very beautiful dropdown menu for you. You can add it anywhere in the blog i-e at top,at bottom or on sidebars. Its very beautiful and you can customize number of tabs and child tabs and also you can customize the color of tabs. You can also see it live on Demo version of this blog. Let's see how to add this.

Adding Dropdown Menu

Demo Version

(1):-Go to blogger site and login to your account.

(2):-Go to Templates>>Edit HTML and than click on proceed.

(3):-Find this line by pressing Ctrl+F .

(4):-Add below code just above this line.

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

#jsddm li
{ float: left;
list-style: none;border-radius: 10px;
font: 12px Catull BQ, Arial}

#jsddm li a
{ display: block;
background: #999966;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 80px;border-radius: 8px;
color: #EAFFED;
white-space: nowrap}

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

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

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

#jsddm li ul li a
{ width: auto;
background: #EEE5DE;
color: #24313C}

#jsddm li ul li a:hover
{ background: #EEC900}
</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>

(5):-You can change the color by viewing below image.

These are current colors. You can replace it by any Hex code. Press Ctrl+F and replace these colors.

(6):-Now save the template.

(7):-Now go to Layout and select Add a Gadget and than select HTML/Javascript.

(8):-Copy below code and paste it click on save.

(9):-Replace # with your desired links.

You can change number of tabs and child tabs and rename them.
This is very easy and simple method. If you have any problem please do mention in comments. We are always here to help you. Hope you will like this. Have a nice day.Thanks