Vertical Sidebar Menu For Blogger


vertical sidebar menuTwo days ago we learnt an easy way to create a horizontal drop down menu with multi levels and today we will use exact same script and coding to create a vertical sidebar menu which could be fitted in any blog sidebar. We will again use some delicious CSS3 effects combined with JavaScript functions (for smooth slide effects) to craft a menu that may suit and blend any blog background. It will help you better organize your blog labels or categories thus providing visitors with better and easy navigation. The installation steps are as usual kept extremely simply. Kindly first view a demo,

 

Tip: To view demo copy and paste the entire code of step#3 inside MBT HTML Editor. Click the link below to open MBT editor.

Add Sidebar Menu to Blogger

All widgets that we share on this blog can also be added to wordpress. there is only a difference of adding the codes at the right place, so wordpress users can try any of our widgets to customize there php based layouts.

  1. Go To Blogger > Design
  2. Choose HTML/Javascript Widget. Choose this gadget from the sidebar section inside your layout
  3. Paste the following code inside it,

<script src='http://mybloggertricks.googlecode.com/files/dropdownddlevel.js' type='text/javascript'></script>
<style>
/* ######### Sidebar Menu by www.MyBloggerTricks.com ######### */

.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}

.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}

.ddsubmenustyle li a{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: #000000;
background-color: #FFFFE0;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}

* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}

.ddsubmenustyle li a:hover{
background-color: #000000;
color: #ffffff;
}

.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}

.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}

.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}

 

/* ######### Vertical Menu ######### */

.markermenu{
width: 175px; /*width of side bar menu*/
clear: left;
position: relative;

}

.markermenu ul{
list-style-type: none;
margin: 5px 0;
padding: 0;
border: 1px solid #9A9A9A;
}

.markermenu ul li a{
background: #F2F2F2 url(http://2.bp.blogspot.com/-iqYq70P-LtU/T2YgqBSJzCI/AAAAAAAAGGY/cl6QgaRIGQY/s400/bulletlist.gif) no-repeat 3px center;
font: bold 13px "Lucida Grande", "Trebuchet MS" ;color: #00014e;
display: block;
width: auto;
padding: 3px 0;
padding-left: 20px;
text-decoration: none;
border-bottom: 1px solid #B5B5B5;
}

* html .markermenu ul li a{ /*IE6 hack*/
width: 155px;
}

.markermenu ul li a:visited, .markermenu ul li a:active{
color: #00014e;
}

.markermenu ul li a:hover, .markermenu ul li a.selected{
color: #ffffff;
background-color: #000000;
}

 

</style>

<div id="ddsidemenubar" class="markermenu">

<ul>
<li><a href="#">LINK1</a></li>
<li><a href="#" rel="ddsubmenuside1">LINK2</a></li>
<li><a href="#" rel="ddsubmenuside2">LINK3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#" rel="ddsubmenuside3">LINK5</a></li>
</ul>

</div>


<script type="text/javascript">
ddlevelsmenu.setup("ddsidemenubar", "sidebar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>

<ul id="ddsubmenuside1" class="ddsubmenustyle blackwhite">

<li><a href='#'>LINK2 ITEM 1</a></li>
<li><a href='#'>LINK2 ITEM 2</a>
<ul>
<li><a href='#'>LINK2 ITEM 2.1</a></li>
<li><a href='#'>LINK2 ITEM 2.2</a></li>
</ul>

</li>
<li><a href='#'>LINK2 ITEM 3</a>
<ul>
<li><a href='#'>LINK2 ITEM 3.1</a></li>

</ul>

</li>

<li><a href='#'>LINK2 ITEM 4</a></li>

</ul>

 

<ul id="ddsubmenuside2" class="ddsubmenustyle blackwhite">

<li><a href='#'>LINK3 ITEM 1</a></li>
<li><a href='#'>LINK3 ITEM 2</a></li>
<li><a href='#'>LINK3 ITEM 3</a>
<ul>
<li><a href='#'>LINK3 ITEM 3.1</a></li>

<li><a href='#'>LINK3 ITEM 3.2</a></li>
<li><a href='#'>LINK3 ITEM 3.3</a></li>
<li><a href='#'>LINK3 ITEM 3.4</a></li>
</ul>
</li>
<li><a href='#'>LINK3 ITEM 4</a></li>
<li><a href='#'>LINK3 ITEM 5</a>
<ul>

<li><a href='#'>LINK3 ITEM 5.1</a></li>
<li><a href='#'>LINK3 ITEM 5.2</a>
<ul>
<li><a href='#'>LINK3 ITEM 5.2 1</a></li>
<li><a href='#'>LINK3 ITEM 5.2 2</a></li>
<li><a href='#'>LINK3 ITEM 5.2 3</a></li>

</ul>
</li>
</ul>
</li>
<li><a href='#'>LINK3 ITEM 6</a></li>
</ul>

<ul id="ddsubmenuside3" class="ddsubmenustyle blackwhite">

<li><a href='#'>LINK5 ITEM 1</a></li>
<li><a href='#'>LINK5 ITEM 2</a></li>

<li><a href='#'>LINK5 ITEM 3</a></li>
<li><a href='#'>LINK5 ITEM 4</a></li>
<li><a href='#'>LINK5 ITEM 5</a></li>
</ul>

Make these important changes:

  • Replace the # symbols everywhere with respective page links
  • Replace the bolded black texts with Page Titles
  • To create a sub slidemenu inside a Main Menu link simply add  a rel attribute like rel="ddsubmenuside1Change the drop down number of slidemenu accordingly.
  • Normal HTML li and ul rules apply here to create sub slidemenu and sub sub slidemenu links.
  • Main links are mentioned first and sub slidemenu links are mentioned separately after the JavaScript call function.
  • To change the background colour of menu edit #F2F2F2
  • To change the width, background color and font color of the sub slidemenu edit respectively      #FFFFE0       ,      #000000     and    170px
  • To change background colour and font colour in mouse hover mode edit #ffffff and  #000000 

          4. Save your widget

          5.  All done!

Visit your blogs and look at your blog sidebar to see it working just fine.

Need Help?

The steps are really easy and self explanatory, however if your troubled your self then do not panic and feel free to call us for assistance by posting your queries below. I hope this new menu style may add a fresh zeal to your blog. Peace and blessings pals! :)

Need Quick Help within 24 Hours? ASK NOW



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 »

