Rollover button link menu using CSS
	Updated: 31 Mar 2009

I made the vertical "menubar" like you see to the right using only CSS. No graphics files needed. Would you like to know how?

CSS file

The main CSS file for this site contains the following lines:

#links {width:9em; margin:2px 0px 20px 30px; float:right} 
#button {background-color:#efefdf; margin-right:1px; 
  border-top:1px solid #880; border-right:1px solid #880; 
  border-left:1px solid #880}
#button ul {list-style:none; border:none; margin:0px; padding:0px}
#button li {border-bottom:1px solid #880; margin:0px}
#button li.top { border-top:3px solid #aa9; border-right:3px solid #887; 
  border-bottom:3px solid #887; border-left:3px solid #aa9; 
  background-color:#998; font-family:Arial, Lucida, Helvetica, sans-serif; 
  color:#ffe; font-size:7.5pt; font-weight:bold; display:block; 
  padding:3px 0.2em; width:100%; text-align:center}
#button li a {border-top:3px solid #DFDFCF; border-right:3px solid #BFBFAF; 
  border-bottom:3px solid #BFBFAF; border-left:3px solid #DFDFCF; 
  font-family:Arial, Lucida, Helvetica, sans-serif; font-size:8pt; 
  font-weight:bold; display:block; padding:3px 0.2em; width:100%; 
  text-align:center; text-decoration:none}
html>body #button li a, html>body #button li.top {width:auto}  
#button li a:hover {background-color:#ffe}

Notice the left/right padding amount is font-dependent (20% of 1em).

Most of the above is basic CSS. To explain the stuff that isn't, I direct you to...

The source material

CSS Design: Taming Lists

by Mark Newhouse

HTML file

To get it on the page, here's what I do:

<div id="links"> 
<div id="button"> 
<ul>
<li class="top">More pages to see</li>
<li><a href="table-settings-css.html"> Table settings with&nbsp;CSS</a></li>
</ul>
</div>
</div>

Adding another menu item is just adding another LI tag. For better usability, I limit the number of links in the side menu to five or less.

Closing

With modern browser programs, rollover "buttons" that only change color don't require graphics files. Just CSS.

Was this article worthwhile? If you use these ideas on your site, I'd love to know.

 

Your feedback is most welcome. Would you like to send me email?

Original page posted: February 17, 2003 • Links tested: January 1, 2011 • Last tweaked: April 8, 2009
 
The address for this page is [ www.therotunda.net/code/rollover-buttons-css.html ]
 
Nothing on my Web site is the official publication of anyone else. Unauthorized use for profit is not permitted.