Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS - Creating a vertical navigation menu?

    I am trying to figure out exactly how to do this, as I am very new to CSS. I want to avoid tables in my menu, and have seen CSS work wonders in that aspect.

    What I would like to know is first off, how can I make a basic menu (vertical) with rollover colors?

    Secondly, how can I make a property on that menu display more options (for example...Downloads > - Video - Screenshots - Podcasts)?

    Any and all help is very, very much appreciated!

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    You could have this code as a start:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style type="text/css">
    html,body{spacing:0;padding:0;}
    #right
    {
    width: 260px;
    padding: 0px;
    border: 3px solid #211E08;
    margin:1px auto;
    text-align:center;
    }
    ul
    {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    }
    
    li 
    {
    margin: 1px;
    padding: 0px;
    width: 100px;
    text-align: right;
    }
    #right a 
    {
    width: 100px;
    display: block;
    background: #222;
    color: #efefff;
    font: 11px Tahoma, Arial;
    border-left: 12px solid #9999cc;
    text-decoration: none;
    margin: 1px auto;
    padding: 0px;
    border-right:5px solid #cfcfcf;
    line-height:30px;
    }
    
    #right a:hover 
    {
    color: #fff;
    background: #B8AA7D;
    border-left: 12px solid #0000ff;
    }
    </style>
    <title>My Page</title>
    </head>
    <body>
    	<div id="right">
    	<h3>Menus</h3>
    	<ul>
    	<li><a href="#">Home</a></li>
    	<li><a href="#">Downloads</a></li>
    	<li><a href="#">CodingForums</a></li>
    	<li><a href="#">Blog</a></li>
    	<li><a href="#">Contact</a></li>
    	<li><a href="#">Links</a></li>
    	</ul>
    	<br/>
    	</div>
    </body>
    </html>
    You could have a lot of submenu options in this link.

    See if it helps
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •