Suckerfish Dropdowns

by Dan Webb, Patrick Griffiths

128 Reader Comments

Back to the Article
  1. Thanks so much for this great tutorial! It’s a holy grail, that’s for sure.

    I’m using the menu system for a design in process, and I encountered something that should be noted for others who also wish to use this system.

    If your menu drops down over any element that is positioned relatively, the dropped down menu disappears behind that relatively positioned element in IE/6 Win, regardless of what z-index you give the menu.

    Thanks again! It’s awesome.

    Copy & paste the code below to embed this comment.
  2. You sholud give a higher z-index and relativ position to the parent element of your menu which is on the same level or higher then other positioned elements.

    [div id=“positionedelement” style=“position:relative;z-index:1”]
    [/div]

    [div id=“menu” style=“position:relative;z-index:2”]
    [ul][li]list1
    [ul]submenu[/ul]
    [/li][/ul]
    [/div]

    [div id=“positionedelement” style=“position:relative;z-index:1”]
    [/div]

    Copy & paste the code below to embed this comment.
  3. The menu doesn’t seem to work in Moz/Firebird/Net when you use the “overflow: auto;” css-style on the content below. If you hover over the links with these browsers, the menu hides when you move the coursor over the content below. In Explorer and Opera it works fine…

    Check it out:
    http://www.acc.umu.se/~caran/barebone.html

    I dont know if its a flaw in the code or the browser… Do you know?

    Copy & paste the code below to embed this comment.
  4. Ok so in the example, the first element in the list has a clickable region that is the entire box, not just the text. The ones bellow the first element in any of the drop downs, has a clickable region of only the text, is there a way to fix it so that all of the links in the drop down have a clickable region of the entire box and not just the text?

    Copy & paste the code below to embed this comment.
  5. Really like the menus, already got plans to implement them in one site, and will be keeping an eye on this site for the more drop down levels. That would make the script excellent.

    Will try and see if I can help out with that.

    Copy & paste the code below to embed this comment.
  6. My menu flickers in Netscape 6.2.3. It seems like the only solution here is to wait for browser updates. Has anyone found an answer to this problem yet?

    Dagmar

    Copy & paste the code below to embed this comment.
  7. The Suckerfish example doesn’t seem to work on Netscape 6.2.2 on MacOs9. Has anyone else experienced this? Is it just my machine or is it a problem with that version of the browser? Has anyone found a workaround?

    Copy & paste the code below to embed this comment.
  8. Previous comments have pointed out that there’s a big problem in Safari 1.0, although the dropdowns work fine in Safari 1.1 (apparently, Apple fixed the bug). From reading all the comments, the Safari 1.0 problem seems to be the worst issue with the menu.

    Here’s a workaround. This uses JavaScript to detect Safari 1.0, and keeps the second-level menu hidden from that browser only.

    Insert the following immediately above the </head> tag:

    [removed]<!—
    function BrowserDetect() {
    var ua = navigator.userAgent.toLowerCase();
    this.isSafari = (ua.indexOf(‘safari’) != – 1);
    this.versionMinor = parseFloat(navigator.appVersion);
    this.isSafari10 = ((this.isSafari) && (this.versionMinor < 87));
    if (this.isSafari10 == true) {
      [removed](’<style type=“text/css”>li li {display: none}<\/style>’);
    }
    }
    var browser = new BrowserDetect();
    //—>[removed]

    You could put the JavaScript in a separate file, of course, but the reference to it needs to be located after the CSS, in the <head>.

    I copied most of these lines of code from the Browser Detect script by Chris Nott, which is available under a Creative Commons license at http://www.dithered.com/javascript/browser_detect/

    Note that (1) the version number in Safari’s user agent string is the build number, not 1.0 or 1.1; and (2) I don’t know the correct number to use in the script. 87 may not be the best. All I know is that I’m using Safari 1.0.1 (with OS 1.2.8) and it is version 85.6. I don’t know what version was the first for Safari 1.1. (I didn’t see it in a quick look at Dave Hyatt’s blog.) If someone knows the answer, please post it.

    Using the above code, Safari 1.0.1 displays only the top-level menu with working links, while the dropdown menus work in other browsers.

    Copy & paste the code below to embed this comment.
  9. Corrections: The title of my post should have been “Safari 1.0 workaround” (not 1.1). And I’m using Mac OS X 10.2.8 (last Jaguar version).

    Also note that I’m not a JavaScript wizard, so someone may be able to improve the code.

    Copy & paste the code below to embed this comment.
  10. If someone has a vertical popup/“dropdown” menu that is ready for prime time, I’d love to see it; and use the code, if you’re willing to share.

    I’ve been trying to create a vertical version, where the second-level menus open to the left. After spending a couple days, including looking at a few prominent CSS sites for ideas (including Listamatic), I nearly succeeded, but have given up. From what I can tell, browser support is not good enough yet to implement this on a business web site for a paying client.

    Eric Meyer came close
    http://www.meyerweb.com/eric/css/edge/menus/demo.html
    But it only works in some browsers, and some important details are not so great (on mouseover, the menu “title” disappears from top-level menu). Not good enough for my needs.

    Given that a CSS-only solution is NOT ready for prime time, I would like to find a JavaScript substitute that meets ALA’s usual criteria: high-quality, high standards-compliance, lightweight, portable, customizable. Of course, it needs to work in nearly all browsers, especially IE/Win.

    Copy & paste the code below to embed this comment.
  11. Is there any way to link to an external stylesheet that will do the same thing? I’d like to use this IE hack, but I’m trying to keep my web pages clean.

    Copy & paste the code below to embed this comment.
  12. I have created left and right side vertical menus and a “drop-up” menu examples using :hover and my emulator behavior.
    No CSS hacks or additional elements, so you should choose your favourite one to make these basic functional menus perfect.
    Tested:Ie6Win/FireBird 0.7.

    http://www.hszk.bme.hu/~hj130/css/list_menu/hover/index.html

    Copy & paste the code below to embed this comment.
  13. Larry’s aforementioned code seems to grab the “spoofed” Mozilla version number (which is “5”) rather than the Safari build number.  As a result, using his code appears to disable the drop down functionality for all versions of Safari, not just the pre-Panther versions.

    I managed to cook up the following code which appears to grab the correct build number.  Note that Javascript is not at all my specialty, so some of you will undoubtably find “opportunities for improvement.”  :)

    // Sniff pre v.86 versions of Safari

    var agt = navigator.userAgent.toLowerCase();
    var appVer =  navigator.appVersion.toLowerCase();

    var is_safari =  (agt.indexOf(“safari”) != -1);
    var build =  appVer.substring(appVer.lastIndexOf(”/”)+1);

    if (build < 86) {
    [removed](’<style type=“text/css”>li:hover ul { display: none } </style>’);
      }

    Copy & paste the code below to embed this comment.
  14. Fixed a couple of problems for you and got it to validate.  I got it to work as (I think) you intended in MSIE 6.0, Netscape 7.1, Opera 7.23, Mozilla/Firebird 0.7, K-Meleon 0.8.2.  The main to the css changes were:

    li {

    Clear: left;
    float: left;
    }
    ul>li{
    clear: none;
    float: none;
    }

    li > ul {
    top: auto;}

    See: http://whistlingduck.wrellis.com/menu4.html

    I am still having issues with my site on Mac browsers.  Unfortunately I do not have easy access to a Mac so turnaround is slow.  If anyone has any advice I would sure appreciate it.
    -William Ellis

    Copy & paste the code below to embed this comment.
  15. URL for aforementioned site is:
    http://whistlingduck.wrellis.com/

    Sorry about that…
    -Will

    Copy & paste the code below to embed this comment.
  16. dont forget the doctype:
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>


    i was using Transitional and it wouldn’t work in Mac/IE. once i changed to strict, everything worked great.

    Copy & paste the code below to embed this comment.
  17. I’m working on a website for school and my teacher refuses to give up frames.  He wants a drop-down menu in a typical side-bar fashion.  After trying this example, my drop-downs go outside of the frame so they aren’t much good.
        I was looking at two solutions, and was wondering if anybody here could help me with either of them.

    Solution 1:  Code the drop-downs in such a way so that the drop-downs push the lower options out of the way, in the same column.  Example(hope this works):

    Heading 1
    Heading 2
    Heading 3

    And when mouse hovers on Heading 2, you get:

    Heading 1
    Heading 2
      Option 1
      Option 2
    Heading 3

    You get the idea, right?

    Solution 2 (may be easier?):  His main objections to tables instead of frames is that it’s easier to maintain one menu file.  So, I was wondering if it would be possible to add in a special HREF that would embed the code for the menu into the table, without having to copy it again.  I hope you can understand what I mean…

    Thanks for the help, and I’m finding this to be a great site for information.

    Copy & paste the code below to embed this comment.
  18. Nice tutorial.

    Janos – awesome :)

    Copy & paste the code below to embed this comment.