18 October 2010

jQuery based navigational drop down menu bar for Blogger blog.

Advertisements

Our previous Drop Down menu bar was awesome.

Here we present another drop down menu bar which uses jQuery and much simpler than previous.

The original HTML codes are of other but I modified then at certain points to give you this elegant menubar.

Live Demo

Let's add this to your blog.
1. Adding Style and JS

Login to Blogger Dashboard > Design > Edit HTML and find following in your template

</head>

Now add following code ABOVE it.

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

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

#jsddm li a
{ display: block;
background: #00217b; /*Purple*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: auto;
color: #EAFFED;
white-space: nowrap}

#jsddm li a:hover
{
padding: 4px 9px;
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: #bd9cc5; /*Light Purple*/
color: #242628}

#jsddm li ul li a:hover
{ background: #e7bff1}
</style>


<!-- 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 type='text/javascript'>
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

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

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css(&#39;visibility&#39;, &#39;hidden&#39;);}

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

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

$(document).ready(function()
{ $(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseover&#39;, jsddm_open);
$(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseout&#39;, jsddm_timer);});

document.onclick = jsddm_close;
</script>

Save Template. You can customize the background colors, fonts and padding easily.


2. Adding Menus and Sub Menus

Go to Page Elements > Add a Gadget > HTML/Java Script and add following code into it and save.

<ul id="jsddm">
<li><a href="http://film-cast.blogspot.com">Hollywood</a>
<ul>
<li><a href="http://film-cast.blogspot.com/search/label/Hollywood%20Movies?&amp;max-results=6">Movies</a></li>
<li><a href="http://film-cast.blogspot.com/search/label/Hollywood%20Featured%20Stories?&amp;max-results=6">Featured Stories</a></li>

</ul>
</li>

<li><a href="http://film-cast.blogspot.com">Bollywood</a>
<ul>
<li><a href="http://film-cast.blogspot.com/search/label/Hindi%20Movies?&amp;max-results=6">Movies</a></li>
<li><a href="http://film-cast.blogspot.com/search/label/Upcoming%20Hindi%20Movies?&amp;max-results=6">Upcoming Movies</a></li>
<li><a href="http://film-cast.blogspot.com/search/label/Bollywood%20Music?&amp;max-results=6">Music</a></li>
<li><a href="http://film-cast.blogspot.com/search/label/Bollywood%20Featured%20Stories?&amp;max-results=6">Featured Stories</a></li>
<li><a href="http://film-cast.blogspot.com/search/label/Hindi%20Video%20Songs?&amp;max-results=6">Video Songs</a></li>
<li><a href="http://film-cast.blogspot.com/search/label/Bollywood%20Stars?&amp;max-results=6">Stars &amp; Superstars</a></li>
<li><a href="http://film-cast.blogspot.com/search/label/Bollywood%20Poster%20%2F%20Wallpapers?&amp;max-results=6">Wallpapers/Posters</a></li>
</ul>
</li>

<li><a href="http://www.getlyricz.com/">Hindi Lyrics</a></li>

<li><a href="http://blogger-help.com/">Blogger Help</a></li>

</ul>

Add your Menus and their respective links to above code.
You can also add step 2 code just above <div id='header-wrapper'>


Source for codes: http://bloggerstop.net/2009/03/simple-drop-down-menu-using-jquery.html
Some of the codes are modified.

Related Posts

27 comments

June 18, 2011 at 12:44 PM

This is great, thank you!! I have a problem though....I've gone through all the steps, adjusted my colors and what not, but when you try to select the drop down menu buttons they do not work. I think it is because of the post/column info, but not sure. How can I fix this? I know a little about html code (I am a web design student), but I'm stumped...

Please help!! Thank you!

June 18, 2011 at 5:21 PM

.tabs-outer {
z-index:10;
}

That needs added to your code above for the drop down navigation to work in the new blogger. The navigation bar is hiding behind the posts currently. :)

That said, nevermind my question....I figured it out myself.

June 26, 2011 at 8:46 AM

i got a big problem my drop down menu is hidden behind my post whenever i hover to the menu. i cannot go through the sub menus cause it underneath my post. help me!!!! :)

June 27, 2011 at 2:17 AM

Hi izaRamos

You have to put step 2 code after the following code (when header ends)

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE (Header)' type='Header'/>
</b:section>
</div>

July 13, 2011 at 5:41 PM

Hello, it's been months and I am now trying this again...I still can't get the drop down menu to show.

Step 2 code is which one of the codes listed here? Thank you for your help.

July 13, 2011 at 6:05 PM

I tried putting your 2. Adding Menus and Sub Menus} under the header wrapper, still doesn't work. Pls help asap...
SelfSagacity

July 13, 2011 at 11:13 PM

It is very easy 2 step procedure.

You have to add Step 2 code into Add a Gadget > HTML/JAVA Script.

July 15, 2011 at 3:04 PM

Hi, thanks for your respond. I already did and it is still behind the post or my blog. Is there a way to bring the drop down menu out in front? I even added the
tabs-outer {
z-index:10;
}
from one of the commentators above and it is still behind the blog post.

July 15, 2011 at 11:38 PM

Remove that Step 2 code from Add a Gadget > HTML/JAVA Script and go to EDIT HTML and click on Expand Widget Templates. Now add this step 2 code just ABOVE ]]></b:skin>

July 16, 2011 at 4:59 PM

Thanks, I did as you suggested. After pasting the code above ]]>, the whole link list didn't even show up on my blog. Please take a look.

