Seeking assistance with animating a navigation bar on and off the screen from the left side. The nav is not animating as expected using the latest version of jquery.min.js. The first step was to animate the nav upon clicking an object. View the current progress on JSFiddle:
Here is the current code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/Default.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../JS/Script.js"></script>
</head>
<body>
<h1 class="menu-open" id="open">Open</h1>
<div class="nav" id="nav">
<div class="menu">
<h1>Menu</h1>
<div class="elements">
<h2 class="home"><a href="#">Home</a></h2>
<h2 class="about"><a href="#">About</a></h2>
<h2 class="code"><a href="#">Products</a></h2>
<h2 class="design"><a href="#">Contact</a></h2>
<h2 class="gaming"><a href="#">Find Us</a></h2>
<h2 class="more"><a href="#">More</a></h2>
</div>
</div>
</div>
</body>
</html>
JQuery:
var main = function(){
$('.open').click(function(){
$('.nav').animate({
left: "0px"
}, 200);
});
};
$(document).ready(main);
CSS:
body{
margin: 0 auto;
}
.nav{
top:0;
left: -300px;
z-index: 1;
position: fixed;
height:100%;
width:300px;
background-color: #336ca6;
}
.menu-open{
position:absolute;
left:500px;
cursor: pointer;
}
.menu{
font-family: arial;
width:300px;
}
.menu h1{
position:relative;
left:100px;
color: #a0a0a0;
}
.menu h2 {
border-bottom: 1px solid #aaaaaa;
padding-left:20px;
padding-bottom:20px;
width:280px;
}
.menu .elements{
margin-top:35px;
}
.menu a{
text-decoration: none;
font-family: arial;
color:#efefef;
width:300px;
}
.menu a:hover{
color:#aaaaaa;
transition:color 0.5s;
}
.menu .home{
border-top: 1px solid #aaaaaa;
padding-top:20px;
}
Any help would be greatly appreciated!