You must have Javascript enabled to experience this site.

CSS Drop Down Menus

Posted & filed under Coding Tips.

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.

 

 

0 views