Simple Drop Down Menu With jQuery For Blogger

Hello! Bloggers, Looking for a drop down menu for your Blogger site? Well, you’ve come to the right place. Today! Trickiezone will teach you how to add it into your Blogger site.

Live Demo

Note!
Please read the instructions below to avoid getting errors.

Instructions:

• Login to your Blogger account.
• Go to Template section.
• Backup first your template.
• After that click Edit HTML.

Adding Javascript Code:

• Press Ctrl+F and find

</head>

• Add the code below before

</head>

Javascript Code:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js” type=”text/javascript”></script>
<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>

Adding CSS Code:

• Press Ctrl+F and find

]]></b:skin>

• Add the code below before

]]></b:skin>

CSS Code:

/* CSS Menu Styles Start(www.trickiezone.com) */
#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}
/* CSS Menu Styles End(www.trickiezone.com) */

Adding Menu Code:

• Press Ctrl+F and find

<div id=’content-wrapper’>

• Add the code below before

<div id=’content-wrapper’>

Menu 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://www.trickiezone.com”>Trickiezone</a></li>
</ul>

• Save the template. Done!

Hope that this widget works to you, Say thanks by hitting Facebook share button or Google +1 button or Subscribe us to receive free email updates directly to your inbox.

Confused? Feel free to ask by posting your comment below.