In this tutorial, I will show you how to make a Cool 3d Menu Animation Using HTML, CSS and JavaScript
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Menu</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="menu" class="navigation_menu">
<ul>
<li><a href="#">About Me</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">My Work</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
<span id="btn" class="menu_btn"></span>
<div id="container" class="main_container">
<span class="overall"></span>
<div class="content">
<h1>This is My Cool Menu</h1>
<p>this is a very simple responsive menu with a cool animation made in HTML, CSS and Javascript</p>
</div>
</div>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
CSS Code:
@import url('https://fonts.googleapis.com/css2?family=Halant:wght@500;700&family=Tajawal:wght@400;800&display=swap');
*{
margin: 0;
padding: 0;
outline: 0;
}
body{
z-index: -2;
/*background-color: #e3f2fd;*/
background-color: #536dfe;
overflow: hidden;
perspective: 800px;
}
.main_container{
overflow: hidden;
z-index: 0;
position: relative;
width: 100vw;
height: 100vh;
background-color: #64b6ac;
transition: 0.4s;
background: url(res/bg3.jpg) no-repeat center;
background-size: cover;
}
.overall{
z-index: 1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,.5);
}
.content{
position: relative;
z-index: 2;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
color: white;
font-size: 2rem;
font-family: 'Halant', serif;
width: 50%;
}
.menu_btn{
z-index: 100;
width: 30px;
height: 30px;
position: absolute;
top: 30px;
left: 30px;
background-image: url(res/menu_btn.png);
background-size: cover;
filter: grayscale();
}
.navigation_menu{
position: absolute;
z-index: 0;
height: 100vh;
width: 30%;
}
.navigation_menu ul{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
list-style: none;
}
.navigation_menu ul li{
padding: 20px 0;
}
.navigation_menu ul li a{
color: #fff;
font-size: 2rem;
transition: .4s;
text-decoration: none;
font-family: "Tajawal", sans-serif;
}
.navigation_menu ul li a:hover{
color: #000;
}
.active{
overflow: hidden;
z-index: 0;
position: relative;
width: 100vw;
height: 100vh;
background-color: #64b6ac;
transition: 0.4s;
background-size: cover;
border-radius: 25px;
transform: scale(0.9) translateX(30%) rotate3D(0,1,0,-20deg);
box-shadow: 0 2px 8px rgba(30,30,30,0.3);
}
@media screen and (max-width:425px){
*{
font-size: 0.8em;
}
}
JavaScript Code:
//getting the button
var button = document.getElementById("btn");
var container = document.getElementById("container");
var menu = document.getElementById("menu")
var close = true;
button.addEventListener("click" ,function(){
//alert("hello")
//container.classList.remove("main_container");
container.classList.add("active");
if(close){
container.classList.add("active");
menu.style.zIndex = "0";
close = false
}else{
close = true;
container.classList.remove("active");
menu.style.zIndex = "-1";
}
});
Make a 3D Menu Effect Using HTML , CSS and JavaScript
Reviewed by Medics
on
December 20, 2020
Rating:
Reviewed by Medics
on
December 20, 2020
Rating:
good
ReplyDeleteyou can format your code using html formatter
ReplyDeletenibba nibbi meaning in Hindi
ReplyDeletecorona labs in rohini
ReplyDelete