CSS Drop Down Menus

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.

 

 

132 views

Need help? Let me take care of your IT issues.

Share this page

Scroll to Top