Author Topic: add customized vertical css menu to smf, wordpress, joomla, vbulletin & sites  (Read 1116 times)

0 Members and 1 Guest are viewing this topic.

Offline obasimiracle

  • Support Expert
  • *****
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 

Code: [Select]
#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.
Code: [Select]
<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
Code: [Select]
http://i42.tinypic.com/hur50l.gif any where
2. you can replace this bg image
Code: [Select]
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 
« Last Edit: November 14, 2013, 12:49:52 AM by obasimiracle »
Wisdom pays! Be wise!

 

* Post Updates

Inside: 3P Techies Blog

* Newest Techies

Get Updates


Sign up to get latest updates delivered to your inbox. No Spam, We Promise!

Get Hosting!

a Faster web hosting service

Copyright 3rd Planet Techies. All rights Reserved.

Top || Mobile ||Advertise || Contact Us || Privacy