Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with suckerfish menu

    Hi all !

    I'm making a suckerfish menu wich works fine .

    Now i want to add a third level to my menu but i can't figure out how i could do this.

    here is my css :

    Code:
    ul { /* all lists */
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	text-align:center;
    }
    
    li { /* all list items */
    	float: left;
    	position: relative;
    	width: 114px;
    	background-image:url(../images/balkje_midden.jpg);
    	margin-top: 0px;
    	height: 20px;
    	border-right: 1px;
    	border-right-color : #ffffff; 
    	border-right-style: solid;
        font-size: 12px;
    }
    
    li ul { /* second-level lists */
    	display: none;
    	position: absolute;
    	top: 22px;
    	left: 0;
    	border-right-width:0px;
    	border-right-color:transparent;
    	border-right-style:none;
    }
    
    li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
    	top: auto;
    	left: 0;
    }
    
    li:hover ul, li.over ul { /* lists nested under hovered list items */
    	display: block;
    }
    and here is the javascript.

    Code:
    startList = function() {
        if (document.all && document.getElementById) {
            navRoot = document.getElementById("nav");
            for (i = 0; i < navRoot.childNodes.length; i++) {
                node = navRoot.childNodes[i];
                if (node.nodeName == "LI") {
                    node.onmouseover = function() {
                        this.className += " over";
                    }
                    node.onmouseout = function() {
                        this.className = this.className.replace(" over", "");
                    }
                }
            }
        }
    }
    window.onload = startList;
    Can someone help me out ?

    thx in advance !

  • #2
    Regular Coder
    Join Date
    Nov 2006
    Posts
    247
    Thanks
    13
    Thanked 26 Times in 24 Posts
    Here's a Multi-level Suckerfish menu I made.

    http://majoracle.webs.com/dropdownme...ulti-level.htm

    Hopefully you can find the answer within it (source code contains everything). Yours is using the old Suckerfish JavaScript method, which they improved upon dramatically (see here). This one doesn't use the silly li>ul hack, and the JavaScript is only acknowledged in IE and no where else where it's moot anyway. It's CSS hack free.

    Hopefully it helps you. Run into anymore problems, feel free to tell me.
    Last edited by Majoracle; 03-01-2009 at 07:39 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •