March 12, 2009

A Simple Drop-Down Menu Using Jquery


The last two drop down menu tutorials on this blog use background images in the menu-tabs, and hence it is not so easy to customize them for your blogs. So here's a new widget code, in which you can easily change the colors of the menu so as to match with your blog.


Live demo can be seen here:
Demo1: ClubVista Blogger Template (In Green)
Demo2: JavaScript-Array (In Blue) (Widget author's blog)

To add a widget similar to these, follow these steps:

STEP1:
Log in to Blogger, go to "Layout" -> "Edit HTML"

STEP2:
Now find this code:
</head>
and immediately BEFORE/ABOVE it, paste this code:
<!--jquery-DD-Menu-Starts-->
<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: #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}
</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>
<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>
<!--jquery-DD-Menu-Stops-http://bloggerstop.net-->
Now before you save the template, make these changes in the code :
To get the HTML color codes, you can refer to this image:
http://homepages.ulb.ac.be/~dgonze/INFO/htmlcolors.png
STEP3:
and go to "Layout" -> "Page Elements"
and click on "Add a Gadget", select it as "HTML/JavaScript" type

and finally paste this code in to the new widget:
<!--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://bloggerstop.net">Blogger Help</a></li>
</ul>
And save the widget.


268 comments:

«Oldest   ‹Older   1 – 200 of 268   Newer›   Newest»
CrakerLo said...

sai, i dun hav !--jquery-DD-Menu-Starts--
this code, how?

Divya Sai said...

oops sorry, that line is a typo, you only have to find this one:

</head>

CrakerLo said...

erm.. the drop down is not working how? teentcm.blogspot.com

CrakerLo said...

erm.. no nid to check my blog edi, i change another

DA said...

It doesn't work =(
http://test-da.blogspot.com/
whats' wrong?(

Divya Sai said...

Hi DA,
your test blog is not open to public, anyways i think there might be some code conflict with your template, same with CrakerLo's blog.....

why don't you try it in your other blogs ?

@ CrakerLo, and DA,
Well i can suggest you two to use other drop-down menus described in this blog...

Regards
Sai

LiquidSilver said...

lol, played with the code and finally succeed placing it on the top of my blog, but the problem is it is not centered and how do i add links to it??can you help me?i need guides.
heres the blog:
http://hit-liquidsilver.blogspot.com/

Divya Sai said...

Paste the second code in between center tags, like this:

<center>SECOND CODE HERE</center>

Replace the all "#" in the code above with links like http://google.com or http://bloggerstop.net

That's it !

Ambara Putra said...

Hi Div, I like this post. I tried to do that to my blog with all the steps you have posted, but it appears just the text.Could I've been missing some steps?

Divya Sai said...

@ Ambara and Everybody,

There was a small error in the code, and hence it wasn't working for you people, I have just corrected it, please try it and tell me if it works for you now!

Henry Juarez Vargas said...

The error is in the last style:

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

you have tu complete with a bracket like this }

so the correct code will be:

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

:D

Divya Sai said...

Thanks for telling that Henry !
I have corrected the post now...

Regards
Sai

Ambara said...

thanks Divya I got it. It is owesome

Divya Sai said...

Welcome Ambara !

Nikhil said...

Excellent Post! Very Very helpful. Dropdown working fine. :)

View Blog www.iexcogitate.blogspot.com

Divya Sai said...

Wow...neat work Nikhil !

Regards
Sai

Shivani said...

nice post ;)
thanx buddy.....

http://www.xperiencemedia.blogspot.com

Divya Sai said...

Welcome Shivani...

!i! KSAK !i! said...

thanks.its awesome and working very well
:)

kashif salman said...

hi i have tried the codes.it worked but got a problem that is it hides behind the main header picture, if i change its position it still hides behind the post area. please help me out.

Divya Sai said...

Hi Salman,
have you tried this one:
http://bloggerstop.net/2009/01/multi-level-drop-down-menu-in.html ?

!i! KSAK !i! said...

no, not yet i will try on other blog please help me solve this problem have u visit the my blog to view the problem?

Divya Sai said...

Yes Salman, I have visited your blog, I'm not sure but I think it's a css clash. It's actually a common problem...

Why don't you try the other widget in your blog, i think it will too suite your blog !

!i! KSAK !i! said...

okay i try

cassie said...

Hi!
Thank you for your excellent step by step guide on the drop down menu. I successfully configured my blogspot to include the drop down menu, BUT now how do I post contents so that it corresponds with the drop down menu?

Divya Sai said...

Hello Cassie,

I just visited your blog.
The words you are using are like necklace, party, wedding etc.
Now you have to link these words to the target pages.
As these words are your blog's categories/labels, so better link them to your labels's links.

Like this:
<li><a href="http://cassaileen.blogspot.com/search/label/Necklaces">Necklaces</a></li>

Basically you have to replace those #'s with the links.

Regards
Sai

Kelvin Wong said...

Hi,thanks for the tutorial and it works really well! however, how can i have sub link,i mean sublink in the dropdown menu.thanks again!

Divya Sai said...

Hello Kelvin, thorugh this hack you cannot have multi-level menu, you may read this tutorial to add a multi-level menu:
http://bloggerstop.net/2009/01/multi-level-drop-down-menu-in.html

Scuff-Manson said...

hey thanks for this btw

ok but i got a few problems ok
1)is the drop down menu supposed to be at the bottom of my page? how can i get it so it appears at the top?

2)i added new titles to the menu but how do i get it to actually lead to somewhere. e.g
*ART* --> *drawings*photographs*???*
how do i get it to lead to my pictures or watver?

thanks.

Scuff-Manson said...

http://scuff-manson.blogspot.com/

Divya Sai said...

Once you have created the widget, drag it to just above the Blog Posts widget in the layout page.

Scuff-Manson said...

i dont get you

Divya Sai said...

Check out this screenshot:
http://i42.tinypic.com/whku1i.png

Only Free Stuff Here said...
This comment has been removed by the author.
Only Free Stuff Here said...

You rock! I have spent endless hours looking for this! Thanks for posting. Setting it all up on a temp blog for now but cant wait till I am done! Works perfect so far! I'm soooo happpyyy!! =))

Only Free Stuff Here said...
This comment has been removed by the author.
Only Free Stuff Here said...

Works awesome except I can figure out how to keep the drop-down from going behind my other elements. Tried to search for a solution but keep hitting dead ends. Anyone have a work-a-round? Thanks. ~x(

Sai said...

Hmmm....If you haven't yet tried it on your main blog, then I would suggest you to try it out there too.
As the problem you are facing, may/may not appear in every blog...so jst check it in your main blog too.

MALAM SYUKUR SEIKLAS BUDI said...

Hi Divya Sai,

Finally I seem to have the drp menu works. I tried from topic "multi-level drop down menu" before but failed. I rather use ths simple one which is ok.
Now :-
1. the text for the navigation items is position in the middle, how to make it left justification?
2. how to make menu to fit the screen?

Awaits your response.

btw my blog is http://www.malamsyukurseikhlasbudi.blogspot.com.

Sai said...

(1). left float is already present in the code..i think there's some other code problem:
#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

(2). Chk out this screenshot, notice the three highlighted widgets, that is the location, where you have to drag the new widget and not IMMEDIATELY below the Header !

http://i39.tinypic.com/2ijgsn5.jpg

Regards
Sai

Only Free Stuff Here said...

:) Happy again. I now have the drop-down menu on my main blog! http://onlyfreestuffhere.blogspot.com

Thanks so much for posting!

Malam. Maybe you can send us the code or a screen shot so we can see whats going on? Feel free to email me if you like.

Angelina Watson said...

AWSOME simply AWSOME YOU ROCK! IT IS SO EASY TO USE AND CUSTOMIZE! and it blends so well you made my day dude.
and im not promoting my blog here but just want you to look at this for a neat clean and customization able menu u gave me : http://acnetreatmentandmedication.blogspot.com

Thanks once again :)

Divya Sai said...

Hello Angelina,

I am really happy for you, feel free to show-off your work, if you have used any tutorial from BloggerStop
In fact if time permits, I was myself planning to update my blog-posts with links to work done by the readers as examples :)

Angelina Watson said...

Wow that would be a nice idea and really encouraging for the readers too.Can i ask a question? this is working absolutely perfect in my firefox 3.5 but when i open it in my internet explorer the drop down menu box appears like well below its heading like there is a big gap between the menu name and drop down box but only in internet explorer.By the way i have very old internet explorer i.e 6.0 may be that would be the reason?
Thanks

Only Free Stuff Here said...

The dropdown part still hides under my elements. I ended up moving my elements out of the way so the menu bar is functional on most of my pages. I don't know how to add a screen shot here, but on this link, under "contact" you can see it hiding behind my google ad. If anyone ever finds a solution let us know.

My page: http://onlyfreestuffheresamples.blogspot.com/

And this probably works, just I don't know code so have no clue where to place it or even if this is the fix?

http://stackoverflow.com/questions/19127/best-way-to-fix-css-js-drop-down-problem-in-ie7-when-page-includes-google-map

Divya Sai said...

Hi Angelina...welcome back

May be as you mentioned the problem is specific to IE6, as in my IE8 your blog looks really good.
Here's the screenshot:
http://i25.tinypic.com/zoapg0.png

In my blog, I hardly have around 3-5% visitors with IE6, so if you too have similar stats, then do not worry much for that small gap :)

Divya Sai said...

@ Only Free Stuff Here

I can understand your problem, but although I do not have any quick-fix for it presently, what I can suggest you is to swap the links "Games" and "Contact" in your menu, as "games" does not have any sub-menus, but "contact" does have, which are hidden behind your adsense-ads.

Only Free Stuff Here said...

Thanks, not much traffic at my site yet. I am just trying to fix this menubar b4 then. I really like the menubar and I am sure there will be a fix soon. How did you send me a screenshot from here? Thanks

Divya Sai said...

For taking screenshots, you have to press the "Print Screen" button in your keyboard and then paste the image in MS Paint.

Angelina Watson said...

Hey i looked at your screenshot and it is ok for me now thank you :)

Angelina Watson said...

@ Divya Sai Hey i have a question i hope you will try to help again.Is there any possibility to have multi level drop down menu with this code? I know you have provided it in your previous page but the thing is that they are not very easy to customise.So, I am just curious to know if you can help me out in this matter and provide any edit or something to have multi level drop down.I only need 2 levels something like "Title> (down) sub category>(right) sub category 1, 2 etc"

Thank You once again

sobriquetz said...

hi! i really like your drop down menu! i've been searching for it for some time!

however, the drop down menu part seems to be hidden behind my blog contents! and i can't make it in the centre!

i've also tried the multi level drop down menu, but the drop down part is also hidden behind my blog contents!

pls help me on my test blog! :) THANKS!

http://tttemplate.blogspot.com/

Only Free Stuff Here said...

Hi. I took some code from another template and inserted then use the above instructions on all else. I tried to post the HTML here but it was too long. You can email me direct and I will send a notepad file with step by step instruction.

kgthan@yahoo.com

http://onlyfreestuffhere.blogspot.com

sobriquetz said...

hmm, doesn't seem to work
can your code be applied to classic template in blogger? i still have not switched over to the layout template yet

http://tttemplate.blogspot.com

Only Free Stuff Here said...

Sobriquetz: Here is the template I use. It should work for you as well. Do a Google search for "Our Blog Templates". The link should come up (1st on my results). On his page (top right) use his "custom search" bar and type in: "The Professional Template". On mine it is the 3rd link down. It will take you direct to the template I use and the download.

Divya Sai said...

@ Angeline Watson,

You can try this widget:
http://bloggerstop.net/2009/01/multi-level-drop-down-menu-in.html

Before uploading the .CSS file, you can easily change the color of the widget in that file by changing this code in the file:

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}


@ sobriquetz
Plz try this widget in your main blog, and then tell me if you are still facing the problem...

@ Only Free Stuff Here
If you know the link, then why don't you give it here....why so many searches?

sobriquetz said...

i decided to upgrade my test blog into the layout template, and the drop down menu works!

but i can't put it in the center even when i use
the center html

how else can i align it in the center?

Divya Sai said...

Simply drag the widget just above the "Blog Posts" widget in the Layout page, and not immediately below the "Header" widget.

Chk out this screenshot, and the highlighted Red box, for the exact location of the widget:
http://i26.tinypic.com/21mez2t.png

Only Free Stuff Here said...

I tried posting html here b4, it didn't work for me. Maybe because it was too long. And how the heck are you guys sending me the screenshots? I know how to take a screen shot but don't know how to post it here. Comes over through tinypic? Is that some program? Are you uploading the image somewhere else first? here is the link. Hope it comes over: http://www.ourblogtemplates.com/2008/11/blogger-template-professional-template.html

Only Free Stuff Here said...

http://i29.tinypic.com/20uaav8.jpg

I think I figured it out!

Only Free Stuff Here said...

=)) By Golly, I did it!

Only Free Stuff Here said...

As far as centering, I played with the numbers until the toolbar stretched across the screen and centered out. The 117.5 is what worked for me:

http://i29.tinypic.com/5zhcpf.jpg

~*~sobriquetz~*~ said...

yay! i've got it!
dragged it above the blog post and it is now in the center! now i can continue editing it before transferring to my main blog!

thanks everyone for your help! :)

Daniel said...

Posible Solution to center
#jsddm
{margin:0px 245px 15px;
padding: 0px}

I hope this helps

wonder pets said...

kk

Angelina Watson said...

@ Divya Sai Please listen to me i really need your help in the other menu you suggested me i am not able to customise it well.there are few question. When i try to change the background as u suggested it only changes the color of a little block on the end of the menu but somehow i was able to change the background colour of whole menu.But like this menu i want the colour of sub menu to be different.But i am not able to do that.The background colour of title and sub menu remains same..can you help me/? thanks

Divya Sai said...

Well Angelina, in the .css file (of the post you are referring to), you'll see some hexa-decimal codes for different colors, with comments, like these:

/*background of tabs (default state)*/
/*tab link background during hover state*/
/* Sub level menu links style */

and
/*sub menus hover style*/


Now wherever these comments are there, change the hex-codes, according to your requirements.

Hope this helps you...

Rachit Oza said...

Hi Divya,

Thanks for such a good tutorial

I have a problem. The menu items are displayed below the blog elements instead in front of them. I mean the drop down list goes behind the text. Can you tell me how to bring all the elements in front of the text

Thanks

Rachit Oza

Angelina Watson said...

@ Divya Sai Thank you that helped alot but sorry for asking again but i didnt find any hexa colour codes next to or near "/* Sub level menu links style */" i want to change the background colour of sub level menu but didnt find any place to place the code..can you explain please? thanks again.
"/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}"

C there is no place for hexa colours?

Divya Sai said...

In the same code, add a line for the background color, like this:

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
background: blue;
}

That's it !

Angelina Watson said...

Hey in the end i got that part thanks alot...only last 2 questions lol hope you arent getting irritated.1) is there any way to change the colour of text of sub menus?
2) I want the width of the columns to be same how can i do that?I want to make all columns of equal size of the width FOLDER 1 and 2 Thanks.

Divya Sai said...

To change the text color, add one more line to the code above like this:

color: red;

And to make the menu of equal width, make the smaller menu tabs wider by typing the invisibe character(as width is adjusted acc. to the number of letters in the menu)...NOT spacebar but this:

ALT+3+2

type '3' and '2' from the num-pad (first hit 3 then 2, while keeping the ALT button pressed).

And feel free to ask many doubts as you want, but sometimes I just get too busy to answer them quickly

Angelina Watson said...

Thank you so much once again by the way where to place > color: black; < code? i tried to put it like this for submenu links colour > "/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
color: black;
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}" and it didnt work its alrite i cant wait forever to get your helpful replies :)

Angelina Watson said...

Plus for the width i am sorry but i did get the part how to make space by those keys but i do not know where to do that? i tried to put space (by your procedure) before ITEM 2 in the html code section

What do You Beleive America? (tour) said...

see link wdyba.blogspot.com ... why are the dropdown backgrounds not solid ... and also, how do get my text to indent a little from the left?

Any help would be greatly appreciated! :O)

Shawn

Divya Sai said...

@WDYBA

I would give the same suggestion as to Angeline, try this widget:
http://bloggerstop.net/2009/01/multi-level-drop-down-menu-in.html

@ Angelina:
The widget is looking nice in your blog, I think you can leave it as it is :)

Maggie Kempner said...

Is there a way to have the main bar stay it's hover color while the mouse goes over it's sub bars?

See my blog:

