SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple Jquery Suckerfish not working

    Hello. I've used jquery before to animate a suckerfish menu. This time however, It's set up a little different and therefore not working. Usually what scrolls down is a whole list <ul>. The nav structure in this one is just attempting to slide down three list items <li>. The problem I'm having is when you rollover the main link, only one of the list items is being captured. My jquery selection need to include all three <li> tags.

    http://www.savagepixels.com/iselect/

    Here's my markup:
    Code HTML4Strict:
    <div class="threeNavStructure inside"><!-- begin threeNavStructure div -->
        <a href="index.html">
        <div class="threeNav_pos1_on inside">
            <ul class="homeNav"><li>Home</li></ul>
        </div></a>
        <div class="threeNav_pos2_off inside">
             <ul id="menu" class="aboutNav"><a href="#"><p>About The Fund</p></a>
                <li><a href="how.html">how it works</a></li>
                <li><a href="vetting.html">expert vetting</a></li>
                <li><a href="management.html">management</a></li>
            </ul>
        </div>
        <a href="faq.html">
        <div class="threeNav_pos3_off inside">
             <ul class="faqNav"><li>FAQ</li></ul>
        </div></a>
    </div><!-- close threeNavStructure -->
    The Jquery:
    Code JavaScript:
    // suckerfish functionality
    $('#menu li').css({
            display: "none",
            left: "auto"
        });
        $('#menu').hover(function() {
            $(this)
                .find('li')
                .stop(true, true)
                .delay(400)
                .slideDown('slow');
        }, function() {
            $(this)
                .find('li')
                .stop(true,true)
                .fadeOut('slow');
    });


    And last but not least, my relevant CSS:
    Code CSS:
    #menu { position:relative; width:100%; }
    #menu p { font-family: 'Arvo', serif; font-size:16px; font-weight:bold; text-transform:uppercase; }
    #menu, {
        list-style:none;
    }
    #menu li {
        height:32px;
        float:left;
        text-align:left;
        padding:0px 2px 0px 10px;
        background-color:#252525;
        font-family: 'Open Sans', sans-serif;
        font-size:12px;
        position:absolute;
        display:block;
        left:-9999em;
        z-index:999;
        width:250px;
     
    }
    #menu li a {
        color:#fff;
    }
    #menu a {
        display:block;
        text-decoration:none;
    }
    #menu li:hover, {
        left:auto;
    }

    I'd just like it to scroll down all the of my list items when you rollover the anchor "About The Fund"

    Thanks!
    | scott

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I'm getting closer

    http://www.savagepixels.com/iselect/

    Now the problem is, for some reason, the <ul> that slides down waits until it's finishes sliding before it expands to it's correct size. Any idea what's causing that?

    Thanks
    | sc


Tags for this Thread

Bookmarks

Posting Permissions

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