CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-animate
Daryl Ortega
Daryl Ortega

Reputation: 13

Dropdown falling down animation

I want my dropdown animation to appear as if it is falling from above not the slideToggle animation which is like revealing from height 0 to 100%. I use top but its not hiding above so I switch to margin-top. The dropdown animation I want is working but it is over the header and the toggle button when it slides. I set a higher z-index for header and the toggle button but it's not working.

<body>
    <header>
    HEADER
    </header>
    <div id="opt-slide">
    <span id="toggle">OPTIONS</span>

    <ul id="dropdown">
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
        <li>Option 4</li>
        <li>Option 5</li>
    </ul>
    </div>
</body>
<style>
    * { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;}
    header { height:200px; background:#39F; z-index:4;}
    #opt-slide { width:300px;}
    #toggle { background:#099; display:block; height:50px; color:#FFF; line-height:50px; z-index:4;}
    #dropdown { background:#0C9; list-style:none; margin-top:-450px; z-index:2; opacity:0;}
    #dropdown li { height:40px; line-height:40px;}
    #dropdown li:hover { background:#FAFAFA;}

</style>

Script:

<script>
$(document).ready(function() {

    var top = $('header').height() + $('#toggle').height() + $('#dropdown').height();

    $('#toggle').click(function() {

        if($('#opt-slide').hasClass('open')){
            $('#dropdown').animate({marginTop:-top, opacity:0},'slow');
            $('#opt-slide').removeClass('open');
        }else{
            $('#dropdown').animate({marginTop:0, opacity:1},'slow');
            $('#opt-slide').addClass('open');
        }


    });

    $('#dropdown > li').click(function() {
        $('#dropdown').animate({marginTop:-top},'slow');
        $('#opt-slide').removeClass('open');
    });

});
</script>

Upvotes: 1

Views: 1285

Answers (2)

codingrose
codingrose

Reputation: 15699

Write:

CSS:

#dropdown {
    background:#0C9;
    list-style:none;
    margin-top:0px;
    z-index:2;
    display:none;
}

JS:

$('#toggle').click(function () {
    $('#dropdown').slideToggle();
    $('#opt-slide').toggleClass('open');
});

$('#dropdown > li').click(function () {
    $('#dropdown').slideUp();
    $('#opt-slide').removeClass('open');
});

DEMO here.

Upvotes: 1

Mark S
Mark S

Reputation: 3799

You need to set position:absolute to the element in order for top property to work. And then set position:relative to the parent element also to #toggle and header so that z-index stacking is applied.

Upvotes: 0

Related Questions