January 24, 2010

Widgets

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 »

94 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. amazing work no word for it

    ReplyDelete
    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. Asalamualaekum. Nice tutorial bro...i have followed you to continue your post updates. I wrote about Blogger Tutorial too..., keep posting broooo^

    ReplyDelete
  27. @Iqbal

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

    ReplyDelete
  28. very2 nice... I like it...

    ReplyDelete
  29. Hi Mohammad,
    I really want to implement this in my site, bu I may have a different template. I was able to find the first tag(b:skin) but not that "sidebar-wrapper". Please help. Thank you for you time. Here is my site: http://www.adouseofinspiration.com

    ReplyDelete
  30. @john.b

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

    ReplyDelete
  31. 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
  32. @auntie_biotic
    Sorry for delay in answer! :>
    Dear find this code instead <div id='right-sidebar'> and add the code just below it.

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

    ReplyDelete
  34. http://draft.blogger.com/html?blogID=8697277360906222543

    ReplyDelete
  35. Thanks for creating this great informational resource.
    I might keep this handy for clients as well as for myself.
    flash website templates

    ReplyDelete
  36. 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
  37. @Sherman

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

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

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

    ReplyDelete
  40. id = "sidebar-wrapper-right"

    I do not see anything of Por Esto blog unable to find the width of the box, this is what he could find,

    id='sidebar-right-1'> <b:section-contents

    I have no idea where to put the html

    http://bolsaclic.blogspot.com/

    thanks in advance

    Greetings

    ReplyDelete
  41. 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
  42. Amazing !!
    You simply rockk

    ReplyDelete
  43. 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
  44. @Elizabeth

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

    ReplyDelete
  45. 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
  46. ok so im trying to put my html code in a widget on my page elements and i assume im supposed to put it on the edit html page. anyway. i cant find the div id code to put the html code under. my url is http://www.msmaggiemaymelts.blogspot.com

    ReplyDelete
  47. not compatible with thev above help mi out. thanks
    www.imcashaccelerator.blogspot.com

    ReplyDelete
  48. Nice blog..
    Here is free script for horizontal menu or vertical menu or dropdown menu or css menu or html menu.
    www.designedmenus.com

    ReplyDelete
  49. NICE BLOG.......IT HELPS ME ALOT IN MAKING MY BLOG....gowidrajput.blogspot.com

    ReplyDelete
  50. THIS was EXTREMELY helpful! Thank you!

    ReplyDelete
  51. http://freebloggertool.blogspot.com

    I found this blog yesterday !!
    Very infomation blog especialy at tutorial page...
    Thanks to the honest author of this blog (Ryan Bakh)..

    ReplyDelete
  52. it is very brillenet perfectly working
    check my blog
    http://crescentcollection.blogspot.com/

    ReplyDelete
  53. very nice ........ great job dude :)

    www.thyagu7.blogspot.com

    ReplyDelete
  54. 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
  55. http://aromalmusic.blogspot.com/ please help

    ReplyDelete
  56. Dear Sir, The information provided by you is awesome.

    My blog URL is here under:
    http://cbsnkr.blogspot.com/. I tried several times but i con't done it. kindly help me
    Regards;
    Nitin S Bilagi

    ReplyDelete
  57. Sir sorry the above mentioned blog is confidential. Hence please see the below blog and give me solution for navigation menu.
    http://rclubrodwd.blogspot.com/
    Regards;
    Nitin S Bilagi

    ReplyDelete
  58. hi brother very nice post

    i sucessfully paste the css code but in my tempilate not able to find the html pasting location can you help me on it ?
    my blog link is http://mobilesfactory.blogspot.in/
    e-mail - mobilesfactory@gmail.com

    ReplyDelete
  59. 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
  60. http://grinepk.blogspot.com/

    ReplyDelete
  61. hi ican't find the over mentioned code to put the html code

    my blog is byt3hack.blogspot.com

    bytehack.tk

    ReplyDelete
  62. I have no words for this great post such a awe-some information i got gathered. Thanks to Author.
    html5 player

    ReplyDelete
  63. I really like the complete artical and try to check it .......thanks from www.youtubeviralvideos.in

    ReplyDelete
  64. 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
  65. Salam bhai
    My blog URL is here under:
    http://nomimughal.blogspot.com. I tried several times but i con't done it. kindly help me

    ReplyDelete
  66. hi,

    can u tell the template coding of this blog

    saranphysio.blogspot.com

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

    Please!

    ReplyDelete
  68. thanks brother... i use these menu on my blog www.studentvoice.in...

    ReplyDelete
  69. http://101111111111.blogspot.com/ vie my template codes for HTML please!

    ReplyDelete
  70. www.mastihungamanews.blogspot.in

    ReplyDelete
  71. @Anupit is my url:http://ninthavurinfo.blogspot.com/ and i could not find these code , can you please help how to it!

    ReplyDelete
  72. it is not able find those codes, it is my url:http://ninthavurinfo.blogspot.com/ can you please help about this.

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

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

    ReplyDelete
  74. Well this kind of information is really worth searching for this. It’s good to have these kinds of articles around to keep the information flow steady. Helping those who really can make things right in the future, good work!
    Download free games

    ReplyDelete
  75. hi Mohammad , my blog template details are given below... please send the suitable vertical navigation menus ...

    Blogger Template Style
    Name: Watermark
    Designer: Josh Peterson
    URL: www.noaesthetic.com

    ReplyDelete
  76. sir plz help me
    your this toutorila is so help full but i dont surch the coode wahere paste this link

    My web site is
    softeze.blogspot.com

    ReplyDelete
  77. so nice lesson brother
    it is very helpful for us thanks
    your site is very helpful in pak it

    ReplyDelete
  78. Wanting to use one of these codes, but not sure where to put it in my template =p

    http://zoiik.blogspot.com

    ReplyDelete
  79. pls have a look to my site and kindly guide me as per your idea to choose which menu for my site

    http://www.allpnr.com

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

    ReplyDelete
  81. asslam o alikum! i am ibrahim. i want to use vertical navigation bar for blogger. but i can't find that codes in my blogger template. please tell me what should i do? my blog address is http://www.youtubeteacher.blogspot.com

    ReplyDelete
  82. 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

Support Us

We have educated thousands of bloggers online and made several people Make a living Online. If our Tutorials have really helped you a little, then kindly show your love by using the badge below:-

Blogger Widgets

or try a Beautiful Banner

Widgets

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. STC Network was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..

Recipes

SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics

Subscribe

Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |