...

View Full Version : CSS - Creating a vertical navigation menu?



jayemsee283
03-04-2008, 08:28 AM
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! :thumbsup:

rangana
03-04-2008, 08:39 AM
You could have this code as a start:


<!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 (http://dynamicdrive.com/dynamicindex1/jsdomenu/index.htm).

See if it helps :D

abduraooft
03-04-2008, 10:48 AM
http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html
http://examples.codecharge.com/CCSExamplePack2/VerticalCSSMenu/VCSSMenu.php

jlhaslip
03-04-2008, 06:31 PM
Pretty fair Tutorial here: http://www.cssplay.co.uk/menus/tutorial.html

_Aerospace_Eng_
03-04-2008, 06:38 PM
I also like http://css.maxdesign.com.au/listutorial/index.htm



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum