Code Examples -> CSS Vertical Navigator , With Coll CSS Look

	Join us on FaceBook
	Submit Your Code
	Poker Tournaments
	Poker Guide for Developers
	SEO Monitor
	UpTime Monitor
	My Favorite Examples
	My Favorite Articles
	Update Your Profile

More Weber Sites
	PHP Code Search
	Web Development Forums
	Learn MySQL Playing Trivia
	PHPBB2 Templates
	Web Development Resources
	Web Development Content

Recommended Links
	PHPClasses
	PHP Editor
	PHP Jobs
	Vision.To Design
	Ajax Tutorials
	PHP Programming Help
	PHP/MySQL Programming
	Webmaster Resources
	Webmaster Forum
	XML meta language
	website builder

Recommended
	פרייסז - השוואת מחירים בסופר
	ZeroLag.com
	Texas Holdem Poker Evangelists


BACK		ADD A COMMENT		SEND TO A FRIEND		ADD TO MY FAVORITES		ADD CODE EXAMPLES		PRINT

PHP Code Examples

Title :	CSS Vertical Navigator , With Coll CSS Look
Categories :	CSS, Web Design, Beginner Guides	Chetankumar Akarte
Date :	Feb 26th 2007
Grade :	5 of 5 (graded 2 times)
Viewed :	8133
File :	4583.zip
Images :	Image 1

Search :	More code by Chetankumar Akarte
Action :	Grade This Code Example
Tools :	My Examples List

Code


Like this code? Show the author your appreciation.

This is a vertical CSS menu which allows you to customize its style further as you see fit.

test1.css

body{
background: #fff;
line-height: 1.1;
color: #666;
font: small Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#Navigator {
width: auto;
background: #fcfcff ;
padding: 0 6px .5em 12px;
overflow: visible;
min-width:750px;
clear: both!important;
top:1em!important;
margin-bottom:1em!important;
}
.fixclear {
display:block;
position:relative
}

#NavData {
float:left;
clear: left;
width:225px;
margin:0;
}

div.NavMain {
background:#FcFcFf;
position:relative;
margin-bottom:1em;
width:auto!important;
width:100%;
border:1px solid #CAD6E8 ;
padding:1em 0 1.5em 0;

}

h2, h3{
color:#036;
background: transparent;
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif
}

h4 {
font: bold 100% Verdana, Arial, Helvetica, sans-serif;
}

a:link{
color: #06c;
background: transparent;
}
a:visited{

color:#4B5970;
background: transparent;
}
a:hover{
color: #f60;
background: transparent;
}

#Navigator div h3 {
font: normal .9em Verdana, Arial, Helvetica, sans-serif;
height:1em;
padding:2px 1.5em 4px .5em;
clear: right;
color:#99ACCA ;
background:transparent url(bulletr.gif) right center no-repeat;
margin:0;
position:absolute;
right:-1px;
top:-.8em;
border:0 none;
}

div.NavMain * {
margin:4px 6px 6px 10px;
}
div.NavMain * * {
margin:0;
}
div.NavMain h4 {
color: #E14900;
}

div.NavMain ul, div.NavMain ol{
margin: 5px 0 10px 5px;
padding:0 0 0 5px;
font-size:77%;
font-weight:bold;
}

div.NavMain li {
margin: 0 5px 5px 18px;
padding:0
}
div.NavMain ul li {
list-style-image: url(Bullet.gif);
}
div.NavMain ul li:hover {
list-style-image:url(Bullet.gif)
}
div.NavMain p {
font-size:77% ;
margin-bottom:10px
}

test.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CSS Navigation V 1.0 by Chetan Akarte</title>
<link rel="stylesheet" type="text/css" media="all" href="test1.css" />
</head>

<body>
<div id="Navigator" class="fixclear">
<div id="NavData">
<div class="NavMain">
<h3>CSS Navigation</h3>
<div>
<h4><a href="http://www.geocities.com/cdy2k2002/" title="Steps to be taken in planning your web sites or online applications">
Your first Title</a></h4>
<ul>
<li><a href="http://www.geocities.com/cdy2k2002/">Any link 1</a></li>
<li><a href="http://www.geocities.com/cdy2k2002/">Any link 2</a></li>
<li><a href="http://www.geocities.com/cdy2k2002/">Any link 3</a></li>
<li><a href="http://www.geocities.com/cdy2k2002/">Any link 4</a></li>
</ul>
<h4><a href="http://www.geocities.com/cdy2k2002/" title="Steps to be taken in planning your web sites or online applications">
Your Second Title</a></h4>
<ul>
<li><a href="http://www.geocities.com/cdy2k2002/">Any link 1</a></li>
<li><a href="http://www.geocities.com/cdy2k2002/">Any link 2</a></li>
<li><a href="http://www.geocities.com/cdy2k2002/">Any link 3</a></li>
<li><a href="http://www.geocities.com/cdy2k2002/">Any link 4</a></li>
</ul>

</div>
</div>
</div>
</div>

</body>
</html>

Related Code Examples

	Simple Javascript CSS Digital Clock Categories : Java Script, Date Time, CSS, Beginner Guides, Web Design
	Cool CSS Message quote Categories : CSS, Web Design, Beginner Guides
	Rollover Image link effect using only single image. Categories : Web Design, HTML, CSS, Beginner Guides
	Show or Hide your Content using Javascript Categories : Java Script, HTML, CSS, Beginner Guides
	How to keep your tables width stable even if you have long strings inside. Categories : CSS, Web Browsers, HTML, Beginner Guides
	PHPtabZ.. PHP controlled CSS Tab Menu Categories : PHP, CSS, Web Design
	Change the background color of a website daily dynamically using the php date function to get the current day of the week and depending on that day, set the background color for the web page. Categories : PHP, Date Time, Beginner Guides, Web Design
	Changing the Style of form objects using the JavaScript OnClick method. Categories : Java Script, Form Processing, Beginner Guides, CSS
	CSS Container BOX , with cool CSS Design Categories : CSS, HTML, Web Design
	CSS Buttons Styles Categories : CSS, HTML, Beginner Guides
	Date layout using CSS Categories : CSS, Date Time, Web Design
	Form Processing : with alert Highlight field name which is not filled by user Categories : Java Script, Form Processing, Data Validation, Beginner Guides, Web Design
	<FORM> causing an extra line in HTML output on IE Categories : Beginner Guides, HTML, CSS
	Kewl Date Example Categories : PHP, HTML and PHP, Date Time, CSS, Beginner Guides
	Cool tool tip Categories : Java Script, HTML, Web Design