Step 1

Copy and paste the below code into Advanced CSS

/*        Vertical Menu Bar       */

*{
    list-style:none;
    margin:0px;
    padding:0px;
}

   
#menu {
    width: 200px;
    border-style: solid solid none solid;
    border-color: #94AA74;
    border-size: 1px;
    border-width: 1px;

    }
   
#menu li a {
    height: 32px;
      voice-family: "\"}\"";
      voice-family: inherit;
      height: 24px;
    text-decoration: none;
    }   
   
#menu li a:link, #menu li a:visited {
    color: #5E7830;
    display: block;
    background: url(images/menu1.gif);
    background-repeat:no-repeat;
    padding: 8px 0 0 10px;
    }
   
#menu li a:hover {
    color: #26370A;
    background: url(images/menu1.gif) 0 -32px;
    background-repeat:no-repeat;
    padding: 8px 0 0 10px;
    }
   
#menu li a:active {
    color: #26370A;
    background: url(images/menu1.gif) 0 -64px;
    background-repeat:no-repeat;
    padding: 8px 0 0 10px;
    }

Download the attached file and use it as menu background..

Step 2

Copy and paste the below code into Text box

<div id="menu">
        <ul>
            <li><a href="#1" title="Home">Home</a></li>
            <li><a href="#2" title="About">About</a></li>
            <li><a href="#3" title="Services">Services</a></li>
            <li><a href="#4" title="Portfolio">Portfolio</a></li>
            <li><a href="#5" title="Store">Store</a></li>
            <li><a href="#6" title="Download">Download</a></li>   
        </ul>
    </div>

Example:


Tags: Bar, Menu, Vertical, main, on, page., the

Views: 1061

Attachments:

Reply to This

Replies to This Discussion

Great tip but, you need to target a value with the code you are using below in order to hide the bullets.

Change this:

{list-style:none;margin:0px;padding:0px;}

To this:

#menu li {list-style: none;margin: 2px;padding:0px;}

 

That's right... thanks for adding strawberry flavour lol

I think it was more along the lines of, Hot Fudge Topping. =)

RSS

Latest Activity

Suzie Nielsen replied to Suzie Nielsen's discussion 'quick question'
"Thanks, I guess I do not have a program to open this CSV thingy... tried but it looks complicated…"
11 minutes ago
soaringeagle replied to soaringeagle's discussion 'stop confusing everyone make your 3.0 icons more use friendly'
"try adding !important"
38 minutes ago
Kos replied to soaringeagle's discussion 'stop confusing everyone make your 3.0 icons more use friendly'
"(lowers head) don't hate me...........it didn't work either.  *lol* That grey box is…"
42 minutes ago
soaringeagle replied to soaringeagle's discussion 'stop confusing everyone make your 3.0 icons more use friendly'
".button.button-iconic {background-color:red;} change color  to anything "
52 minutes ago
Kos replied to soaringeagle's discussion 'stop confusing everyone make your 3.0 icons more use friendly'
"Nope that hid the entire thing.  Tried linkbar linkbar-iconic {visibility: hidden;} and it…"
55 minutes ago
Kos replied to Suzie Nielsen's discussion 'quick question'
"In 2.0 the member photos *do* reflect recent visitors (or at least it used to before I stopped…"
1 hour ago
soaringeagle replied to soaringeagle's discussion 'stop confusing everyone make your 3.0 icons more use friendly'
"i styled it i believe its the containing a 1 sec' this will do it .button.button-iconic"
1 hour ago
Kos replied to soaringeagle's discussion 'stop confusing everyone make your 3.0 icons more use friendly'
"Don't forget the pillow!  *ahahaha*  Hey, how do we hide that grey box behind the…"
1 hour ago

© 2013   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service