Author: Luke Dorny
Comments: The trick to this one was knowing what your final width and height was going to be and adjusting for the padding which pushed the folder names into a viewable area of the png. Applications of this UI are open to your imagination.
Solves:
1. if this is area needs to be expandable to X amount of folders, it can do that within a DIV.
2. a problem i discovered with a mixture of padding on the A and a set width or height of the LI or A
Directions:
1. Determine what width and height you want
2. Create pic accordingly
3. Subtract the padding from the total width and height accordingly (Ex: if you want 100px and a padding of 15px, then set your size at 85px)
Problems:
1. PNG support. I needed to have transparency because of where this nav is integrated into our intranet. Use the hack de jour, or change it to GIF or JPG for your application.
Browser support chart
HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
CSS
#navcontainer
{
margin: 0px;
padding: 0px;
}
#navcontainer ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: left;
}
#navcontainer ul li { float: left; }
#navcontainer ul li a
{
text-decoration: none;
background: url(http://butterlabel.com/transfer/butterlist/images/folderOFF.png) no-repeat top left;
font-size: 10px/12px;
float: left;
margin: 0px;
height: 67px;
width: 75px;
padding-top: 13px;
padding-right: 15px;
padding-bottom: 0px;
padding-left: 10px;
}
#navcontainer li a:hover
{
background: url(http://butterlabel.com/transfer/butterlist/images/folderON.png) no-repeat left top;
color: #000000;
}
ABOUT THE CODE
Some lists within the Listamatic site had to be modified so that they could
work on Listamatic's simple list model. When in doubt, use the external
resource first, or at least compare both models to see which one suits your needs.