Back

How to set the nav bar to indicate the current page

  1. Create the navigation bar
    1. Go to accessify.com and list-o-matic
    2. Generate the code for a nav list
    3. Copy the CSS and the HTML code into the proper pages
  2. Set the Current page
    This works by setting an id for the <body> tag that has a corresponding id in the CSS; there is also an id on the <a> tag to call the "current page" formatting.

example:

  1. <body id="home">
  2. <li><a href="#" id="homenav">Home</a></li>
  3. body#home a#homenav {color: #666;background: #D8DC9B;}

example of current page nav link

example with code and css

    Navigation links generatored by list-o-matic
    HTML CSS
    <body id="home">  

    <ul id="main-nav">
    <li><a href="#" id="homenav">Home</a></li>
    <li><a href="#" id="prodnav">Products</a>
    </li>
    <li><a href="#" id="connav">Contact Us</a></li>
    </ul>
    </div>

    ul#main-nav {font-family:helvetica,arial,sans-serif;margin:0;padding:0;float:left;
    width:100%;font-size:0.9em;}
    ul#main-nav li {margin:0;padding:0;list-style:none;float:left;margin:0 0.3em 0 0;width:9em;}
    ul#main-nav li a {text-decoration:none;display:block;padding:0.3em 0.5em;border:1px solid silver;color:#003;background:#fff;}
    ul#main-nav li a:hover, ul#main-nav li a:focus {border:1px solid gray;color:#000;background:#efefef;}
    ul#main-nav li ul {padding:0;display:none;}
    ul#main-nav li:hover ul {display:block;}
    ul#main-nav li ul li {float:none;}
    ul#main-nav li ul li a {font-size:0.9em;}

    /** current page CSS **/
    body#home a#homenav,
    body#products a#prodnav,
    body#contact a#connav {
    color: #666;
    background: #D8DC9B;
    }