2 A Simple Drop-Down Menu Using Jquery

UPDATE:  I updated some of my posts, this post I update 17+ Drop Down Menu Widget in Blogger - Horizontal Menus With CSS & HTML Codes........

Log in to Blogger, go to "Layout" -> "Edit HTML"Now find this code:


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://bdlab.blogspot.com-->

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 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://bdlab.blogspot.com">Blogger Help</a></li></ul>

Now Click Save

Free Backlinks for Blog and Website

Do you want to know Where to get free backlinks? This is a free, fast, and simple immediate automatic backlinks for optimizing your blog or web page on search engines result.Everyone knows how important backlinks are to getting a good rank.Here, we offer a backlink for free and very fast for your sites. Copy the html code first (no change needed), and then paste to your website or blog.To view your backlink you can click the image link from your website or blog. And well... your website url done and will be displaying in first references.If any visitors click this banner from your website or blog, your url backlink will be creating automatically in this website.You can build backlink as many as you want, no limitation and restriction, but no spam ! Wish your website's ranking quickly on Top Google, Yahoo and Alexa!

Free Automatic Backlink for Blog and Website

If our Tutorials have helped you a little, then kindly spread our voice using the badge below:- Copy this html code to your website >>
Free Backlinks blogger widgets

Optionally use this Widget installer to add this link to your blogger blog.

* Please note:- After you paste the code into the website, please click on the button to create backlinks to your website. - If you remove the code from your website where your backlink will be deleted automatically. - if you know any free backlink info, please submit here, Let's share the free backlink list to everyone.
submit here

2 Responses So Far:

JariHop said...

Thank you for your tutorial on the drop down menu. I am a newbie in this and I find I have a similar problem as the following link http://www.dynamicdrive.com/forums/showthread.php?t=56140 where my drop down menu gets hidden. My website is www.btcarrental.blogspot.com. I have moved the drop down menu to the main body and it works there. However I want to add more tabs and it will go in two rows which I don't want. So, I want to add the drop down menu just under the header where I can add more tabs but the drop down menu gets hidden there. Please help. Thank you

admin said...

i understand but more tabs drop down menu is not possible . sorry my friend

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

Powered by Blogger