Partially exposed div to slide up when image is clicked

Question

this might be a weird one but what I am trying to do is make a div slide up from the bottom of the screen when someone clicks an image. To paint this clearer, imagine the Windows desktop, and if you click the start menu image/icon, instead of the start menu popping up from the button, the entire start menu bar would slide up exposing the entire div.

What I'm doing now (forgive me as I have just learned JS and jQuery from codecademy) is using the slideUp function. However, this is causing the div to slide down out of sight instead of up, exposing the entire div. The goal is that when you click the button the div slides up, and if you click the button again (or anywhere outside the div) it'll slide back down leaving the top 60px exposed like before.

Here's my JS/jQuery code:

$('#start').click(function() {
$('#nav').slideUp('slow');
});

My HTML

<div id="nav" class="nav">
    <img id="start" src="img/btn_start.png">
</div>

My CSS

* {
    padding: 0px;
    margin: 0px;
}

body {
    width: 100%;
    font-family: Helvetica;
}

.nav {
    width: 100%;
    min-width: 100%;
    height: 500px;
    background: #000;
    color: #fff;
    position: absolute;
    bottom: -440px;
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
    overflow: auto;
 }

.nav ul li {
     display: inline;
}

 .nav li {
     padding: 20px;
     margin-top: 80px;
     position: relative;
     top: 50%;
     transform: translateY(-50%);
 }

 #start {
    float: left;
 }

Thanks, and I hope this isn't too ridiculous.

Answer 1

Instead of slideUp you should use

$('#start').click(function() {   
    $('#nav').animate({bottom: "0px"}, 1200);   
});

...which will smoothly animate from the current location until the bottom is at 0px (i.e. aligned with the bottom of the containing element).

For even smoother results, checkout velocity.js (http://julian.com/research/velocity/), which does even smoother animation by synchronising with browser frame updates.

JsFiddle here: http://jsfiddle.net/11r46jnm/

You can also do this with CSS transitions instead. For stuff like this I like to hook my CSS into data attributes on the HTML:

<div id="nav" class="nav" data-nav-state="collapsed">
    <img id="start" src="img/btn_start.png">
</div>

...use javascript to change the attributes...

$('#start').click(function() {
    //toggle the nav element between two states
    var currentState = $('#nav').attr("data-nav-state");
    var newState = "collapsed";
    if ( currentState === "collapsed" ) {
        newState = "expanded";
    } 
    $('#nav').attr("data-nav-state", newState);
});

Finally we use CSS to set the positions of the two states, and to ensure that transition is smooth. CSS transitions have much better performance than jQuery, so I recommend using them if you can:

 #nav[data-nav-state=collapsed] {
      bottom: -440px;
 }

 #nav[data-nav-state=expanded] {
      bottom: 0px;
 }

 #nav {
      transition: bottom 1.2s ease;
 }

See this jsFiddle for a demo: http://jsfiddle.net/Lv2saepy/1/