July 16, 2011 at 6:02 PM

Alright DrRaman! I figured it out. I had other codes above the /head- this prevented the menu to show. I took your code and put it right above /head and moved the other codes above your codes...let's hope it doesn't interfere with the other widgets...but the problem for the menu is solved. Thanks for your patience. I am relief and happy as a lark...

July 18, 2011 at 12:11 AM

Thanks Amanda for sharing this solution with us.

August 17, 2011 at 5:29 AM

DrRaman, I did step 1 and step exactly as it is listed above, my problem is only 1 of my 3 submenu is showing. Hiw do I fix this?

August 17, 2011 at 7:14 AM

Hi Dallis

I am not getting you. I checked your blog. Explain your problem in details.

August 17, 2011 at 8:32 AM

sorry i was typing this early this morning. I think i was still asleep. lol

I did step 1 and 2 as listed above. I got the menu bar to show but only 1 submenu item is showing in the drop down. if you look at my blog I have Drug stores with a drop down. in the drop down it is only showing CVS when I list cvs, walgreens and rite aid as drop downs. The same issue for daily deals and earn money.

http://www.supersavingsquest.com/

August 17, 2011 at 11:41 PM

Hi DrRaman, I am back. I have a couple of questions:
1) Can the navigation bar be centered? How?
2) Can I add another navigation bar on top of my header? How?
Looking forward to your reply. Thanks a bunch.

August 18, 2011 at 6:27 AM

Welcome Self Sagacity

1. It can be centered. Change

#jsddm li
{ float: left;
list-style: none;

to

#jsddm li
{ float: center;
list-style: none;



2. Another dropdown menubar

http://www.blogger-help.com/2009/11/how-to-add-drop-down-navigational.html

August 18, 2011 at 6:36 AM

Hi Dallis

Remove Step 2 code and add just above

<div id='header-wrapper'>

August 18, 2011 at 7:28 AM

DrRaman

I dont have <div id='header-wrapper> code in my template. I am using one of bloggers template "watermark"

August 19, 2011 at 6:16 AM

Then put the code above

<header>

If this not work just get a awesome template:
http://www.blogger-help.com/search/label/Blogger%20Templates?&max-results=6

August 19, 2011 at 2:21 PM

changing to the awesome template moves the menu bad above the header and the submenu does not drop down.

August 21, 2011 at 12:14 AM

in your current template put the step 2 code above

<header>

October 18, 2011 at 1:46 AM

work fine but how to replace this with pagess
premiumnewaccounts.blogspot.com

October 19, 2011 at 6:22 AM

manually add links of pages

February 2, 2012 at 2:44 PM

I have tried all the suggestions above and I cannot get the drop down go to on top of the posts/sidebars. Help please! http://cbd-ooak16c.blogspot.com/

February 3, 2012 at 5:51 AM

Hi Diana - FreeStyleMama

Sometimes the other scripts interfere with drop down menu scripts. You already have a drop-down menubar.

February 3, 2012 at 6:53 AM

Yes, I know I have one. I am just trying to get it to go on top and NOT behind the post & sidebar content. Any advice?

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More