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

0 Members and 1 Guest are viewing this topic.

Online 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(;
padding: 8px 0 0 30px;

#obasim li a:hover {
color: #fff;
background: url( 0 -32px;
padding: 8px 0 0 30px;

#obasim li a:active {
color: #fff;
background: url( 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'>
   <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>

advance troubleshooting :
1. you can download and upload this image
Code: [Select] any where
2. you can replace this bg image
Code: [Select] 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

Re: Convert Thunderbird to Outlook by Blakelymartin
[January 12, 2021, 07:59:43 AM]

UK Fast Company Registration Service? by johnwediki
[January 11, 2021, 01:13:59 PM]

Re: Easiest way to convert EML to PST by Evangelinejoy
[January 11, 2021, 09:49:27 AM]

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 || Privacy