Slide 5.27: CSS navigation bar

CSS Navigation Bar

Having easy-to-use navigation is important for any web site. With CSS you can transform boring HTML menus into good-looking navigation bars.

Navigation Bar = List of Links
A navigation bar needs standard HTML as a base. The following examples build the navigation bar from a standard HTML list, so using the <ul> and <li> elements makes perfect sense:


<html> <head> <style type="text/css"> </style> </head> <body bgcolor="#EDF3FE"> <ul> <li><a href="http://www.cs.und.edu/">Home</a></li> <li><a href="http://www.cs.und.edu/Undergraduate">Undergraduate</a></li> <li><a href="http://www.cs.und.edu/Graduate">Graduate</a></li> <li><a href="http://www.cs.und.edu/People">People</a></li> </ul> </body> </html>

To remove the bullets and the margins and padding from the above list, use the CSS on the right:

 ul {
  list-style-type:none;
  margin:0;  padding:0; }

Vertical Navigation Bar
To build a vertical navigation bar, style the <a> elements in addition to the code above:

 a {
  display:block;
  width:100px;
  background-color:#dddddd; }

display:block—Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width.

width:100px—Block elements take up the full width available by default.

Demonstration
The following demonstration shows how the script of HTML and CSS is displayed on the Web:


<html> <head> <style type="text/css"> ul { list-style-type:none; margin:0; padding:0; } a:link, a:visited { display:block; font-weight:bold; color:#FFFFFF; background-color:#98bf21; width:120px; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover, a:active { background-color:#7A991A; } </style> </head> <body bgcolor="#EDF3FE"> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html>