<!DOCTYPE html>
<htmL>
<head>
<meta charset="utf-8">
<title>Membuat Menu Navigasi Sliding Dengan HTML dan Jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div id="side_nav" class="sidenav">
<img src="close.png" class="close_btn">
<ul class="menu_list">
<li><a href="#">Home</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</div>
<div id="main_page">
<div class="container_menu" ><img id="menu_btn" src="menu1.png" ></div>
<h1>Membuat Menu Navigasi Sliding Dengan HTML dan Jquery</h1>
</div>
<div id="layer"></div>
</body>
</html>
body{
background:#cfdac8;
}
* {
font-family: 'Roboto', sans-serif;
margin: 0px;
padding: 0px;
}
.container_menu{
text-align:right;
}
#menu_btn {
background-color:#11698e;
padding:5px;
width: 25px;
height: 25px;
transition: all 0.3s;
}
#menu_btn:hover {
background-color: #f37121;
cursor: pointer;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #295939;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.menu_list{
list-style-type:none;
margin-left:0px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
color: #fff;
}
.sidenav a:hover {
color: #f1f1f1;
background: #ffba93;
transition: 0.7s;
}
.sidenav .close_btn {
background-color:#11698e;
position: absolute;
top: 20px;
right: 20px;
width: 35px;
height: 35px;
transition: all 0.3s;
}
.sidenav .close_btn:hover {
background-color: #f37121;
cursor: pointer;
}
#main_page {
transition: margin-right .5s;
padding: 20px;
}
#layer{
background-color:rgba(0,0,0,0.4);
position:absolute;
display:none;
width:100%;
top:0px;
bottom:0px;
left:0px;
right:0px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 40px;}
.sidenav a {font-size: 18px;}
.sidenav .close_btn {top: 10px;}
}
$(document).ready(function(){
$("#menu_btn").click(function(){
$("#side_nav").css("width","250px");
$("#main_page").css("margin-right","250px");
$("#layer").css("display","block");
});
$(".close_btn, #layer").click(function(){
$("#side_nav").css("width","0px");
$("#main_page").css("margin-right","0px");
$("#layer").css("display","none");
});
});