Lucas Parkins Lucas Parkins - 3 months ago 14
CSS Question

JS menu animation for website doesn't work

I have added the following JS to my website to add a side menu that slides out from the left and it doesn't work. I am fairly inexperienced with JS so any advice is helpful.

/*global $, jQuery, alert*/
var main = function () {
"use strict";
$('.icon-menu').click(function () {
$('.menu').animate({
marginLeft: "150px"
}, 200);

$('body').animate({
marginLeft: "150px"
}, 200);
});

$('.icon-close').click(function () {
$('.menu').animate({
marginLeft: "-150px"
}, 200);

$('body').animate({
marginLeft: "0px"
}, 200);
});
};


$(document).ready(main);


icon-menu and icon-close are both images, icon-menu is on the page and is supposed to reveal the menu which is a div. icon-close is on the menu div.

HTML:

<div class="menu">
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>

<div class="link" id="joinLink"><a href="joinPage.html">Join </a></div>
<div class="link" id="returnsLink"><a href="returns.html">Returns</a></div>
<div class="link" id="methodsLink"><a href="methods.html">Methods</a></div>
</div>
<img class="icon-menu" src="https://cdn1.iconfinder.com/data/icons/web-ui-2/16/UI_Icons_Outline-29-128.png"/>


CSS:

.menu {
background-color: white;
left: -150px;
top: 150px;
height: 1000px;
position: fixed;
width: 150px;
}

.icon-close{
height: 20px;
width:20px;
cursor: pointer;
padding-left: 10px;
padding-top: 10px;


}

.icon-menu{
height: 30px;
width: 30px;
margin-top: -320px;
margin-left: 7px;
float: left;
cursor: pointer;
text-decoration: none;
text-transform: uppercase;
}

Answer

without any HTML structure from you or CSS , i just made this simple example :

first, with CSS set an inital position for the .menu . i used position:relative and left:-150px; .

then with JQ toggle between left:0 ( which will show the .menu ) and left:-150px ( which will hide the .menu ) .

i also toggled the buttons so only one is shown at a time.

there are a number of ways to do this but i wanted to change your code as little as possible.

you don't need to style the body , just style the .menu

EDIT : edited snippet with your HTML and CSS ( with modifications )

i suggest you set both icon-menu and icon-close outside the .menu . and also remove the margin-top from .icon-menu

var main = function () {
    "use strict";
    $('.icon-menu').click(function () {
        $(this).hide()
        $('.icon-close').show()
        $('.menu').animate({
            left: "0"
        }, 200);

       
    });

    $('.icon-close').click(function () {
        $(this).hide()
         $('.icon-menu').show()
        $('.menu').animate({
            left: "-150px"
        }, 200);

        
    });
};


$(document).ready(main);
.menu {
background-color: white;
left: -150px;
top: 40px;
height: 1000px;
position: fixed;
width: 150px;
}

.icon-close{

  height: 30px;
    width: 30px;
    margin-top: 0;
    margin-left: 7px;
    float: left;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    display:none;

}

.icon-menu{
    height: 30px;
    width: 30px;
    margin-top: 0;
    margin-left: 7px;
    float: left;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
     

        <div class="link" id="joinLink"><a href="joinPage.html">Join </a></div>
        <div class="link" id="returnsLink"><a href="returns.html">Returns</a></div>
        <div class="link" id="methodsLink"><a href="methods.html">Methods</a></div>
    </div>
    <img class="icon-menu" src="https://cdn1.iconfinder.com/data/icons/web-ui-2/16/UI_Icons_Outline-29-128.png"/>

    <img class="icon-close" src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png"/>