I have been using the pure CSS ‘Son of Suckerfish Dropdowns’ method to display text menus with HTML for some time when I had a requirement to use images as buttons and wondered if it could be extended to do this. After a bit of research I found that it was not only possible but fairly easy to do.
For those unfamiliar with the ‘Son of Suckerfish Dropdowns’ method please refer to http://htmldog.com/articles/suckerfish/dropdowns/ as I will not be describing this in detail here.
Download the zip file for the complete example source.
The basic principle is to start with a page containing an Unordered List ( <ul> ) as a menu.
This is then formatted using the ‘Son of Suckerfish Dropdowns’ CSS to display as a text menu.
This is the basic text menu – the background colour changes and the sub-menu drops down when an item is moused over. The requirement was to achieve the same effect but with button images instead of text.
The original HTML looks like
<div class="menu">
<ul>
<li><a href="#">About</a></li>
<li>
<a href="#">Menu</a>
<ul>
<li><a href="#">Breakfast</a></li>
<li><a href="#">Lunch</a></li>
<li><a href="#">Dinner</a></li>
</ul>
</li>
<li>
<a href="#">Gallery</a>
</li>
<li>
<a href="#">Locale</a>
</li>
</ul>
</div>
This was changed to add an ID to each item and to wrap the text in a <span></span> element.
<div class="menu">
<ul>
<li><a id="menu-about" href="#"><span>About</span></a></li>
<li>
<a id="menu-menu" href="#"><span>Menu</span></a>
<ul>
<li><a href="#">Breakfast</a></li>
<li><a href="#">Lunch</a></li>
<li><a href="#">Dinner</a></li>
</ul>
</li>
<li>
<a id="menu-gallery" href="#"><span>Gallery</span></a>
</li>
<li>
<a id="menu-locale" href="#"><span>Locale</span></a>
</li>
</ul>
</div>
The CSS was then changed to display the button images as a background that changes when the item is moused over (using :hover) and the text is hidden using display: none.
.menu span {
display: none;
}
#menu-about {
background: url('Button-About-Normal.png') 0 0 no-repeat;
}
#menu-about:hover {
background: url('Button-About-Selected.png') 0 0 no-repeat;
}
I have left the sub-menu as text just to show that both text and images can be mixed as required. Indeed any combination of text and images is possible using this technique.