http://marcchandler.blogspot.com/

I am trying to have the words like "Making Sense of the Dollar" still have the dark background while browsing down to "Preorder".

Thanks!

Only Free Stuff Here said...

Hi Maggie. Sorry I was unable to figure that one out. Each time I left "Making Sense Of The Dollar" to browse down to "Preorder", the "Making Sense Of The Dollar" would default back to the lighter gray (or main menu color). I am sure there is a way to make the darker gray hover remain permanent while browsing on down the list but I have no clue how to do this. You might have some luck here: http://groups.google.com/group/blogger-help?pli=1

They helped me in the past.

Guest said...

I'm sorry to bug you. I know you get lots of questions, but I am really lost here and don't know what to do. I have added your drop down menu and one of your simple tab menus onto a blog I have, and when you click on my blog they don't work. If you refresh my blog page, then they show up correctly and work. Would you mind taking a look and letting me know if you have any advice on how to get these to work right when someone goes to my blog?
Hopefully that made sense!
Thanks so much! Your tutorials are great!!
Julie
http://leeloubtrial.blogspot.com/

Divya Sai said...

Hi Julie,

I have just checked your blog, and found the drop-down menu perfectly working...even before refreshing the page (in the initial page-load itself)...don't worry simply try the widgets in your actual blog too, you can of course delete the code anytime you want :)

Guest said...

How do I stretch it out across my blog?

Victoria said...

I am having a hard time in getting this to stretch across my blog also I am having a hard time getting my list to drop down correctly.... Here is the code I am entering in the widget. Could you tell me what I am doing wrong? For the tim being, I have removed the widget in my blog.

Victoria said...

<!--BODY-CODE-->
<ul id="jsddm">
<li>Home
<ul>
<li>Coupons 101</li>
<li>Newspaper Coupons</li>
<li>Internet Coupons</li>
<li>E-Coupons</li>
<li>Additional Resources</li>
<li>Organizing Coupons</li>
<li>Expired Coupons</li>
</ul>
<ul>
<li>Drugstores 101</li>
<li>CVS 101</li>
<li>Walgreens 101</li>
</ul>
<ul>
<li>Store Coupon Policy</li>
<li>CVS</li>
<li>Kmart</li>
<li>Kroger</li>
<li>Rite Aid</li>
<li>Target</li>
<li>Walgreens</li>
<li>Walmart</li>
</ul>

Guest said...

The drop down menu works great. (Thanks!) But the drop down tab menu on the right doesn't. Every time the page is refreshed it doesn't work. Any ideas??!??!?!

Divya Sai said...

The code is fine, nothing to change in it...
But the widget you have added should be dragged below the "Header" and not immediately above "Posts Body" widget in the "Layout" page. Anyways I have just checked your blog, and I think you have already done it...in case you still have a problem then feel free to comment here :)

pkb said...

Thanks and very awesome code

me said...

thats not working properly....
gadjet HTML script is coming eigther coming down or coming in the left of the blog...

Divya Sai said...

Your blog url 'me' ?

doc rogers said...

great stuff, works well ... two questions ...

1. how do i add another box to the main menu, i need six options?

2. is it possible to make this work in individual posts (using blogger)?

Sai @ Blogger Help said...

1. In step 3, you have to add some more code, like this :
Immediately after the HTML/CSS line, add this code:

<li><a href="#">New Menu</a></li>

And if you want a drop down in this one, then before closing the <li> tag, you have to add a <ul> tag inside it, just as done for the EFFECT option:

<li><a href="#">Effect</a>
<ul>
...
...
...
...
...
</ul>
</li>

2. To show the widget only in specific pages, use this method:
http://bloggerstop.net/2008/12/show-widgets-in-only-specific-pages-or.html

Gud day!

Rita said...

OK, I have a stupid question! How do you link to a site outside of your blog? When I put an address like www.cnn.com (just an example) it will put that address after my blogpot address and says the page can't be found.

So how do you link to outside or external webpages? What am I missing???

Thanks for all of this info, everything else works great!

Rita

Sai @ Blogger Helper said...

while linking www is not enough, use http:// too
that means instead of linking as

www.cnn.com, use

http://cnn.com or
http://www.cnn.com

eljun said...

nice thanks for this man....great codes..:D

Anonymous said...

So, has anyone figured out how to keep the drop downs from going behind your other elements?

Divya Sai said...

Add z-index: 100; in css.

Arafin said...
This comment has been removed by a blog administrator.
I am Laura said...

I had this working alright and then I tried to add an archive drop down menu. It didn't work so I tried to fix and now the drop downs will not work at all. I even started from scratch and it is not working. benandlaura.blogpspot.com

Blogger Widgets said...

Hi Laura,

You are using frameset from searchportal.information.com
so in that case I cannot check your source-code.

Dr. Internet said...
This comment has been removed by the author.
PaidForWritedown said...
This comment has been removed by a blog administrator.
Tree said...

Hi....this is a beautiful code!! It's working perfectly on my blog....but I'm having the same issue as Shawn (WBYDA) with the dropdown tabs on the menu looking "transparent" when you click on them. When you are on a dropdown link....you can see the words from the blog behind it. Any way to take that transparency out? I'm using a solid background image, so it shouldn't be "see-through." Thanks!!

http://www.mommiesfaves.com/

Divya Sai said...

@Tree

Just visited your blog, you are perfectly using images as background-image for your menu items. I didn't notice the transparent effect in your menu, so is it solved or are you still fcing that problem?

Tree said...

Nope....it's still there. But, it seems that it only happens on the nav links that are above the center column posts. It's very strange too....it only does it on the topics that don't have a "sticky post" at the top. LOL Maybe I'll just add a sticky post to all the topics and that will solve the problem.

