5 Jun 2013

In , , by // 00:09 // 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. VIVEK CHARY VISHWAROJU16 June 2013 at 02:30

    hello boss where to ad css code and remaining codes?

    ReplyDelete
  2. vickythegme16 June 2013 at 22:09

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

    ReplyDelete
    Replies
    1. Unknown2 October 2013 at 23:27

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

      Delete
    2. vickythegme3 October 2013 at 09:52

      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. Anonymous19 June 2013 at 08:03

    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. Anonymous19 June 2013 at 08:32

    Nevermind, it's working :-)

    ReplyDelete
  5. Unknown24 June 2013 at 00:59

    Nice looking drop down menu with effect.

    LAtest and stylish drop down menu.

    ReplyDelete
  6. Potti Trader27 June 2013 at 10:27

    you are awesome. it works fantasitcally for me

    ReplyDelete
  7. Easy Teasy9 July 2013 at 04:44

    every thing is ok but drop down not coming out

    ReplyDelete
  8. vickythegme9 July 2013 at 04:49

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

    ReplyDelete
  9. Arun Prasath9 July 2013 at 07:53

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

    ReplyDelete
  10. Unknown10 July 2013 at 09:23

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

    ReplyDelete
  11. vickythegme10 July 2013 at 10:27

    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
  12. Anonymous16 July 2013 at 12:24

    how do I change the font?

    ReplyDelete
  13. vickythegme16 July 2013 at 20:24

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

    ReplyDelete
  14. gobizen23 July 2013 at 02:24

    thanks its great to add , scroll

    ReplyDelete
  15. Balitaw23 July 2013 at 22:47

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

    ReplyDelete
  16. vickythegme24 July 2013 at 02:21

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

    ReplyDelete
  17. saurabh verma25 July 2013 at 08:43

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

    ReplyDelete
  18. Anonymous26 July 2013 at 03:53

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

    ReplyDelete
  19. tanishalynne26 July 2013 at 20:21

    doesn't work for me

    ReplyDelete
  20. Anonymous30 July 2013 at 09:02

    Its working for me,

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

    ReplyDelete
  21. vickythegme30 July 2013 at 09:44

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

    ReplyDelete
  22. saurabh verma4 August 2013 at 23:40

    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
  23. vickythegme5 August 2013 at 00:41

    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
  24. saurabh verma8 August 2013 at 03:47

    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. vickythegme16 August 2013 at 18:33

      The sub-category links are working properly. :)

      Delete
    2. saurabh verma17 August 2013 at 02:06

      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
  25. Annabelle Jessica16 August 2013 at 08:06

    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. vickythegme16 August 2013 at 18:28

      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
  26. Unknown10 September 2013 at 09:32

    ts not working to me
    please help me

    ReplyDelete
    Replies
    1. vickythegme10 September 2013 at 18:18

      can you tell me what exactly your problem is?

      Delete
  27. SPENELO11 September 2013 at 03:00

    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. vickythegme11 September 2013 at 18:13

      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. SPENELO13 September 2013 at 00:30

      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
  28. Ram Verma17 October 2013 at 13:45

    i like this post...........

    ReplyDelete
  29. Unknown20 October 2013 at 00:33

    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. vickythegme20 October 2013 at 06:24

      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
  30. Unknown21 October 2013 at 22:34

    but there is no option for edit in template layout

    ReplyDelete
  31. Unknown21 October 2013 at 22:41

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

    ReplyDelete
    Replies
    1. vickythegme22 October 2013 at 09:48

      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. Unknown25 October 2013 at 04:22

      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. vickythegme25 October 2013 at 10:44

      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. Unknown25 October 2013 at 14:26

      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. vickythegme25 October 2013 at 19:04

      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
  32. Ataur Rahman22 October 2013 at 03:05

    Nice code for new blogger. Thanks for your code.

    ReplyDelete
  33. Pepper23 October 2013 at 07:02

    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. Pepper23 October 2013 at 10:02

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

      Delete
    2. vickythegme23 October 2013 at 10:04

      Glad it worked for you..:)

      Delete
  34. Unknown24 October 2013 at 02: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. vickythegme24 October 2013 at 10:25

      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. Unknown25 October 2013 at 09:14

      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. vickythegme25 October 2013 at 10:49

      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
  35. Unknown25 October 2013 at 04:50

    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
  36. adsense master29 October 2013 at 07:00

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

    ReplyDelete
  37. Anonymous1 November 2013 at 05:52

    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. vickythegme1 November 2013 at 06:05

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

      Delete
  38. Anonymous2 November 2013 at 12:57

    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
  39. Unknown6 November 2013 at 06:42

    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. vickythegme6 November 2013 at 07:58

      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
  40. Unknown11 December 2013 at 09:19

    It's work for Me Thanks!!!

    ReplyDelete
  41. Unknown11 December 2013 at 09:23

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

    ReplyDelete
  42. Unknown29 December 2013 at 23:35

    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
  43. vickythegme30 December 2013 at 01:55

    Could you tell me where you got stuck at ?

    ReplyDelete
  44. Unknown26 February 2014 at 01:50

    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. vickythegme26 February 2014 at 02:02

      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
  45. Unknown26 February 2014 at 02:19

    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. vickythegme26 February 2014 at 02:47

      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
  46. PPR InfoTech Pvt. Ltd8 April 2014 at 21:41

    Quality blog, keep up the good work.

    ReplyDelete
  47. Rumbling Tummy9 May 2014 at 21:12

    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. vickythegme10 May 2014 at 03:10

      Hi Edith,

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

      Delete
  48. Android app development17 July 2014 at 04:42

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

    ReplyDelete
  49. Swapnil Kharche20 January 2015 at 02:40

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

    ReplyDelete

Copyright © 2020 Techlanes