WeberDev.com PHP and MySQL Code

LOG IN
BEGINNER GUIDESPHP CLASSESCODE SEARCHARTICLES SEARCHPHP FORUMSPHP MANUALPHP FUNCTIONS LISTWEB SITE TEMPLATES
Start typing to search for PHP and MySQL Code Snippets and Articles Search


Submit a code Example / Snippet Join us on FaceBook
Submit a code Example / Snippet Submit Your Code
Search Engine Optimization Monitor SEO Monitor
Web Site UpTime Monitor UpTime Monitor
Your Personal Examples List My Favorite Examples
Your Personal Articles List My Favorite Articles
Edit Account Info Update Your Profile
PHP Code Search
Web Development Forums
Learn MySQL Playing Trivia
PHPBB2 Templates
Web Development Resources
Web Development Content
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



Go Back Add a Comment Send this example to a friend Add this Article to your personal favoritest for easy future access to your favorite Code Examples and Articles. Submit a code example Print this code example.
BACK ADD A COMMENT SEND TO A FRIEND ADD TO MY FAVORITES ADD CODE EXAMPLES PRINT
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 : 8668
File : 4583.zip
Images : Image 1
Search : More code by Chetankumar Akarte
Action : Grade This Code Example
Tools : My Examples List

Submit your own code examples  Submit your own code examples 
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>




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
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
How to keep your tables width stable even if you have long strings inside.
Categories : CSS, Web Browsers, HTML, Beginner Guides
Kewl Date Example
Categories : PHP, HTML and PHP, Date Time, CSS, Beginner Guides
PHP based HTML rabbing Tools
Categories : PHP, HTML and PHP, Tag Extractors, Regexps, Beginner Guides