Create a slidable navigation menu using jQuery animation feature.
Hey guys and welcome back to our blog. Hope ya'll doin' well and breaking the hell outta keyboard :)
So, today we're gonna make an interactive navigation menu that can slide open and close.
What we need is just some knowledge of CSS and JQuery and we are good to go.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamburger menu 2</title>
<style>
.container{
display: flex;
width: 40px;
height: 50px;
border: 2px solid black;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
cursor: pointer;
}
.bar{
border: 2px solid black;
width: 25px;
height: 0px;
}
.sidebar{
height: 100%;
width: 0%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(53, 53, 53, 0.5);
overflow-x: hidden;
color: white;
font-size: 30px;
}
ul{
display: none;
padding-top: 50px;
list-style-type: none;
}
li{
margin: 10px auto;
}
#cross{
position: absolute;
top: 0px;
right: 20px;
cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<div class="container">
<div class="bar" id="bar1"></div>
<div class="bar" id="bar2"></div>
<div class="bar" id="bar3"></div>
</div>
<div class="sidebar">
<h3 id="cross">X</h3>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
<script>
$(document).ready(function slideSidebar() {
$(".container").click(function () {
$(".sidebar").animate({width: '200px'}, 1000);
$(this).fadeOut(1000);
$("ul").fadeIn(1000);
});
$("#cross").click(function closeSidebar() {
$(".sidebar").animate({width: "0px"}, 1000);
$(".container").fadeIn(1000);
$("ul").fadeOut(1000);
});
});
</script>
</body>
</html>
Comments
Post a Comment