XHTML & CSS Training « PAWDD E-Training -- PHP and Web Digital Design + JavaScript [paw-dee] [trey-ning]

22Sep/090

Styling Lists Menus with Images that Expand

It is common to see a list styled as a vertical or horizontal menu. Our menus are usually very simple but why limit ourselves to simple text lists as a menu.

Especially when CSS is so powerful and can be used along with the tag to allow for genuine gorgeous list menus styled with images that expand and contract with link text length.

The following is CSS that will allow you to have beautiful image styled menus that expand and contract with content.

This example only expands horizontally, not vertically, so it is not a good idea to have multi-line text in your lists.

The Image

Image to use for your list menu up/down states

This example used an image that is 300x48, thusly taking into account that your link will never be more than 296px wide, and accounting for a 24 pixel high menu item, with a hover state built into the image using a stacked image that contains both states in one image, thus reducing load on your server, and removing the need for OnLoad events on the body.

The CSS

#menu li {
     list-style:none;
     float:left;
     margin-right:4px;
}
* html #menu li {
     height:24px;
     display:inline;
}
#menu li a {
     height:24px;
     display:block;
     background:url(images/nav.png) no-repeat left top;
     padding-left:15px;
     color:#405768;
     font:700 0.88em/26px Arial, Helvetica, sans-serif;
     text-decoration:none;
     cursor:pointer;
}
#menu li a span {
     height:24px;
     display:block;
     background:url(images/nav.png) no-repeat right top;
     line-height:24px;
     padding-right:15px;
}
#menu li a:hover, #menu li a.s {
     background-position:left bottom;
}
#menu li a:hover span, #menu li a.s span {
     background-position:right bottom;
}
* html #menu li a, * html #menu li a span {
     width:1%;
     white-space:nowrap;
     cursor:pointer;
}
* html #menu li a span {
     position:relative;
}

The XHTML

<ul id="menu">
	<li><a title="button 1" href="http://"><span>Button 1</span></a></li>
	<li><a title="Button 2" href="http://"><span>Button 2</span></a></li>
	<li><a title="Button 3" href="http://"><span>Button 3</span></a></li>
</ul>

Tagged as: bullets, definition, list, lists, menu, ordered, unordered No Comments

Dashboard

Training Categories

Shaded Pixel LLC

Monthly Archive

Page Links