5 Jun 2013

// // 73 comments so far

How to create Drop Down Menu for Blogger Blog


Drop Down Menu for Blogger blogs

 
 Tired of using the default menu features of the blogger blogs? Blogger allows you to use its default menu features according to the template you are currently using. There is no default navigation menu bar in blogger. I am using Blogger for more than a year and I have also tried creating a drop down menu bar on my blog too.

When I were using the blogger earlier days for my blogs, I tried creating and implementing the drop down menu css codes. Finally, I designed a drop down menu tab for my blog. Later on, I reminded myself today that I could make a blog post out of it and also it will help other people out there too.
The above is the sample design for the menu bar.
Here is the CSS Code for your blogger drop down menu.

 <style type="text/css">  
 #vicnav {  
 background:#CC0000;  
 border-bottom: 5px solid #993300;  
 border-top: 1px solid #e14d09;  
 clear: both;  
 overflow: hidden;  
 }  
 #vicnav ul {  
 float: left;  
 width: 100%;  
 }  
 #vicnav li {  
 float: left;  
 list-style-type: none;  
 }  
 #vicnav li a {  
 background:#CC0000;  
 color: #fff;  
 display: block;  
 font-size: 14px;  
 padding: 5px 17px 5px 15px;  
 position: relative;  
 text-decoration: none;  
 }  
 #vicnav li a:hover {  
 background:#990000;  
 color: #fff;  
 }  
 #vicnav li li a {  
 background: none;  
 background-color: #9c1a03;  
 border: 1px solid #990000;  
 border-top-width: 0;  
 color: #fff;  
 font-size: 14px;  
 padding: 5px 10px;  
 position: relative;  
 text-transform: none;  
 width: 130px;  
 }  
 #vicnav li li a:hover {  
 background: none;  
 background-color: #CC0000;  
 }  
 #vicnav li ul {  
 height: auto;  
 left: -9999px;  
 margin: 0 0 0 -1px;  
 position: absolute;  
 width: 160px;  
 z-index: 9999;  
 }  
 #vicnav li:hover ul {  
 left: auto;  
 }  
 </style>  

I have also attached the HTML sample code below for the CSS so that its easy to understand.

 <body>  
 <ul id="vicnav">  
 <li ><a href="#" >Home</a></li>  
 <li ><a href="#" >Sub Menu Indicator</a>  
 <ul >  
 <li ><a href="#" >Wrap Menu 1</a></li>  
 <li ><a href="#" >Wrap Menu 2</a></li>  
 <li ><a href="#" >Wrap Menu 3</a></li>  
 </ul >  
 </li ><!--li close of Sub Menu Indicator-->  
 <li ><a href="#" >MenuTab 3</a>  
 <ul >  
 <li ><a href="#" >Wrap Menu 1</a></li>  
 <li ><a href="#" >Wrap Menu 2</a></li>  
 <li ><a href="#" >Wrap Menu 3</a></li>  
 </ul >  
 </li><!--li close of MenuTab3-->  
 <li ><a href="#" >MenuTab 4</a></li>  
 <li ><a href="#" >MenuTab 5</a></li>  
 </ul >  
 </body >  

The Above code will create a simple drop down menu with complete CSS effects.

The HTML code above needs nothing but the input link to the post or page that you want to. If you need to show the hover link or current link with different colors, you can change the color  in background: #color in any id and try it.

Let me know if you have any changes or difficulties that you find in the code or may be if any errors.

Also view our another drop down menu with circular menu lists drop down. Hope you might be interested in it as well.

73 comments:

  1. hello boss where to ad css code and remaining codes?

    ReplyDelete
  2. Add the CSS code inside the head tag and add the remaining codes on the body tag of your HTML page.

    ReplyDelete
    Replies
    1. Hi, i didn't get where to post this code in blogger,could u pls help?

      Delete
    2. Place the CSS code before closing the head and then place the ul list after the header div to show the menu after the header.

      Delete
  3. I must be doing something wrong. I copied, pasted, and added links to # but the links aren't active nor are the menus dropping down.

    ReplyDelete
  4. Nevermind, it's working :-)

    ReplyDelete
  5. you are awesome. it works fantasitcally for me

    ReplyDelete
  6. every thing is ok but drop down not coming out

    ReplyDelete
  7. You must be missing something somewhere. Can you tell me where you've gone wrong?

    ReplyDelete
  8. That's great. It's working for me :)

    ReplyDelete
  9. It worked for me but how can i add post into the menu?

    ReplyDelete
  10. You have to replace the "wrap menu1" to your post name and add your post's link to the anchor tag with respect to the above code.

    ReplyDelete
  11. how do I change the font?

    ReplyDelete
  12. You can change the font by adding font-family style for UL id.

    ReplyDelete
  13. thanks its great to add , scroll

    ReplyDelete
  14. pls help me, only one submenu showed up . here s my link
    http://candicesalzar.blogspot.ca/

    ReplyDelete
  15. Seems like its working. You have to add links to the wrap menu just like you added for the first one.

    ReplyDelete
  16. THANKS SIR!!! IT WORKED PERFECTLY FOR ME. :)

    ReplyDelete
  17. I have tried your menu and works really well on Chrome and Opera however it doesn't work on IE8
    Any suggestions?

    ReplyDelete
  18. Its working for me,

    But i dont know how tag/link that to the Post,Please help me.

    ReplyDelete
  19. Change the # at the href attribute to your post's link.

    ReplyDelete
  20. SIR, it worked perfectly fine for me. however i want to do some customization. sir can you please tell me how can i change the color of this link bar ??? so also tell me how to create sub0- catgories and make further sub-divisions of sub-menus

    ReplyDelete
  21. You can change the color by changing the background property in CSS for the list items. Sub categories can be created by adding an ul tag inside the sub li tag.

    ReplyDelete
  22. sir i tried to make sub-categories as u said , but i haveseemed to messed it all up. p,ease have a look at the sub-categories. they are not opening properly. www.army-a-dream.blogspot.com

    ReplyDelete
    Replies
    1. The sub-category links are working properly. :)

      Delete
    2. sir, i have added the sub-categories and they are working too. however i want to ask you that i their any way with the help of which i can even divide these sub categories

      Delete
  23. This is really great thanks! I just have one question...I have changed the design and now have white lines between each tab? Is there any way to remove this? My blog is www.annabellejessica.com if you would like to look. Thanks :)

    ReplyDelete
    Replies
    1. I visited your site. It is may be because of the white background or may be if you're trying to use with tables. I can't really say. BTW, It looks nice with the white lines in between though. :)

      Delete
  24. ts not working to me
    please help me

    ReplyDelete
    Replies
    1. can you tell me what exactly your problem is?

      Delete
  25. Hi there. After struggling long to get this right with many tutorials, I finally got very close to getting it right with your tut. Just a few questions:

    - my blog is at http://www.randomarbjects.net/, I still have my old pages there, as I'm still testing these new drop-down ones, ignore them.
    - the drop down only appears if I hover just above the text. I tried to copy over your template but I might have changed something to make it do this.

    - and when you do hover, and the drop down menu appears, and you try to go to one of the options, it disappears. :(

    - also, I'd like have the new menu in the same position where the current one is, once it's fully funtional. Where do I put it in my code to achieve this? Also, I'd like it centred.

    Looking forward to hear from you and thanks again!

    ReplyDelete
    Replies
    1. Hi Spenelo., I visited your blog. It seems to be working fine. And if you'd want to have the menu at the center, try placing the whole ul list inside a div setting align=center.

      Delete
    2. Thanks Vicky, after I sent you that, I played around more and almost got it to work right. Just need to change the look of it because it's pulling the template's (parent's) css for the curved edges.

      But thanks for this blogpost, I have another blog that's still new that I'm going to apply it to as well!

      You rock!

      Delete
  26. does not proper working on my blog plz check at shivamnarula.blogspot.in I want to add submenu on top menu ( language) in my site,but submenu is showing in another page.

    ReplyDelete
    Replies
    1. You've placed the code in the language page. You should place the code in the template layout where you've your menu code already.

      Delete
  27. but there is no option for edit in template layout

    ReplyDelete
  28. i have gone to template->then layout->then there are two option for changing body layout and footer layout

    ReplyDelete
    Replies
    1. You should go to Template->Edit HTML and then search for your current menu code. Then replace them with the new menu and also the css to be placed before closing style tag.

      Delete
    2. Hi Vicky, you wrote:
      >You should go to Template->Edit HTML and then search for your current menu code.
      >Then replace them with the new menu and also the css to be placed before closing style tag.

      ... I followed your advice and went to "Edit HTML". I got a lot of code and I did a search on it.
      Unfortunately, I cannot find the word "menu" in the code, or the the names of my current page headers,
      e.g. "InOutContact". The code for the "Pages" gadget that I am using in Blogger does not seem to
      be in the general Templet. I am a confused newbie, who would like to have your nice pull-down menus.

      Many thanks Tom

      Delete
    3. Hi Tom, Search for your current menu name eg: like Home etc.,, then replace the whole menu code with the menu here. Then add the css code just before ending the style tag.

      Delete
    4. Hi Vicky, sorry I need your help again, I just can't find the location in the code? Here the steps I am going through:
      1) Blogger|My blogs|Template| Edit HTML (website is www.inoutsignal.com)
      2) I get a editor window with 2732 lines of code (on top there is a "Jump to widget" menu)
      3) Click into the code window and use cntr+F to open text search and search for e.g. "InOutHome" or "InOutContact", which are two of my pages, listed at the Pages-bar. I do NOT get a search result, these words are not in the code?
      4) I use the "Jump to widget" menu and select "PageList1", which seems to be the Pages widget, again I search for "InOutHome" but I cannot find anything? Where is the code for Pages widget?

      One more question: what is the difference betweeen your CSS and HTML code above? Which code should be use in the blogger HTML editor? I guessed the HTML code, but you stated to insert the CSS code before the ending of the style tag. Quite confusing for the average Joe ;)

      Thanks for your help Tom

      Delete
    5. Hi Tom.,
      Else you paste the style code anywhere before ending the head tag. Then Search for "widget id='header1'" and add the menu HTML code after the header widget section finishes.

      Delete
  29. Nice code for new blogger. Thanks for your code.

    ReplyDelete
  30. I would like the menu bar to be centered and I'm having a little trouble with it. I tried placing the ul in a div set to center like you suggested, but for some bizzare reason it is only centering the items within the sub-menus, not the main menu items. Any thoughts?

    ReplyDelete
    Replies
    1. Actually, I figured it out. You have to set a width on the div and use margin:auto.

      Delete
  31. Hi there, I love this post, very informative but I'm not very techy so still trying to figure it all out. I can't copy and paste the code unfortunately so doing it from scratch. I'm finding the second code easier to understand than the first. I have some questions so please try to answer simply for me :)

    For this piece of code (on the second one) it says: < / li > < !-- li close of Sub Menu Indicator -->
    What do I change here? Do I put the link of the sub menu here I presume? But where? An example would be great.

    And as for the top code I'm really confused as to what I change (apart from the colour etc). I don't know where to put the links for the pages or what it means when it says li li a and li ul. I know ul breaks a drop menu from another one but please show me an example of what you put in that code.

    I've only been familiar with this kind of code for a few days so bear with me.

    Thanks :)

    ReplyDelete
    Replies
    1. Hi Amy, For the li piece of code after Home, you have to put the sub menu link at Sub Menu Indicator and then change the links inside the li for sub menus.
      Since you asked for an example, I just created a jsfiddle now. Have a look at it.

      Delete
    2. Hey, thanks for your hard work. I managed to do it but I want to change the font and colour. When I went onto template>HTML and searched for the colour code #464849 for example (I used a different colour), it didn't find it. I went through it manually and found the text I had copied and pasted has vanished. So how do I change the colours now? And the font?

      Thanks

      Delete
    3. Does the menu appear in your page. If yes, then search for the style with the id name like #vicnav and you'll see the code to change the color and font.

      Delete
  32. Hi all, after some fiddling around with jsfiddle was able to create multiple sub-menus, see http://jsfiddle.net/W2kDz/31/ . Now the question is, how to use this code and where to put it in blogger?

    ReplyDelete
  33. that is sure a whole lot of codes to use on www.wesaytech.com. will try it though

    ReplyDelete
  34. hi my name is justina. thanks so much for your help.i tried your method and it worked but the problem is 1. rearranging i(i dont want it to be at the head) 2. posting link(i dont understand the way you explained it here). how do i check my post url?

    ReplyDelete
    Replies
    1. I dont quite understand with your problem 1.
      for problem 2 you can change the # in the anchor tag with your post url.

      Delete
  35. Geez, could you please give the EXACT code for centering this????? I don't understand your instructions above about the ul in the div. Nothing is working. Without the centering this code is USELESS!

    ReplyDelete
  36. hey dear, its me again. i have been able to correct the problem about page placement. what i am having problem doing is trying to create pages for each category in d drop down menu. for example i have a products blog and i want sub categories under the menu bar PRODUCTS CATELOG. in one of the drop-down menus i have FASHION then TECH and so on. how do i arrange it so that when i click on fashion it lead my readers to just the fashion posts and so on. i will be so grateful if u help me solve this

    ReplyDelete
    Replies
    1. Okay. So if you've a drop down for FASHION, then just add the link of your fashion tag or label so that it ll lead to only posts that are tagged in FASHION and so does for TECH. etc.,

      Delete
  37. It's work for Me Thanks!!!
    http://generasimahakam.blogspot.com/

    ReplyDelete
  38. Hi friend, I could not understand the code you shown above. Please help me to create drop-down menu navigation when the curser point is brought near the page that needs to show multiple links for navigation.
    Make Money Online Offline At Home

    ReplyDelete
  39. Could you tell me where you got stuck at ?

    ReplyDelete
  40. Hi, I have applied the same logic and drop down menu could see .But when I go to click on drop down menu it just disappears. Please help me in this issue.
    http://marutistotra.blogspot.in/

    ReplyDelete
    Replies
    1. Hi.. I tried the menu in your blog. It works fine, I clicked the drop down link which is linked to some other blog. Could you tell me exactly what issues are you having?

      Delete
  41. Main menu works fine.But When I go to click on drop down menu, the submenu just disappears.So couldn't click on submenu links.

    ReplyDelete
    Replies
    1. I checked your blog again and I am able to click the sub menu link (eg: Puree and Store ->Tools for Baby Food) which is rooted to babyfoodformom.blogspot.in !! I couldn't find any problem in that.

      Delete
  42. Quality blog, keep up the good work.

    ReplyDelete
  43. I tried doing drop down menu http://rumblingtummy23.blogspot.sg/ and I wanted to wrap text. How do I do it? thanks.

    ReplyDelete
    Replies
    1. Hi Edith,

      You can use the css property "word-wrap:break-word;" to wrap the text in the menu. :)

      Delete
  44. Hi,
    Its very useful for me, finally i got good code and applied for my blogger..

    ReplyDelete
  45. Thats Great Article. Its a very useful me to my blog.

    ReplyDelete