html css and js not working

This is my code:

<!doctype html>
<html lang="en-US">
<head>
    <title>Welcome - Home</title>
    <link type="text/css" rel="stylesheet" href="Home.css">
    <link rel="icon" href="KLOGO.png" type="image/png"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
    <script src="Home.js"></script>
</head>
<body class="menu">
    <header>
        <a href="#" class="menu-toggle">Toggle</a>
        <nav class="menu-side">
            This is a side menu
        </nav>
    </header>
    <p> sioeufh iufha dgrkljbgril unfvuabervluiyboyubn serlibglisuhsefiuh oaisuf aieufh aosih asioeufh iufha dgrkljbgril unfvuabervluiyboyubn serlibglisu</p>
    <p>oierua yugafapiwugText and more tejiaslirfuh aiufh oaiuefhioaushf aisbhfailsubfaufha dgrkljbgril unfvuabervluiyboyubn serlibglisuh oaiusg foiygasdefoiawg pghuioyf gaiwuebfyaweoilru gfa s7ierfygasrgoooa8iweygfra iiiastygf a8we8</p>
</body>
</html>

JavaScript
​x
 
<!doctype html>
<html lang="en-US">
<head>
    <title>Welcome - Home</title>
    <link type="text/css" rel="stylesheet" href="Home.css">
    <link rel="icon" href="KLOGO.png" type="image/png"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
    <script src="Home.js"></script>
</head>
<body class="menu">
    <header>
        <a href="#" class="menu-toggle">Toggle</a>
        <nav class="menu-side">
            This is a side menu
        </nav>
    </header>
    <p> sioeufh iufha dgrkljbgril unfvuabervluiyboyubn serlibglisuhsefiuh oaisuf aieufh aosih asioeufh iufha dgrkljbgril unfvuabervluiyboyubn serlibglisu</p>
    <p>oierua yugafapiwugText and more tejiaslirfuh aiufh oaiuefhioaushf aisbhfailsubfaufha dgrkljbgril unfvuabervluiyboyubn serlibglisuh oaiusg foiygasdefoiawg pghuioyf gaiwuebfyaweoilru gfa s7ierfygasrgoooa8iweygfra iiiastygf a8we8</p>
</body>
</html>
​

The css:

    .menu-side{
    background: #333;
    border-right: 1px solid #000;
    color: #fff;
    position: fixed;
    top: 0;
    left: -231px;
    width: 210px;
    height: 100%;
    padding: 10px;
}
.menu{
    overflow-x:hidden;
    position: relative;
    left: 0px;
}
.menu-open {
    left: 231px;
}

JavaScript
 
    .menu-side{
    background: #333;
    border-right: 1px solid #000;
    color: #fff;
    position: fixed;
    top: 0;
    left: -231px;
    width: 210px;
    height: 100%;
    padding: 10px;
}
.menu{
    overflow-x:hidden;
    position: relative;
    left: 0px;
}
.menu-open {
    left: 231px;
}
​

And the jquery:

(function () {
var body = $('body');
$('.menu-toggle').bind('click', function () {
    body.toggleClass('menu-open');
    return false;
});
})();

JavaScript
 
(function () {
var body = $('body');
$('.menu-toggle').bind('click', function () {
    body.toggleClass('menu-open');
    return false;
});
})();
​

I’m using the Brackets program to write my code, but when I go to the live view after I saved everything and i press “toggle” the page wont move and I looked over everything and Im 98% sure its correct.

Answer

Put <script src="Home.js"></script> before the </body> tag.

I made another class

.menu-side-open{
    left:0px;
}

JavaScript
 
.menu-side-open{
    left:0px;
}
​

and JQuery

(function () {
var body = $('body');   
$('.menu-toggle').bind('click', function () {
    body.toggleClass('menu-open');
    $('.menu-side').toggleClass('menu-side-open');
    return false;
});
})();

JavaScript
 
(function () {
var body = $('body');   
$('.menu-toggle').bind('click', function () {
    body.toggleClass('menu-open');
    $('.menu-side').toggleClass('menu-side-open');
    return false;
});
})();
​

Also added

.menu, .menu-side{
    transition: 300ms;
}

JavaScript
 
.menu, .menu-side{
    transition: 300ms;
}
​

for a nice slide 🙂

JSFiddle demo

Advertisement

Answer