--> Vertical Sidebar Menu For Blogger | Experience Lab - Online business creation and development guide for bloggers and startups

Vertical Sidebar Menu For Blogger

Two 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 codi...

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpnq611AVRoMbTw1dm9TdZhKQA322pMFUUkv-hIJLXIcyTlQW11Y6D00Ci0FEsJX_d-N_gGq_ujTlR-oLSAJyWS-gzmirRo3isuUzobpuAdC5t7TO84QhhZp5jCLJLXSg40osafr5z9jI/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! :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Vertical Sidebar Menu For Blogger
Vertical Sidebar Menu For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitbjB-K9oqKncn9jzbs4FU8dOx0cVtaWvF-Pru1vSZxv4zD81yXSGEqpUYo9V5FLxjJRfonIVRNFtU0haH7NIGEGgHwd-C9MjTxbN_gbqw6f5fjgtb4sHa2JOmHpSR9B28PBQpQVs_Iqw/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitbjB-K9oqKncn9jzbs4FU8dOx0cVtaWvF-Pru1vSZxv4zD81yXSGEqpUYo9V5FLxjJRfonIVRNFtU0haH7NIGEGgHwd-C9MjTxbN_gbqw6f5fjgtb4sHa2JOmHpSR9B28PBQpQVs_Iqw/s72-c/?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2012/03/vertical-sidebar-menu-for-blogger.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2012/03/vertical-sidebar-menu-for-blogger.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy