|
|
|
|
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> | |
|
|
| 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 | | | Simple Javascript CSS Digital Clock
Categories : Java Script, Date Time, CSS, Beginner Guides, Web Design | | | How to keep your tables width stable even if you have long strings inside.
Categories : CSS, Web Browsers, HTML, Beginner Guides | | | Form Processing : with alert Highlight field name which is not filled by user
Categories : Java Script, Form Processing, Data Validation, Beginner Guides, Web Design | | | PHPtabZ.. PHP controlled CSS Tab Menu
Categories : PHP, CSS, Web Design | | | Date layout using CSS
Categories : CSS, Date Time, Web Design | | | Kewl Date Example
Categories : PHP, HTML and PHP, Date Time, CSS, Beginner Guides | | | 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 | | | CSS Container BOX , with cool CSS Design
Categories : CSS, HTML, Web Design | | | Changing the Style of form objects using the JavaScript OnClick method.
Categories : Java Script, Form Processing, Beginner Guides, CSS | | | Show or Hide your Content using Javascript
Categories : Java Script, HTML, CSS, Beginner Guides | | | CSS Buttons Styles
Categories : CSS, HTML, Beginner Guides | | | <FORM> causing an extra line in HTML output on IE
Categories : Beginner Guides, HTML, CSS | | | email new items in db
Categories : PHP, Email, Databases, MySQL, Beginner Guides | |
|
|
|
