3P Techies Forum

You can simply use ul and li tags to add vertical menu to any cms or Dreamweaver site but that isn't what I'm discussing today. I felf like sharing the very code I used for the vertical css menu on the right side bar of the forum .

This simple css code should work on any site irrespective of the cms platform or design software , practically it should readily work on wordpress, joomla , drupal, artiseer , Dreamweaver, smf , phbb , punbb, vbulletin, blogger and other cms sites .

How to add the vertical menu   

Log in to the admin dashboard of your site (for blogger just go to customize and add css) and go to "edit css" or "add css" or simple edit style.css from your cpanel and add the following css codes immediately after the last line of the css content 

#obasim {
width: 200px;
border-style: solid solid none;
border-color: #D76100;
border-width: 1px;
padding: 0;
}

#obasim ul {
margin: 0;
padding: 0;
list-style: none;
}

#obasim li a {
height: 32px;
height: 24px;
text-decoration: none;
font-weight: normal;
color: #9E3C02;
display: block;
background: url(http://i42.tinypic.com/hur50l.gif);
padding: 8px 0 0 30px;
}

#obasim li a:hover {
color: #fff;
background: url(http://i42.tinypic.com/hur50l.gif) 0 -32px;
padding: 8px 0 0 30px;
}

#obasim li a:active {
color: #fff;
background: url(http://i42.tinypic.com/hur50l.gif) 0 -64px;
padding: 8px 0 0 30px;
} save and exit .

then go to your simple portals block or any other widget that allows you add html code to your website and add the following html code.
<div id='obasim'>
<ul>
   <li><a href='#'><span>Portfolio </span></a></li>
   <li><a href='#'><span>Clients </span></a></li>
   <li><a href='#'><span>Services </span></a></li>
   <li><a href='#'><span>Our Team </span></a></li>
   <li><a href='#'><span>Ongoing Promo</span></a></li>
   <li class='last'><a href='#'><span>Request for a qoute </span></a></li>
</ul>
</div>

advance troubleshooting :
1. you can download and upload this image http://i42.tinypic.com/hur50l.gif any where
2. you can replace this bg image http://i42.tinypic.com/hur50l.gif with your own image link with distinctive color
3. you can edit the width , color and decoration from the first css code above

4. you can add the css to your external style.css document on Dreamweaver


leave your comments