Example: If you go to Kid Korner, then What's in for Kids....then mouseover the nav bar and you'll see that the nav link background fades out.

Otherwise I love this code!!

Thanks!

Sai @ Blogger Help said...

okay,

If that error is still there, then try this...
In this code:

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

add these additional lines of code:

{ width: auto;
background: #A9C251; /*LIGHT-GREEN*/
color: #24313C
opacity: 1.0;
-moz-opacity: 1.0;
filter: alpha(opacity=100);
z-index: 102;
}

Tree said...

No....didn't work. But, I still love the code, so I can deal with that. If it can't be fixed, I'll just add a sticky post to each page so it doesn't do it. LOL :D

Thanks for your help!!

Divya Sai said...

@Tree
If you do not want to show that sticky post in all pages, then here's another way to avoid that transparent effect,
hide that small message box (Showing posts with label ***) which overlays this menu, by this method:

http://www.bloggernutshell.com/2009/08/how-to-remove-showing-posts-with-label.html

Tree said...

That worked beautifully!! Thank you so much!! You rock!

Divya Sai said...

:)

Kim said...

Thank you so much for this! I have been trying to get this feature on my blog for a week and finally came across your post. I'm going definately going to past this on.

Blogger Widgets said...

Nice work Kim!

neilhoja said...

thanks dude.. this is really awesome. great... tuts...

Lin said...

solution for the drop down menu is hidden by other tags or the menu looking "transparent". At least work for me.
I used jqueryslidemenu without problem previously. I run into this problem when I created a new page. After some debugging, I figured out that it is the "position:relative;" attribute caused the problem. After I removed all the "position:relative;" from the tags on the css file. The problem solved. I don't know why this attribute causes this problem though. Hope it helps.

BloggerGirl said...

Thank u soo much for the post!! I have a question though

1) how can u change the number of tabs that have the drop down feature? (in this code u can only have 2 of the tabs in the nav bar with drop down feature)

2) How can add more tabs to the menu?

Thank u again for the post!

BloggerGirl said...

my url is

todoadventista.blogspot.com

(is in Spanish)

Earn in PTC said...

thanks for this very very useful post. it work on my blog :)

Sai @ Blogger Widgets said...

@BloggerGirl
In between any two <li> .... </li>

Add a
<ul>
...
...
</ul>


then between this ul and /ul you can again add some li.../li to create new drop-down menus.

If you are facing any problem, tell me the menu items, I will make the code for you.


@Earn in PTC
You are most welcome buddy :)

BloggerGirl said...

thank u soo much ir really helped! I really appreciated! :)

Sai @ Blogger Templates said...

Glad I could help :)

Priyanka said...

Superb work... Clean and neat :)

~ k said...

Fantastic!! Easiest guide to follow. I am trying to change the color of the TEXT and that being the only area I am having trouble with. But otherwise, perfect, thank you!!!

www.kellylindseyphotogrpahy.com

Sai @ Blogger Widgets said...

Hi Kelly,

I'm glad that the guide helped you.
Here's what you have to edit, to change the text-color:

#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 ul li a
{ width: auto;
background: #A9C251; /*LIGHT-GREEN*/
color: #24313C}

Edit the bloded code. Change "#EAFFED" and "#24313C" to some other HTML hex-codes [See this color-guide]

~ k said...

Hey there!
I actually did change those texts. What I was referring to was the color of the text in the nav bar itself.
It seems the only customizable text was that of the words that dropped down. Unless I missed something??

Divya Sai said...

Hey Kelly,

In my previous comment, there are two lines with the word "color"

The first one is:
color: #EAFFED;
change this to change the text-color in the main nav-bar.

and the second one is:
color: #24313C;
edit this to change the text-color of drop-down menu links.

Anonymous said...

Hi I'm using the ipod style menu as shown at http://www.filamentgroup.com/examples/menus/ipod.php
I have implemented this in a pop up and am facing a strange issue that the menu is being rendered outside the modal popup at a different location on the page where as its header appears in the pop up. Can anyone please help ?

John said...

Can anyone please convert this wordpress menu to blogger. Its of zionn template but the converted version doesn't have dropdown menu. Link for template
http://www.bloggertemplateplace.com/2009/11/zionn-zenverse-magazine-blogger.html

and the CSS dropdown menu for wordpress
http://mujie.blog.niwakarya.com/web/css/2010/01/04/zionn-template-css-drop-down-menu.html

Pleeeasssssssssssss...................... Anyone?

Divya Sai said...

Hey John,

The links you have given aren't in detail. There's no demo, no instructions...
Plz try these widgets, they are customizable, hope you'll find what you want:
1. Multi-Level menu (To change color, change the code in the CSS file).

2. To change the colors, you have to again edit the CSS file, but in this widget the menu ites backgrounds are images (gray colored).

3. And of course you may use the widget shown in this page. (you can easily change the colors by editing the code in STEP #2)

John said...
This comment has been removed by the author.
Divya Sai said...

Tell me the widget you liked (if that's widget 1/3 from my previous comment), I'll make the changes in the code for you.
Also, select and tell me the color-codes you want to use in the widget from this page (for menu background color and mouse-hover color).

John said...

Thanks, I finally have a decent menu.

Haleyknitz said...

OMG thank you a million gazillion times!!!! I'm getting mine up and running, and I'm going to do a post linking you because you're awesome :D

Divya Sai said...

You are most welcome Halye...and thank you for the post, I really appreciate that. Feel free to comment anywhere in the blog in case of doubts. Happy Blogging :)

Vice T. Vanish said...

hi :) I've try this codes and it when great but my problem is only this, when i approach to the drop-down-menu and click of one of the drop-down it will dissapear... I wanted it to be stable until it access to the page ^_^ can you help me please :D...
Like for example: when i go to "MY PERSONAL NOTES" and drop-down appears then I click "MY FAVORITE VIDEOS" it suddenly fade.. :)

Please Help me keep it sustain until it reach the link-page I click :D thank you
and here's my blog

http://solomode.blogspot.com

Divya Sai said...

@Vice T. Vanish

I understand your point, but that's not exactly a problem...whenever we go to a new page eveything in the previous page closes and the new html loads.

Vice T. Vanish said...

But can you help me make it solid? ^_^

Divya Sai said...

solid.. as in what?

Vice T. Vanish said...
This comment has been removed by the author.
Vice T. Vanish said...

Like other drop-down-menu when I click of them with out inserting a code target="_blank"..

Like for example when I go to the "???" in the menu the drop-down-menu a drop-down of "home pag default example" all appears. When I click one of them it will stay at it ease until it reach to its respective loaded and dissapears only when it reaches the loaded respectively...

Try example in my Dummy blogsite: http://vicevanish.blogspot.com

The drop-down-menu of this dummy-blogsite is different codes I've try and experiment in other resources..

Snowfrog Photography said...

Thanks so much for this code. I'm new to blogging, html, etc. and really wanted drop down menus.

A couple questions:

How do I center each Menu Button Text within the blue button? for example: Categories

I've figured out how to make some of the buttons "work" by adding an url. How do I go about creating an "About Us" page or a Contact Us page so I can add that url, too?

Divya Sai said...

1. To center the text, add text-align:center to these code snippets, like this (in BOLD):

#jsddm li a
{ display: block;
text-align:center;
background: #324143; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap}
...
...
...
#jsddm li ul li a
{ width: auto;
text-align:center;
background: #A9C251; /*LIGHT-GREEN*/
color: #24313C}

2. Create About and Contact Us page, using the latest feature on Blogger - Blogger Static Pages

Also, rea on how to add a "contact Us" form in Blogger blogs:
http://bloggerstop.net/2009/01/create-contact-me-page-for-your.html

ErwinSK said...

Sai, can you please help me, the menu simply das not work.
External links are okay but the links to the labels is down.

pls help!

Erwin..........> http://buzzreader.blogspot.com/

Sai - Blogger Widgets said...

@Erwin,

There's a typo in the links you are using, you have typed
labe
instead of
label
correct that error, and that'll fix your problem.

ErwinSK said...

Sai... You know, sometimes I think I need glasses.

Thank you Sir

Snowfrog Photography said...

This question isn't directly related to this post, but I didn't know where else to ask.

Now that I've added your amazing drop down menu, I would also like to have a background like the one here on this post page. It doesn't need to have the pattern yours does, but I'd like to add a solid color, probably gray, to either side of the main post body. I'm new to blogging and code and use blogger.com

Can you help me out? My site is http://snowfrogphoto.blogspot.com/

George said...

Hi Divya,

I've inserted the code into my blog: http://georgevarasteanu.blogspot.com and it doesn't work. The "drop menu" doesn't work. Please could you advise me? Thank you in advance.

PS: I hope it doesn,t matter the site language, by the way. It is not english.

Sai - Blogger Help said...

Hi George,

Your code is all correct, may be some code conflict is there.
Try pasting the code from STEP #3, just below this code tag:

<div id='content-wrapper'>

Sai - Blogger Widgets said...

@Snowfrog Photography

Here's the tutorial for you:
http://bloggerstop.net/2008/12/how-to-addchange-background-image-in.html

and also some nice background images, you may use(with the repeat pattern):
http://bloggerstop.net/2009/02/70-background-images-for-blogs-and.html

Vice T. Vanish said...

I still using this simple drop-down-menu because other DDM doesn't function in internet explorer rather they only function in the new browser... ^_^

Anyways here is my blog:
http://vicetvanish.blogspot.com

George said...

Hi Sai,

I've tried to do exactly how you said. No any improvment. I don't know what to do in this situation. I've let those buttons as a simple buttons, but I'm not happy with that.

If someone had the same issue please tell me how you did solve it.

Thanks in advance.

Jana Maries Photography said...

Ok... so before I even get to step 3 and I click "preview" (before I save it) it says, "We were unable to preview your template. More than one widget was found with id: HTML2. Widget IDs should be unique."

Umm.... is the code incorrect?

I REALLY want one of these and read all the comments but I cant get past step 2.

Sai - Blogger Help said...

Although that is not because of this widget but anyways, find the phrase "HTML2" in your tempalte, it should be present two times in your tempalte.
Change any one of them to either HTML20 / HTML21 or any other number which is not there already in your template.
Save the template then add this widget to your blog.

Jess said...

I am so glad I found this site! It has helped me so much!

I am working on adding one of these drop down menus to my blog, but I want to add more buttons. I tried just copying and pasting the code for the existing buttons, but the additional button and associated drop down menu show up as a bulleted list. Can you tell me what to do to make it work?

I haven't had any other problems. Thanks again for such a great resource!

Sai - BloggerStop.Net said...

Need your blog address...

Jess said...

Sai,
My test blog address is http://jestingjesting123.blogspot.com/
Thanks for your help!

Sai - Blogger Widgets said...

Hi Jess,

Here's the code you are presently using on your test-blog:

<ul id="jsddm">
<li><a href="#">1</a>
<ul>
...
...
...
<li><a href="#">6e</a></li>
</ul>
</li>


And, the code you should use is this....you just have to see the positions of opening and closing of the tags li and ul.

<ul id="jsddm">
<li><a href="#">1</a>
<ul>
<li><a href="#">1a</a></li>
<li><a href="#">1b</a></li>
<li><a href="#">1c</a></li>
</ul>
</li>
<li><a href="#">2</a>
<ul>
<li><a href="#">2a</a></li>
<li><a href="#">2b</a></li>
<li><a href="#">2c</a></li>
<li><a href="#">2d</a></li>
<li><a href="#">2e</a></li>
</ul>
</li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a>
<ul>
<li><a href="#">6a</a></li>
<li><a href="#">6b</a></li>
<li><a href="#">6c</a></li>
<li><a href="#">6d</a></li>
<li><a href="#">6e</a></li>
</ul>
</li>
</ul>


Glad I could help you Jess...

Jess said...

PERFECT! Thanks you so much!

CROSSAINT said...

hi...
at first i've tried so hard but still sure these will work!
and i did it...until i found something strange with these ddmenus...
i wanna make the dd box lilbit transparent,but it doesnt work...
and theres a weird transparent dialogue box appear under those dd menu ~X(
and the movement of those dd box always too late to opened or closing exactly after i click it...even its still appear after the post still opened!:-t
ow..and another one...how could i make the post appear with the dd menus?i mean not only the post tittle...
and last, how can i make my blog post colum wider than now?im using minima template.

btw...this is my blog with ur idea
www.crossaint.blogspot.com
im so excited if my blog does really work...
and im glad i can found ur tutorials that makes all look easy with me.
sorry with my bad grammar but thx a lot...

ps: i hope im not interupted u around ;p

SAS said...
This comment has been removed by the author.
SAS said...

hi friends, I have one nice css menu for your friends use, check this

TheRielThing said...

Thank you so much for having the only working tutorial I've been able to find on this subject!

Bharath.C said...

how to place the drop down menu(box) in the centre of my blog?????

Hannah said...

Is there any way you can do this drop-down widget for images? I've been trying but...failing.

Divya Sai said...

Yes you can certainly do that, but use small images like small rectangle of width around 200pixels and height around 30 pixels.

And instead of this code:

background: #324143; /*DARK-GREEN*/

use this one:

background: url(http://DIRECT_LINK_TO_THAT_IMAGE.jpg); /*DARK-GREEN*/

of course, change that url and put only the DIRECT LINK to the image of your choice, for the direct link upload your image to tinypic.com

and similarly, change other two lines of code too, viz.

background: #A9C251; /*LIGHT-GREEN*/

and

{ background: #8EA344}

Hannah said...

Okay, but for the images, I mean more of a map header. I have one that I'm using for my design business, but is the code capable of corresponding with a map image?

Hannah said...

Thank you, though! :-)

amar said...

good j00b

Anonymous said...

Hello Sai,

I see how you help people here and I am really impressed. I hope you will come through for me too.

Just customizing my new blog (no content yet) want to make it look a little inviting first.
Here's the url http://relationship-issues-and-answers.blogspot.com (I'll get a custom name when I am done editing the template)

I have added the code for the drop down menu (though edited now) and it worked.

Now my problem is 'how do I make the tabs link to actual pages created?

This is what I have tried:

I wanted to create a Contact me page with a contact form (following your suggestion in a post) on it. You suggested we create a Contact me and Thank you page first. So I used the normal Edit pages to create a Contact page. Now I tried to link tab in the blog to the page by adding the 'CONTACT ME' to the HTML/Javascript I copied here. But it didn't open.

The question is: after creating the drop downs, how do you now create their actual pages and have the tab link to them? That is when someone click on the tab, he is taken to the page for it.

Now that's one of my problems and a major one at that.

The others are:

I want to clean up my template

I want the 'Already a member sign in' by the right side to be out

I want to crossed arrows by each item to be off, they irritate me.

I also want the subscribe to: Posts (Atom) to be out.

And even when my Template was designed by Pyzam and powered by blogger, I don't think it should be displayed as obvious as it is now. Can I hide it somewhere?

I am counting on you to help out.

I also want you to comment on my template in relation to my topic. What do you think will be visitors first impression? Does it offer WARMNESS? Any advice will be appreciated

Anonymous said...

Still expecting your reply

Shinny said...

Seems to be a problem now that Blogger has the new template design.

Have used your drop down menu for about a year and very pleased with it.
However, I've just tried to add in another submenu link and when I click save it wants something added in the widget title field.
Have ended up with an ugly dot above the tabs to make it work at present.

Mac Premium said...

hihi...

hope you can help me.
i just use the code and this is how it appears on my blog.
http://blackberry9700-premium-acc.blogspot.com/
how should i address this so it looks just like the one you have. thanks in adavance.

Usualsuspects said...

Im a newbie at css. Im having a problem seeing my drop down menus and I am trying to add another tab. Can someone please help me with this. www.PromoDat.com

CT said...

Hi .. added the below code, but something went wrong somewhere as not able to select the submenu as once moved the mouse, the submenu just disappear.. need help here.. thank you ~ ;-)

This is the code:

body {
behavior: url(csshover.htc);
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
}

p a {
color: #000;
text-decoration:underline!important;

}
a{
color:#000;
text-decoration:none;
}
p a:hover{ text-decoration: none!important;
}

ul#nav {
list-style: none;
padding: 0;
margin: 0;
}


ul#nav li a {
display: block;
font-weight: bold;
padding: 2px 10px;
background:#f9f9f9;
}

ul#nav li a:hover{
background:#888;
color:#fff;
}

ul#nav li {
float: left;
position: relative;
width: 100px;
text-align: center;
margin-right:5px;
border:1px solid #ccc;

}

ul#nav li.current a{
background:#ddd;
}

ul#nav li.current a:hover{
background:#888;
}

li ul {
display: none;
position: absolute;
width:100px;
top: 0;
left: 0;
font-weight: normal;
padding: 1px 0 10px 0;
margin-left:-1px;
}

ul#nav li ul.sub li{
border-width:0 1px 1px 1px!important;
}

ul#nav li ul.sub li a{
font-weight: normal!important;
}
li>ul {
top: auto;
left: auto;
}

li:hover ul, li.over ul {
display: block;
}

Self Sagacity said...

Hello, thank you for this post! I tried it and it worked fine - whew! Very relief. Except, I need to edit the menu titles, for example: contact me, how do I do this. I did not see anyone ask this in your questions.

Divya Sai said...

@Shinny
I checked your blog (gorunningwithdallam.blogspot.com) and found he widget without any title, as you wanted hope that was some temporary glitch.

Divya Sai said...

@Mac premium,
Checked your blog too, As yoiu are using the other multi-level menu....which is already almost similar to the one I'm using, so I guess that solves your purpose...

Sai - Blogger Widgets said...

@Usualsuspects,
Your site is not loading...

Sai - Blogger Help said...

@CT I need your blog address..

Divya Sai said...

@Self Sagacity,

Edit the code in step 3 (look for those word in that gray box and replace with your own words.) Study that code and you can similarly add/remove items from that list.

Ipin Al-Attas said...

Thanx for this information..
it was great :)
try visit my page
http://pic.izyan.com/

sravani choudary said...
This comment has been removed by the author.
sravani choudary said...

there is a lot of gap between the menu bar and blogpost gadgets in my blog,did i do mistake,if u don't mind just check my blog and giv me a suggestion by looking at its appearence,it's fordevotees.blogspot.com

Sai - Blogger Help said...

Hi Sravani,
Instead of adding the code in a HTML/JavaScript widget (as described in STEP #3), paste that code in your template itself, exactly at this location:
ABOVE this code:

<div class='main-outer'>

Tell me if that solves your problem...

sravani choudary said...
This comment has been removed by the author.
The Autophobic Golden Gods said...

Hi, is there anyway to fix the problem I seem to be having on my blog?

http://77tester.blogspot.com/

The menu appears behind everything. And I am unable to click on anything. This problem happens on all my blogs. :/

sravani choudary said...
This comment has been removed by the author.
sravani choudary said...

hai sai,i tried the way u preffered me,but it created a new prob lik the whole menu bar when behind the post body
so i tried in a different way which solved my prob,it is by editind these changes in the html suggested by u,

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

the code ....top: 28px;......can be changed according to the blogger's requrement depending upon their measurement of blocks in menu bar
Thank u for ur help in giving the procedure to create a drop-down menu

sravani choudary said...

hi sai,can u suggest me any solution to arrange the links in my posts in alphabetical order

Sai - Blogger Widgets said...

@The Autophobic Golden Gods

Just as shown in the comment #185 (by Sravani), add that code:
z-index: +1;

to your code too. Instead of +1 you can use any other number too, like 50/100 etc.

@Sravani,

Please give your blog address and tell me exactly in which widget do you want to arrane the links.

mr.Poneis said...

Eureka!

A Miracle Fit!

Thank You!

see ya
mr.poneis

The Autophobic Golden Gods said...

Thanks so much Sai & Sravani! Now it's working perfectly! :D

Mrs. Deputy said...

Hi I was wondering How I can make this Centered on my blog. I tried the tip with the margins but I cant seem to get my numbers right I guess. Any help would be appreciated

http://www.thefamilybehindhisbadge.com

Thank you

Mrs Deputy

Mrs. Deputy said...

Also in the link you provide-

http://cre8tivenerd.com/2009/08/how-to-remove-showing-posts-with-label/

it says to look for this code-




is it possible for it to be named something else? I am looking all through the code for my template and Do not see that Anywhere.

Thank You

sravani choudary said...

hi sai,dis is sravani,here is url:fordevotees.blogspot.com
I want to sort all the links in my blog,such as if viewers click on any of my tabs in menu bar lik images,mp3 downloads,lyrics etc..,the links must appear in alphabetical order
Thanks in advance

Divya Sai said...

Well, using any script just to sort links alphabetically won't be wise I think, as it will delay your blog's loading time unecessarily.
Rather, you should manually do it yourself, and while adding the links to your code paste them in that order only.

sravani choudary said...

k,thank you very much towards your dedication in replying sai

Sai - Blogger Help said...

:)

Jack said...

This has worked :)

but I am still left wondering...

Why does the drop down menu and elelments go under my posts?

How d0 I add the desired links to these pages

How do I change the name of these buttons to correspond with my site (on all levels)

Thanks in advanced

Jack

Sai - Blogger Help said...

@Jack,

Change this code:

#jsddm {
margin: 0;
padding: 0;
}


to this:

#jsddm {
margin: 0;
padding: 0;
z-index: +1;
}

_ said...

Ive changed that code but I am still having the same problem.Is it because the first thing on my blog is the 'about us' image jpeg??

FYI

http://morris-media.blogspot.com/

Sai - Blogger Widgets said...

Well, instead of
z-index: +1;

try
z-index: +100;

java said...

hi sai.This really helped me a lot.But the problem is when i place the mouse cursor on the sub menus item . The sub menu item was not highlighted . Plz help me out with this . Looking forward for the answer

«Oldest ‹Older   1 – 200 of 268   Newer› Newest»
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

Allowed HTML tags: <b>, <i> and <a>

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy