Two days ago we learnt an easy way to create a [a href="http://www.mybloggertricks.com/2012/03/multi-level-drop-down-menu-for-blogger.html" target="_blank"]horizontal drop down menu[/a] 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.
- Go To Blogger > Design
- Choose HTML/Javascript Widget. Choose this gadget from the sidebar section inside your layout
- 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq1p_79N_09WiJP1aBBydKrv7c0y7JhvhZoFj-9ZjWZDGsbCrsHFBCdYbBr-bfzmhvy9BMs3IbNqCqunPIPCFo75rwK02F7WdyK9Qvj12-7zwV30Zh0yGF6DtgR9TlJjm-NHJzeWBJmYw/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! :)
Post a Comment