Site Navigation

Find Solutions > CSS

How to make the rollover effect on the sidebar navigation?

It's all made with simple html, and some css (stylesheet) rules.

the html

  • This is really a list of links. So we will call it like it is, and put them in list (<li>) tags. Then search engines and other programs that crawl our site, can know that this is a list of links.
    We put our list into a div named "pageNav", so that we can make it different from other lists on our site. 
    <div id="pageNav">
  <ul>
  <li><a href="/news">Tech News</a></li>
  <li><a href="/geeks/">Tibetan Geeks</a></li>
  <li><a href="/forum/">Discussion Forum</a></li>
  </ul>
</div>

Can it really be that simple??!! Where's the table code, and the javascript?

It's all done with the magic of stylesheet language.

the css

(All the below blocks of css code go together in the stylesheet, but i have separated them to put in explanations.)

  • First we tell that "pageNav" div to have a certain width, and to float to the left. This makes the grey column on the left. And we give our column a font-size, padding, and background color: 
    div#pageNav {
  float:            left;
  width:            105px;
  font-size:        90%;
  padding:          0;
  background-color: #eeeeee;
}
  • Next: the list. We don't really want it look like a list! So in the stylesheet we take away all the bullets, margins, and padding, and then make the big grey line at the top of the list block. 
    div#pageNav ul {
  list-style: none;
  margin:   0;
  padding:  0;
  border-top: 4px solid #ccc;
}
div#pageNav ul li {
  margin:   0;
}
  • Now here's what makes it pretty. We tell the links ('a' tags) to be blocks instead of inline, and we take away the underline with text-decoration: none; Then we can give them a padding, border, etc, ... which makes them look like table cells. 
    div#pageNav a:link, div#pageNav a:visited, div#pageNav {
  display:          block;
  color:            #000000;
  text-decoration:  none;
  font-size:        110%;
  padding:          3px 0px 3px 10px;
  border-top: 1px solid #ccc;
  /* here's an "invisible line" to keep the menu from "jumping" 
     on hover below */
  border-bottom: 1px solid #eee;
}
  • And then we tell the links to go red (#cc0000) when the mouse pointer hovers over them: 

    div#pageNav a:hover {
  color:            #cc0000;
  text-decoration:  none;
  border-top:    1px solid #cc0000;
  border-bottom: 1px solid #cc0000;
}

Yes, there is more ...

  • To see the html code for the entire sidebar navigation, "View source" in your browser, and scroll down to the <div id="pageNav"> section.
  • To see the rest of the stylesheet, again in "View source", look in the <head> part of the page, and find the line that shows the location of the stylesheet. (It will start with <link rel="stylesheet" ...) The path in the href part of that line, can be pasted into your browser address bar after the domain name, and you will see the stylesheet itself.
[an error occurred while processing this directive]