CIS 421 › CSS › CSS Menus

Create a menu in CSS

Method based on stylin' with CSS by Charles Wyke-Smith, New Riders, 2005.

You can use CSS to make text menu links that look like graphical buttons, by converting the links to block elements and using the a:hover pseudo-class property.

Open the CSS pages we worked on last week

Your saved version of this sample page
Your saved version of the CSS stylesheet we started

Apply styles in 421example.css if you have not already done so

Save your page as you go, view in the browser and validate the XHTML to be sure you close the tags correctly

Insert a link to the stylesheet if you have not already done so
Insert a div tag for the id #top under the body tag. You also need to have a closing div tag
Save the page and view in the browser -- what do you have to do now?
Insert a div tag linking to the .wrapper class to wrap both your left and right columns. You need to close the wrapper div tag before you clear the floats with the clearfloat class before the footer.
Insert a div tag for the id #left before the navigation items to float them on the left side of the page
Close the div tag for the #left container
Create a div tag for the #center content to float it on the right side of the page
Close the #center container after the end of the content
insert a div tag linking to the class .clearfloat to clear both float tags for #left and #center containers
close the .wrapper container
insert the .footer container and add footer content.
Once you get the wrapper set up, you can rearrange the #left and #center containers and put the #center one first, since it has the most important, less repetitive content.

Create a text menu that looks like a graphic

the entire boxmodel becomes clickable and changes color when you roll over it

Create a new contextual class selector which will apply to a a specific tag, in this case the unordered list selector
choose your own colors for these styles
in my stylesheet, I named it ul.mainnav. It can only apply to ul tags. It does not have a liststyle.
- list-style is set to none, so the bullets do not display
- margin-left is set to 0, so the text does not indent
- padding is set to 0
- margin-bottom is set to 2 px to give it some space
- line-height is set to 1.3 em for the same reason
- the background and font colors are set so they contrast
  
  ul.mainnav {
  list-style:none;
  margin-left:0;
  padding:0;
  margin-bottom:2px;
  line-height:1.3em;
  background-color:#cccccc;
  color:#eee;
  }
Next, a contextual class aimed at the line items within the ul.mainnav class sets a border on the top and left to give a little 3-D effect

ul.mainnav li {
border-top:6px solid #0000ff;
border-left:6px solid #0000ff;
padding-left:2px;
line-height:1.3em;
}

top

Next, the hyperlink and visited links styles for links within the ul.mainnav line items
- text-decoration set to none removes the underlining
- display set to block causes the hyperlinks to display as a block rather than an inline element
- width set to 100% ensures the hyperlink display covers all the width of the list element.
  
  ul.mainnav li a:link, ul.mainnav li a:visited {
  text-decoration:none;
  display:block;
  width:100%;
  }
Finally, a pseudo-class for the hover state of the hyperlinks changes the background color and font color of the hyperlink block, so it behaves like a graphic during rollover.
- To ensure it is the same width as the block-displayed <li>, it inherits its width.
  
  ul.mainnav li a:hover {
  background-color: #ffcc00;{
  color:#000000;{
  width:inherit;
  }

top

Resources

top

Page Index

Section index