Beautiful jQuery Drop-Down Menu For Blogger Blogspot
24 comments
Alright, this time, we are going to make a stylish and simple jQuery drop down menu. The main objective is to make it as simple as possible, with some little jQuery effect and easy to customize/ apply different style on it. To style it into your own design, you just have to modify the a tag CSS style. You can change colors or put background images, or the size and color of text.
Steps Adding the jQuery Drop-Down menu
Step 1.Go to Dashboard - Template - Edit HTML - Proceed
Step 2.Expand Widget Template (make a backup)
Step 3.Search for the following code:
]]>
Step 4.Add the following CSS code before/above it:
#jsddm {
height: 40px;
margin: 0;
overflow: visible;
z-index: 2;
padding: 15px;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#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: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}
Step 5.Now find this piece of code:
Step 6.Add this code immediately before/ABOVE it:
Step 7. Click onSave Templatebutton.
Step 8.Go to Layout > click on "Add a gadget" link
Step 9.Choose HTML/JavaScript from the pop-up window
Step 10.Paste the following code in the empty box:
Note :
You must change links titles and replace the # symbol with the URL address of each of your links
Step 11.Click on Save
Important:
- if your menu is on the sidebar, or footer, just drag it to your page header and click and click Save again.
- if drop down links are not showing, do the following:
Go back to Template > Edit HTML and search (CTRL + F) for this code:
You should change1with3andnowithyeslike this:
Save the Template.
Next thing to do is to go to Layout and drag your menu immediately below your header
Then click on Save Arrangement
Here you can see the DEMO.
Enjoy! :)
Like
1
Random Posts
How To Add Social Media Icons to Blogger Header26/05/2013 - 70 Comments
How To Remove Blogger Attribution Gadget22/03/2012 - 130 Comments
Add a Custom jQuery Lightbox To Blogger09/03/2014 - 2 Comments
Related Posts:
Fading Box With Newer/Older Posts L...
How To Add A Tabbed Navigation Widg...
A Beautiful jQuery Drop-Down Menu F...
How to Replace Older Posts and Newe...
How to Add Numbered Page Navigation...
24 comments:
gk vook 5/16/2012
Nice post i used this in my blog Thanks a lot sir...
gkvook.blogspot.in Reply
Anonymous 6/11/2012
You are a genius and I think I love you right now. Every code I've come across refers to the old Blogger interface, which I don't have access to, and I haven't figured out the new one yet. Thank you for posting this! Reply
Replies
Admin 6/12/2012
Glad it was useful to you :) Thanks for visiting
Mohit Gupta 7/01/2012
i was unable to do it..the drop down did not show on my blog..help!!
Clover Luv Station 8/05/2012
thanks for the information. I manage to do this on my blog but the drop down doesn't show as yours. My one shown in line not in list 1 by 1. Please help me, thanks. Reply
Replies
Admin 8/09/2012
Please drag the widget below your header, then save the arrangement.
See the screenshot
Jessica 8/21/2012
This is fantastic! I'm just having one problem: When I place the widget at the side of the page, the dropdown menu works fine, but when I move it to the top, the drop-down menu looks like it's behind my blog posts and the menu items are obscured. I tried moving it higher, but it just gets obscured by whatever is below it on the page. What might be causing this? Reply
Replies
Vinod Mishra 1/04/2013
Just replace the upper part of the code
#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}
with the following code
#jsddm {
height: 50px;
margin: 0;
overflow: visible;
padding: 15px;
position: relative;
z-index: 2;
}
It worked for me, hope that it works for you. Check out my blog at www.healthysip.com
Sukamal Ghosh 10/11/2012
It is awesome, I have used it.
thanks bro. Reply
Ioana Liliana 10/17/2012
My drop down links aren't showing either... anything we can do to fix it? Reply
Rhonda Nelsen 10/19/2012
You are the TRUE master! First time I have done something like this, I was so scared. Thanks so much!!!! Reply
Ankita Vaidya 12/18/2012
Thank you so much for this! I have used it on my blog. I just wanted to ask how do i change the color of tabs? The light blue is descent but doesnt go with my blog background! So if u can help me out with that.. pls!
Thanks!
nice work btw! Reply
Electrical Technology 3/06/2013
thanx dear..i did same....but drop down links are not showing..some of links are not showing or hidden..you can see..plzhelp..
http://eeetblog.blogspot.c om/ Reply
Ean Behr 3/07/2013
On another tutorial I discovered that you have to go back into the HTML and where you see blogger's section for tabs, which looks like this: /*TABS_______________*/ followed by a block of code, you have to move the */ to the end of it. Otherwise blogger's code overwrites yours. I hade the same problem and this fixed it.
I have another issue. I can't find a dropdown menu, including this one, that highlights the active page. Visitors have no way of knowing what page they're on. Is there a way to do this or does blogger make that impossible? Reply
Replies
Admin 3/12/2013
It is possible but it is a little bit tricky. I will make a tutorial about this as soon as possible. Sorry for the late reply.
Tharzz 3/10/2013
can i copy this tips to be translate to indonesian language? thank you Reply
Replies
Admin 3/12/2013
Only if you link back to this blog.
RainbowRider 3/30/2013
The dropdown menu shows and all of the links work fine, but it is not showing up as yours does. Have any ideas why? Reply
Malik Usman 6/21/2013
thnkx man its working Reply
Admin-Poinks 9/17/2013
I Used this CSS drop down menu for my website. I just edit what color, style,font etc. if u wanna see the changes visit this website :D
http://www.animepoinks .net/ Reply
Saskia 11/05/2013
Hi! This works great for me! But I am wondering, how can I center this? Reply
feel good 12/28/2013
i really had fun viewing your articles. thank you so much. Reply
Make.bdsm 2/09/2014
Hellow.
Everything is great, but.. the submenu does not fit and hides under the posts block. How to get out it on top? Reply
arika~ 3/10/2014
thanks darl! u make my life easier ! =* Reply
Add comment
Comment as: Sign out
Notify mePublishPreview
Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED
Search
Search
Follow on Facebook
Helplogger
Like
2,784 people like Helplogger .
Facebook social plugin
Follow on Blogger
Subscribe via Email
Receive Quality Tutorials Straight in your
Inbox by submitting your Email below.
Submit
Or subscribe via RSS Feed
Recent Posts
How to Add Numbered Page Navigation Widget for Blogger
5 Easy Ways to Improve the SEO of a blog & Boost Traffic
What is the difference between padding and margins?
Add a Custom jQuery Lightbox To Blogger
How to Use Cookies in Javascript
Recent Comments
irsah imihar
Customizing will always be easy with jquery and javascript. Even...
Missy G
Yay! Thank you for making this so easy! This is just what I...
divakar sivashankar
admin i have a problem even if i add the tag the ad is showing up...
Anonymous
I don't understand the instructions you have given :(
Nanette Benablo
your site is very helpful and easy to follow tutorials. thank you...
Popular Posts
Simple Recent Posts Widget for Blogger/Blogspot
Create A Rollover Image Effect (change image on mouseover)
Recent Comments Widget For Blogger
How to remove Blogger Picture/Image Shadow and Border
Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger
1
Like
No comments:
Post a Comment