38 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. awesome menu bar.
    Many times ago i have search in Google to finding this type of menu.
    Now i am interested to use this menu in my site: Blogging Tips.

    ReplyDelete
    Replies
    1. Please give me some advise how to handle it on My Blog.
      It doesnt work.

      Delete
  2. Good Work Mohammad Bhai. I Need This In My Project :)

    ReplyDelete
  3. Check the mails bro... Check the mails :P

    And whats the point of having this in sidebar.. I mean when the sub category is expanded, will it go outside the sidebar??

    ReplyDelete
  4. This menu does has good effects sir, but can it be made little more good looking!

    Thanks
    Regards
    Pradeep

    ReplyDelete
  5. how to decrease our blogs external link and increase internal links? please help

    ReplyDelete
  6. hey..thanks for sharing such awesome widget...but little prob. that i want to change the width of this widget and i change it in html from 170px to 300px but...the width of this gadget is not chaning when i refresh my blog.. my blog url is My Blog

    ReplyDelete
  7. It's a nice post and your blog has helped me lot in understanding about blogging....
    Thanx pal !!!!

    ReplyDelete
  8. @kingU
    yeah..now its working...thanks for such a informative post..

    ReplyDelete
  9. let me give it a go and I'll let you know

    solar panels

    ReplyDelete
  10. Bro Nice one again i need to ask you a question. see www.mobidasher.com here i have drop down list in vertical how i can change this vertical in to horizontal..means instead of list..arranged one after the other Example Games,Apps,News Please tell how i can do that.thanks and it is a wordpress blog

    ReplyDelete
  11. Hello, it´s nice but I cant make it work in IE, there is no problem in firefox, only in IE. Can you help me?

    ReplyDelete
  12. Dear Mustafa Bhai..
    i am facing a problem. my blog is http://paktv92.blogspot.com/
    when i share any post of my blog on facebook, show only post url in preview, not post tittle or post thumbnail. even i changed many templates. but problem is still.
    please help me.
    Sample.. http://1.bp.blogspot.com/-i29nbuVOh_w/T2j8W_LLOAI/AAAAAAAAAQ8/a8dkEK3AAek/s1600/123.jpg

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

    ReplyDelete
  14. Woow... Nice Post and Your Blog Has Helped Me Lot In Understanding About Blogging.. Thanks For Sharing Such Awesome Widget..

    ReplyDelete
  15. @mohantly @TecheHow

    My pleasure brothers. I am glad you found it helpful and useful. :)


    @bhavesh

    Really sorry for being out of touch bhavesh. I will surely check them whenever free. Some people are using old classic blogger templates and this menu will add value to their blog. Most important for blogs with three columns this menu could be useful. Its just the owners choice else the standard style is the horizontal one.

    It will surely go out of sidebar but that is ok since I have added z-index attribute which will keep it forefront

    @Pradeep
    Sure CSS3 will play wonders. I have kept CSS editable. You just need to play with it :)

    @kainat
    Please keep off-topic questions away.
    Keep linking previous related posts on your new posts to increase internal links. Do not link low quality websites in order to decrease external links. Link external sites only when required. Please read When should you add nofollow to external links?


    @Freguesia de Espinheiro

    Please attach a link to screenshot so that I could help

    @hotnews

    Most welcomed pal. :)

    ReplyDelete
  16. Hi Mohammad,

    First of all thanks! I've been looking for this! Question: The menu is encroaching on my blog post space, how do I shift it over to the left? How do I adjust the width of the menu (not the submenus)? My blog is http://solvent-green.blogspot.com/. Thanks for the help!

    ReplyDelete
  17. Am currently playing with this code to make it match my blog (been looking for a drop down menu for the side bar for ages...thank you)..i have everything coloured to suit bar the red arrows...how can i change the colour of the arrow please?

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

    ReplyDelete
  19. Spent 2 days setting this up on my blog...went to finish adding the last of the links this afternoon and blogger has stripped all the coding...there's no drop down menu just a long list of links that i had already put in. when i checked the code it was a right mess, all the above bar my links was gone, and there had been some extra added to the links with redirect? and blogid=???? stuck before my actual link...what happened and why i do not know but i have to start all over again!

    ReplyDelete
  20. Hi dude, Ur site is very informational.Just had a query, right now I don't need drop down menu but I am using the Pages widget on blogger.I want to keep my menu horizontal only.The problem I was facing is that the page tabs on the right end don't click once I put my mouse over it.Tried adjusting the widths but it didn't help.Plus wanted to ask if I could add more pages & will I be able to click them? My blog link is www.thelaughingmessiah.blogspot.com check the "Hire me"

    ReplyDelete
  21. Salam,

    Can you please check out this site and tell me what can I do to remove the second sidebar? I did it as per your instruction I don't know why there is a second sidebar menu right there. Please help.

    ReplyDelete
  22. Can we use this to make more than one category in one blog? I've tried to use it for two different categories, but seems they conflicting each other so that one category fail to show its submenu (the arrow didn't show up).

    Thanks

    ReplyDelete
  23. had your sidebar menu on my blog for ages now, it has been working perfectly until today, for some reason there is no longer any drop down menus appearing, no arrows..nothing! I haven't changed anything so don't know whether this is a code problem or Blogger making changes that have affected the code but it no longer works!..any ideas?

    ReplyDelete
  24. same problem here with Janice, any help please, thanks!

    ReplyDelete
  25. @Rey Carbonell

    same issue for me. The menu refers to their own script from their website, and I'm assuming the script was moved or deleted and therefor the whole menu stopped working. I contacted them a few times with no response.

    ReplyDelete
  26. Hey this is a great post! Can i ask something that i try to achieve? Can i possibly create such a menu but have more than one submenus aligned in-line? Thanks in advance!

    ReplyDelete
  27. hi there.. :)
    why this vertical sidebar menu didn't function for drop down?

    ReplyDelete
  28. Hi, this menudoes not work on my Blog. I can see only the first level of the listed items, no way to open sublevels. I tried everything including kepping everything as is in the script with only exchange of # symbols for URLs. It does not work anyway so I thunk there is no mistake on my side. Can you help, please? Thanks.

    ReplyDelete
  29. how to add menu on left side on my blog..? i want this menu on width or gaggat ber on the blog..http://www.techliken.com/

    ReplyDelete