Rollover button menu using CSS
	Updated: Oct 9, 2005

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 CSS file this site uses 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:8pt; 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:8.5pt; 
  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 text-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.

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="autosized-popup-window.html">More code:<br>
Autosized pop-up window</a></li>
<li><a href="cookie-feedback-form.html">More code:<br>
Feedback form</a></li>
<li><a href="table-settings-css.html">More code:<br>
Table settings</a></li>
</ul>
</div>
</div>

Adding another menu item is just adding another LI tag. For better usability, I prefer to limit the number of links in the side menu on this site to five. So far, I haven't come close.

Closing

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

Was this article worthwhile? See the menu at upper right for more code used on this site - including how to do the menu. If you use these ideas on your site, I'd love to know.

Since March 2003, this page has seen by about 200-700 visitors each month.

My nifty email form stopped working ... but you can still send me email if you would like to.

Original page posted: February 17, 2003. Links tested: May 24, 2008. Last tweaked: July 1, 2006.

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.