Sliding Doors + Sons of Suckerfish = Jappler Menus!

CSS HOWTOs HTML/XTML Javascript User Interfaces Web Development

There have been two great menu and navigation techniques I have used over the last few years:

  1. Sliding Doors of CSS
  2. Sons of Suckerfish (for drop down menus)

I have used both of these techniques on several web sites, but crazily not together…until a week ago when a client decided they wanted to move away from their antiquated menus that relied on hundreds of lines of javascript, HTML tables, and over 40 image files (for seven tabs). This technique works in IE 6, IE 7, Firefox, and Safari.

After I had put the code into place I thought it might be helpful for others to see exactly how it is done. These techniques give you a lot of flexibility with very lightweight code.

Code/Files Needed

  1. Two tab images (left and right, with both an active and hover (highligted) option
  2. Sub-menu arrow (not required)
  3. Sons of Suckerfish javascript
  4. CSS for both the drop downs and the sliding doors techniques
  5. Menu list code (your menu items)

Two tab images
The sliding door technique is great because you do not need to make tab specific images, nor do you need to worry about the tab length – it is all taken care of by two images and some CSS. For this example, I am going to use two basic tab images that I quickly created for this example:

  1. Left
  2. Right

Sub-menu arrow (not required)
If you want to easily let your visitors know you have a sub-menu within your menus, add in a sub-menu arrow.

Sons of Suckerfish javascript
After years of using nasty javascript – it is refreshing to see that this technique only requires a few lines of javascript (check out the javascript).

CSS for both the drop downs and the sliding doors techniques
The CSS for the drop down menus and the tabbed navigation is pretty slick (check out the CSS).

Menu list code (your menu items)
The menu list code is the actual menus/tabs. The code can be dynamically created by using something like wp_list_pages() in WordPress, or you can create the code yourself. I have created some sample code for this example.

Everything put together
Now that you have an understanding of all the files and code involved, let’s see everything put together This is a very good way to have sustainable code/files for a small or large web site when dealing with navigation.

Questions, comments? Contact me!

28 thoughts on “Sliding Doors + Sons of Suckerfish = Jappler Menus!”

  1. Natalie Wood

    Hi
    Thanks for this code.
    I notice in the html, that the line:

    <li ><a href=”#”>No-hack IE Tricks</a></li>

    should not have the closing </li> tag, as it has a submenu.
    IE was displaying the submenu anyway but FFox wasn’t.
    Cheers
    Natalie

  2. Natalie Wood

    Hi again
    There is a slight inconsistency between IE and other browsers
    A bottom border is set in the css:

    #nav ul li ul li
    border-bottom:1px solid#ccc;

    In most browsers this puts a bottom border under each menu item, but in IE it seems to have no effect.
    Tested in Windows: IE 5.5, 6, 7 ; Firefox 2.0; Opera 9.24; Safari 3.0.4
    Mac: safari 1.3.2, 2.0.4, 3.0.4; firefox 2.0

    I prefer without the border so I’ll leave it out, but if you wanted the border, you’d need to sort out why IE isn’t displaying it.

    Cheers
    Natalie

  3. Natalie Wood

    In the main file the body style declaration contains:

    font:.8em/1.6em normal Arial, Helvetica;

    Opera 9.25 for Windows won’t recognize this and uses the browser default font.
    To make Opera recognise it, it needs to be rewritten in this order:
    font:normal .8em/1.6em Arial, Helvetica;

  4. Nanci Geiser

    Exactly what I was looking for. Thanks for putting it all together. In Firefox the doors actually slide with hover, however in IE6 they do not. How do I change that?

    Thanks!

  5. Ryan

    Hey Jennifer, nice job. However, one problem I see with integrating this into WordPress, or other CMS systems is that when the unordered lists are generated there’s no way to insert the class modifiers (“tab”, “notab”, etc.)…

    Any way to do this with a clean format like this:
    UL->LI->A->SPAN (TAB)
    |
    |– UL->LI-A->SPAN (SUCKERFISH DROPDOWN)

    Not using any classes or IDs with the exception of #nav ?

  6. Nanci G

    Thanks, Jennifer. It actually is that way with your “everything put together” link as well. I just needed to add sfhover to the CSS to slide the doors in IE6:

    #nav li.tab:hover, #nav ul li.sfhover {background-position: 0% -30px; color:#333;}

    #nav li.tab:hover a, #nav ul li.sfhover a {background-position: 100% -30px;}

    Again – thanks for the code!

  7. Nanci G

    Actually “slide the doors” is not quite accurate. I should have said ‘to get the doors to show the “hover” effect.’ Sorry.

  8. ema

    Using jquery the navigation.js would be even simpler:

    $(document).ready(function() {
    $(“#nav2 li”).hover(
    function () {
    $(this).toggleClass( “sfhover” );
    },
    function () {
    $(this).toggleClass( “sfhover” );
    }
    );
    });

  9. Jode

    Hi Jennifer – I’ll be watching. 😉 In the meantime, I’m having trouble figuring out a current state in the nav.
    Any suggestions would be appreciated.

  10. Jonathan S

    Thanks for putting this up! You’re very kind.

    I’m looking to create a ‘you are here’ state and am having trouble.

    I added an id=”home” to the body tag, an id=”homeLink” to the ‘a’ tag ()

    I then created a selector: body#home a#homeLink { style to move position of revamped tab gif here }

    The style does not work though, I’m guessing my selector is bad but I’m too daft to figure it out 😉 any help?

    Thanks!

  11. Jonathan S

    Never mind, I figured it out. Just have to make the selector uber-uber specific. Should have the new site up in the next millennium 😉

  12. jody

    First of all, I’d like to thank you very much.

    I’m just wondering about the positioning of the menu bar. Without changing any of your code, the bar seems to be indented from the left (maybe it’s my own problem), yet I can’t find the property anywhere…

    And what is the best way to position the menu around? Should I change the margins? If I want to center it, does setting a width and margins to auto work?

  13. Richard

    I’ve checked the css code and I can’t find an entry for where you switch to the alternatively coloured tabs on hover.

Leave a Reply

Your email address will not be published.
*
*

This site uses Akismet to reduce spam. Learn how your comment data is processed.

HOWTOs Web Development

Quickly Create a Favicon

Usually when I get done with a web site and am ready to create a favicon (the little icon in your browser’s address bar to the left of the URL) I end up having to create the image in PhotoShop, then save it as an ico file using Graphic Converter. A quicker way to do […]

Business jappler.com

Swamped, But Big Things to Come

I apologize for not blogging as much as I would like over the last few weeks, but I have been swamped with a number of big projects. As soon as I have more than five minutes at one time to blog – I have a great blog post to write on some really cool stuff […]