25 “Vertical” Navigation Menus For Blogger – CSS-HTML Tab Menus

25 Navigation Menus Collection! After the release of 30+ Horizontal Navigation Menus, we head forward to a beautiful collection of some of the best looking vertical navigation menus that will put soul to anyone’s weblog or website! I have modified the codes made by Christopher and Highdots and have made them compatible with Blogger. I hope this collection will be of interest to most of you simply because these navigation menu tabs can easily be installed, customized and multiplied! I hope it will be of great help to new designers :>

How To Add A Vertical Navigation CSS Menu To Blogger?

Well the process is as simply as it can be. Simply follow these steps carefully,

  1. Go To Blogger > Layout > Edit HTML
  2. Back-up your template

All Navigation Menus below uses two pieces of codes. One is The CSS code which is responsible for the look and feel of the menus and the second is the HTML code which is responsible for positioning the menus. So lets know where to add each code!

    3.   Paste the CSS code for your selected Menu just above ]]></b:skin>

    4.   For the HTML code there can be two positions either your right sidebar or left sidebar. Depends how many columns you have.

  • If you have a right sidebar then paste the HTML code just below <div id='sidebar-wrapper'>  or this <div id='sidebar-wrapper-right'>
  • If you have a left sidebar then paste the HTML code just below <div id='sidebar-wrapper-left'>

Note:- Since most templates use different coding therefore if you could not find the above codes then don’t worry simply share your blog URL in the comment box and I will view your template coding and will tell you instantly which code to search for!

    5.    Finally save your template and see a beautiful Navigation Menu hanging on your sidebar :D

Editing The Links In The Navigation Menu

To change the Tab Menu Links and Titles, simply edit this bolded part of the HTML code,

<li><a href="#1" >Link 1</a></li>
<li><a href="#2" >Link 2</a></li>
<li><a href="#3" >Link 3</a></li>
<li><a href="#4" >Link 4</a></li>
<li><a href="#5" >Link5</a></li>

Replace #1, #2, #3 etc with your Page Links/URL and replace Link1, Link2, Link3 etc with your Page Titles. If you wish to add or delete a tab then simply add or delete this line from the HTML code,

 

<li><a href="#" >Link</a></li>

 

Live Demo

 

For Live Demo of Other Navigation Menus Simply use our HTML Editor and Copy and Paste the CSS and HTML code at right areas and then start playing with the code :>>

 

See Demos With MBT HTML Editor!

 

Navigation Menu #1

Navigation Menu 1 

CSS CODE:


HTML CODE:


Navigation Menu #2

Navigation Menu 2

CSS Code:


HTML Code:


Navigation Menu #3

Navigation Menu 3

CSS Code:


HTML Code:


 

Navigation Menu #4

Navigation Menu 4

CSS Code:


HTML Code:


Navigation Menu #5

Navigation Menu 5

CSS Code:


HTML Code:


Navigation Menu #6

Navigation Menu 6

CSS Code:


HTML Code:


Navigation Menu #7

Navigation Menu 7

CSS Code:


HTML Code:


Navigation Menu #8

Navigation Menu 8

CSS Code:


HTML Code:


Navigation Menu #9

Navigation Menu 9

CSS Code:


HTML Code:


Navigation Menu #10

Navigation Menu 10

CSS Code:


HTML Code:


Navigation Menu #11

Navigation Menu 11

CSS Code:


HTML Code:


Navigation Menu #12

Navigation-Menu-With-No-image-used

CSS Code:


HTML Code:


Navigation Menu #13

CSS Menu Tabs 13

CSS Code:


HTML Code:


Navigation Menu #14

CSS Menu Tabs 14

CSS Code:


HTML Code:


Navigation Menu #15

CSS Menu Tabs 15

CSS Code:


HTML Code:


Navigation Menu #16

CSS Menu Tabs 16

CSS Code:


HTML Code:


Navigation Menu #17

CSS Menu Tabs 17

CSS Code:


HTML Code:


Navigation Menu #18

 

CSS Menu Tabs 18

CSS Code:


HTML Code:


Navigation Menu #19

CSS Menu Tabs 19

CSS Code:


HTML Code:


Navigation Menu #20

CSS Menu Tabs 20

CSS Code:


HTML Code:


Navigation Menu #21

CSS Menu Tabs 21

CSS Code:


HTML Code:


Navigation Menu #22

CSS Menu Tabs 22

CSS Code:


HTML Code:

Navigation Menu #23

CSS Menu Tabs 24

CSS Code:


HTML Code:


Navigation Menu #24

 CSS Menu Tabs 25

CSS Code:


HTML Code:


Navigation Menu #25

CSS Menu Tabs 26

CSS Code:


HTML Code:



 

That’s All!

Hope you have enjoyed the post. Feel free to ask any question related to these navigation menus. I am happy I fulfilled my promise of publishing this post :>

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

52 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Replies
    1. Saya mendapatkan ilmu baru bisa berkunjung kesini
      very nice,,i,m Indonesia

      Delete
  2. Cool! But not much useful.

    ReplyDelete
  3. Hey Mohammad you are master in css

    ReplyDelete
  4. Anup, there are so many who find this useful:)

    Hi, Mohd. I appreciate you for finding time for all this in your busy schedule!!!

    Could you please have a look at this --->>
    http://bloggerstop.net/2009/03/sliding-side-menu-for-blogger-blogs.html

    You can make it better I hope....
    can u do this for me in ur style?

    ReplyDelete
  5. Mohd, I have yahoo media player coded in my template and it will find all the links with extension .mp3 and stream it directly to play in the page to I've added ur code and it has become like this..

    http://www.123tunestore.com/2010/01/play-1-link-2-link-3-link-4-link5.html

    But the text is overlaping!!!! what to do for this??

    ReplyDelete
  6. Nice article
    but i like first 3 of them very much....

    ReplyDelete
  7. I am glad most of you found it useful!

    @Anup

    I still respect your viewpoint. I will try to present more valuable articles in future. Thanks for being straight forward :>>


    @Sreejesh

    Wow they look so beautiful in your template! :> Dude kindly share. As far as overlapping issue is concerned there is only one solution and that is that you must integrate the code inside your template (both CSS and HTML) The only way is to add it to your sidebar rather a post because I have tried a lot to solve this disalignment issue but when I would try it would look fine in one browser but distorted in other. Si I finally gave up and came out with the only solution as mentioned in the post above (i.e adding it to sidebar)

    I just visited that slide menu and it is indeed a great one created by dynamic drive and introduced by Sai. But the only think that I did not like was the heavy use of JavaScript. Dude Search Engines wont crawl the links integrated into that menu and wont even find your template seo friendly. Do you still want me to provide you with a new style for that menu? :>

    ReplyDelete
  8. Yes, I too felt that it is not so seo friendly and delys loading time.. so i'll forget abt tat.

    I wanted to ask you one thing about Intense Debate Comment box (already installed in my page), would you recommend adding it in, is that good for the page or negative?

    ReplyDelete
  9. I used a different one and i think it worked!!

    http://www.123tunestore.com/2010/01/aadhavan-tamil-movie-songs.html

    but i need a play button!!

    ReplyDelete
  10. sreejesh owner bloggerstop???
    hmmm...played come here too...hihihihi

    ReplyDelete
  11. G'day,

    Have you considered drop down menus for blogger? Theres several websites such as: http://purecssmenu.com/ which claim to let you produce them but I'm unsure how to add them to blogger.

    ta

    Ralph

    ReplyDelete
  12. @sreejesh

    No one will recommend the intense debate comment system or any other just for a simple reason "Multiplies your commenting loading and posting time by 3/4th"


    @Ralph

    What that website can do has already been presented to you in this post and even in far better way :>
    Those websites are good for those who have some command over CSS and HTML but newbie will always find them complicated.

    ReplyDelete
  13. Hi Mohd...
    how are you ? long time .This is really amazing...thanks for sharing ..
    always best ...
    tc
    Manisha

    ReplyDelete
  14. Congrats. Great work.

    I am planning to use it on my blog.

    ReplyDelete
  15. @Manisha

    I am fine Manisha. Thanks for your love and care :> And thanks for the appreciation! How are you doing?

    @kunal

    You welcome pal!

    ReplyDelete
  16. Nice looking menus...I will implement them in my blogs but my blog is having a red based theme and here I don't find any red menu...Anyway thanks

    TC

    ReplyDelete
  17. Mohd I was traveling Egypt past few days just returned and as usual visited my fav website to find some new great post here... hope to implement them soon in my websites after the traveling hangover gets over ))
    how about you ...!! how Univ,studies,etc etc going ...
    KIT (keep in touch )...TC
    And u know we are following you ........>>>>
    Best wishes
    Manisha

    ReplyDelete
  18. Mohd, what about the "back to botton" button??

    ReplyDelete
  19. @Manisha

    I am sure you guys had great fun traveling. Wishing you the same joy in future. I am enjoying uni life too :p Things are improving day by day. New and interesting friends but boring teachers lol! I will let you know in detail someday via chat. I am glad you are having a splendid time with your family :> Take care you too.

    ReplyDelete
  20. good and attractive works. looking foe tabbed widget. do you have any?

    ReplyDelete
  21. very nice and clearly described

    ReplyDelete
  22. HI Mohammad, it me Robin...Again I am back hahaha
    Hope you r fine

    I am so sad. This is not working in my template. I cannot find the html codes in my blog template.
    Help me dear.

    ReplyDelete
  23. @Robin

    In your template search for this code instead,
    <div id='sidebars'>

    and paste the HTML code for your preferred menu just below <div id='sidebars'>

    Hope that would help.

    ReplyDelete
  24. Hi. It worked. But can I ask one thing. I like to relocate the ver.navigation bar. In my blog you can see the "Download Shop" widget. It is the label widget. I like to make the navigation bar below the heading Download shop. Is there any way to do so. It should be looking normally like other sidebar widgets. Can you help me?

    ReplyDelete
  25. @Robin

    Your answer is hidden in this post -> :> http://www.mybloggertricks.com/2010/01/30-horizontal-navigation-menus-for.html

    ReplyDelete
  26. @Iqbal

    You are always welcomed here bro. I just visited your blog and simply loved the +/- tree on your sidebar! :>

    ReplyDelete
  27. @john.b

    Dear search for sidebar-right in your template and add the code there.

    ReplyDelete
  28. I have copied and tried your code for Navigation Menu #19 on my blog but it did not work. Would be grateful if you could offer any advice as I dont have < id='sidebar-wrapper-left'> in my code. I will of course then link back to you as your menu are SO beautiful
    Cheers in advance http://www.bestofhulme.com

    ReplyDelete
  29. @auntie_biotic
    Sorry for delay in answer! :>
    Dear find this code instead <div id='right-sidebar'> and add the code just below it.

    ReplyDelete
  30. This comment has been removed by the author.

    ReplyDelete
  31. Whenever i see the post like your’s i feel that there are still helpful people who share information for the help of others, it must be helpful for other’s.
    thanx and good job.

    ReplyDelete
  32. @Sherman

    I would take it as a really kind complement. thank you brother :)

    ReplyDelete
  33. Im using the navigation menu #24, and it worked great with the 5 links, but when i tried to add a 6th link, it didn't worked, the link shows, but it's separated of the rest of the menu :/

    ReplyDelete
  34. I added it, it shows up on my page, but how do you then connect the linked pages? It just kind of sits there on my page dead and when I click on it, nothing happens. Thanks so much. Elizabeth

    ReplyDelete
  35. @Elizabeth

    I have explained it clearly under this heading in the post above,
    Editing The Links In The Navigation Menu

    ReplyDelete
  36. hi, i could not follow the instruction cos i dont have the code for right or left sidebar. maybe cos mine is a one column template >.< what should i do?

    ReplyDelete
  37. THIS was EXTREMELY helpful! Thank you!

    ReplyDelete
  38. I try it, but i can't succeed to complete this on my blog via blogger, plz help me to implement in my blog, thanks

    ReplyDelete
  39. hi, i could not follow the instruction cos i dont have the code for right or left sidebar. maybe cos mine is a one column template >.< what should i do?

    ReplyDelete
  40. Cool navigation menu :)

    ReplyDelete
  41. Hello, I'm new to this and would appreciate your help. I can't seem to find the above required codes in my blog HTML batch. My blog layout has a left and right column with post in middle. The URL is http://thebronxb52bomber.blogspot.com/ and my Email is Ginrosge@yahoo.com. I will like to position a vertical navigation menu on each side (left and right) below the two widgets if possible. Many Thanks

    ReplyDelete
  42. Hi, Thank for share. I want lech to my blog: batuan.info

    Please!

    ReplyDelete
  43. http://faisal-testing.blogspot.com/

    This is my blogg plz tell which code i should find for the menue in the page coding ?????

    ReplyDelete
  44. This comment has been removed by the author.

    ReplyDelete
  45. Hi. You have great designs for your navigation menu templates.

    But you would be so kind to share the codes for the navigation menu templates #2, #3, #11, #23.

    I would really appreciate it if you can send the codes at my email. ronmoises0904@gmail.com

    Thank you very much in advance! :)

    ReplyDelete
  46. Interesting info , it's just that I have a question .
    How to set the size of its length .. ?
    thank you ..

    ReplyDelete
  47. This comment has been removed by the author.

    ReplyDelete