Problems with “Son of Suckerfish” menus and IE, Opera, Safari

  • kencameron

    (@kencameron)


    17 years, 10 months ago

    My dear WP hackers,

    I posted earlier on this, but the first post was regarding how to apply son of Suckerfish menus to Andreas 08 3 column:

    http://wordpress.org/support/topic/76195?replies=6#post-398145

    With this post I would like to request information on making “The Son of Sucker Fish” menus more compatible with Safari, Internet Explorer, and Safari.

    This is the site wit the problems:

    http://praguetech.com/tagby

    If you look at the site with IE, and Opera you will see that the menus do not lose their hover highlighting after the mouse has moved away. Worse yet, in Opera, the menus do not disappear after the mouse has moved off the menu. Go to another Menu the first menu stays there, and now the second menu is stuck too.

    With Safari the menus appear and disappear and high light as they should, but when you move off the menu a block from the right side of he menu is left behind on the screen.

    With Firefox based browsers things seem to work as they should.
    Any hints or suggestions? My hope is to get this theme mod working really well, and make it available to others.

    What follows are some related links.

    HTMLDog article on “son of suckerfish” menus:
    http://www.htmldog.com/articles/suckerfish/dropdowns/

    Invoke Media article on CSS dropdown menus with WordPress:
    http://www.invokemedia.com/category/web-technologies/cms-systems/

    I posted an article on this subject at my site here:

    http://www.praguetech.com/tagby/archives/35

Viewing 5 replies - 1 through 5 (of 5 total)
  • Doodlebee

    (@doodlebee)

    17 years, 10 months ago

    Well, I see several reasons why this is going wrong. (I use Son of Suckerfish quite a bit – it’s one of my favorite dropdowns to use!)

    First, you should start off by validating your code. Any errors in validation will cause your page to be desiplayed in “quirks” mose, instead of standards mode. An inital check of your markup shows 69 errors. You should clean up those errors and get your (X)HTML and CSS to validate and that’s one big step in helping to fix things.

    You also have your .sfhover script within the body tag. it should be in the header of your document.

    Your li’s are NOT contained within a UL element – which is a big contributor to the non-validation, as well as the non-functioning of your menu.

    Basically, the SOS dropdowns are *very* easy to use, as long as you keep your semantics correct. Your menu should look more like so:

    <div id="menu">
    <ul id="nav">
    <li><a href=#">link 1</a>
    <ul>
    <li><a href="#">link2</a></li>
    </li>
    </ul>
    </div>

    The DIV itself is simply a containing element – nothing more. The UL is what defines the actual dropdown list. It’s a block that contains your entire menu and the base layout of the menu itself. The first LI would be the very first menu item. You can end that link with a closing LI tag – therefore no dropdown, *or* you can add a dropdown by NOT closing the LI before adding in another UL block for the second tier.

    UL’s are *necessary*. Validation is *necessary* for these to work, as it’s a standards-compliant menu system, and relies on valid code to function properly.

    Start wtith that stuff, and it may get you further than you think.

    stigroar

    (@stigroar)

    17 years, 9 months ago

    the javascript posted at invoke doesn’t work ( i had the same problem). paste the script from his sourcecode:

    <script language=”javascript” type=”text/javascript” >
    sfHover = function() {
    var sfEls = document.getElementById(“nav”).getElementsByTagName(“LI”);
    for (i in sfEls){
    sfEls[i].onmouseover=function() {
    this.className+=” sfhover”;
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(” sfhover\\b”), “”);
    }
    }
    }
    if (window.attachEvent) window.attachEvent(“onload”, sfHover);
    </script>

    this solved the problem for me.

    my problem is as follows:

    i wish to implement son of suckerfish on this theme: http://www.openswitch.org/2006/04/16/unsleepable/ , but am not able to make the submenubuttons in a decent size. the size of them becomes the same as the size of the buttons in the theme (about, contact, links etc), and it looks kinda ugly…

    vavroom

    (@vavroom)

    17 years, 9 months ago

    To muddle the water a bit, I’d like to offer “grandson of suckerfish, modified again!”

    http://carroll.org.uk/sandbox/suckerfish/bones2.html

    Basically allows you to actually use the menu using only keyboard navigation (use the tab key to go from one link to the other). Increases accessibility tremendously 🙂 If you care for such things, of course.

    watfordo

    (@watfordo)

    17 years, 7 months ago

    Vavroom, how can I download and implement your “grandson of suckerfish”?

    stigroar

    (@stigroar)

    17 years, 3 months ago

    I have managed to create a working menu!

    http://wordpress.org/support/topic/99723?replies=1

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Problems with “Son of Suckerfish” menus and IE, Opera, Safari’ is closed to new replies.