My Div Will Not Slidedown() When Clicked.

I'm trying to have a drop down menu on a small website I am putting together. For some reason, I can get the div that I want to slide down to fadeOut() and do other things similar

Solution 1:

slideDown() only works on the elements which is hidden with jQuery methods or css display:none.

In your problem your div is already at its height.

So you have to set another div which will contain your menu and set it display to none; then on click of the menu you can slide it down.

I have set an example Fiddle

Update Fiddle

Solution 2:

You should do the following:

$(document).ready(function(){
    $("#menu").click(function(){
        $("#menu").slideDown('40px');
    });
});

Solution 3:

SlideDown won't work because it is already visible, try "slideUp" or "slideToggle" to understand it better. slideDown will transition an "invisible" div to become "visible" whereas slideUp will transition a "visible" div to become "invsible".

Make your div a child of another div then toggle it like so:

change html:

<div id="menuSlide">
    <div id="menu">
        <p id="menuText">Menu</p>
    </div>
</div>

change css:

#menu {
        float: left;
        position: relative;
        height: 400px;
        width: 200px;
        background-color: blue;

    }

            #menuSlide {
        float: left;
        position: relative;
        height: 420px;
        width: 200px;
        background-color: pink;
        border: 2px solid black;
        border-radius: 15px;
        margin-left: 850px;
        margin-top: -345px;
        text-align: center;
    }

change javascript:

    $(document).ready(function () {
        $("#menuSlide").click(function () {
            $("#menu").slideToggle('80px');
        });
    });

This will at least give you a better understanding of how it works... Play around and make your changes accordingly

Solution 4:

make the child nodes hidden at first.

#menuText {
     display:none;
     margin-top:360px;
     font-family:Verdana;
     font-size:30px;
     font-weight:bold;display:none;
}

then have this event handler..

$(document).ready(function(){ 
     $("#menu").click(function() {
          $("#menuText").slideDown(100);
     });
});

Solution 5:

This code works:

$(document).ready(function(){
    $("#menu").click(function(){
        $("#menu").css("margin-top","40px")
    });
});

Then, you need to change the css positioning of the #menu to position: absolute

Edited:

To make it animated, just add css transitions:

transition: 0.5s all ease-in-out;
-moz-transition: 0.5s all ease-in-out;
-webkit-transition: 0.5s all ease-in-out;