<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css" integrity="sha512-XcIsjKMcuVe0Ucj/xgIXQnytNwBttJbNjltBV18IOnru2lDPe9KRRyvCXw6Y5H415vbBLRm8+q6fmLUU7DfO6Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<div class="main">
<div id="nav">
<h2>logo</h2>
<i class="ri-menu-3-fill"></i>
</div>
<div id="full">
<ul>
<li>Home </li>
<li>About</li>
<li>Service</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
<i class="ri-close-large-line"></i>
</div>
</div>
<script src="minified/gsap.min.js"></script>
<script src="minified/ScrollTrigger.min.js"></script>
<script src="script.js"></script>
</body>
</html>
*{
margin: 0px;
padding:0px;
box-sizing: border-box;
font-family: gilroy;
}
html,
body{
height: 100%;
width: 100%;
overflow-x: hidden;
}
.main{
background:#333;
height: 100%;
width: 100%;
background-size: cover;
background-position: center;
}
#nav{
display: flex;
align-items: center;
justify-content: space-between;
padding: 40px 50px;
color: #ffffff;
}
#nav h2{
font-size: 22px;
text-transform: uppercase;
}
#nav i{
font-size: 25px;
font-weight: 800;
cursor: pointer;
}
#full{
height: 100%;
width: 30%;
position: absolute;
right: -30%;
background-color: rgba(255, 255, 255, 0.362);
top: 0;
padding: 150px 60px;
backdrop-filter: blur(30px);
}
#full ul{ margin: 0px; padding: 0px; list-style: none; }
#full ul li{
font-size: 28px;
font-weight: 400;
padding-bottom: 20px;
color: #ffffff;
}
#full i{
position: absolute;
top: 5%;
right: 20%;
background-color: #ffffff;
padding: 8px;
font-size: 25px;
cursor: pointer;
border-radius: 50%;
}
var menu = document.querySelector("#nav i")
var closs = document.querySelector("#full i")
var tl = gsap.timeline()
tl.to("#full",{
right:0,
duration:0.8,
})
tl.from("#full ul li",{
x:150,
duration:1,
stagger:0.28,
opacity:0,
})
tl.from("#full i",{
opacity:0,
})
tl.pause()
menu.addEventListener("click", function(){
tl.play()
})
closs.addEventListener("click", function(){
tl.reverse()
})
