Hello everyone, you can learn how to create a Responsive Fullscreen Overlay Navigation Menu using HTML, CSS in this blog. So if you want to learn then follow all the steps carefully.
Watch Full Tutorial on YouTube
Source Code Of Responsive Fullscreen Overlay Navigation Menu
Step 1: Create Index.html File
Create one file with the name index.html and paste the below code in this file.
<!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">
<link rel="stylesheet" href="style.css">
<!-- Font Awesome Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Full Screen Navigation Menu - Coding Power</title>
</head>
<body>
<div class="container">
<div class="toggle">
<span class="fa fa-bars" onclick="document.querySelector('.menu').classList.add('active')"></span>
</div>
<div class="menu">
<span class="fa fa-times" onclick="document.querySelector('.menu').classList.remove('active')"></span>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
</body>
</html>Step 2: Create style.css File
Create one file with the name style.css and paste the below code in this file.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.container{
position: relative;
width: 100%;
height: 100vh;
}
.container .toggle span{
position: absolute;
top: 20px;
left: 35px;
font-size: 30px;
line-height: 35px;
padding: 6px 10px;
color: white;
background: #333;
border-radius: 4px;
cursor: pointer;
}
.container .menu{
width: 100%;
height: 100%;
background: #8338ec;
position: absolute;
top: 0;
left: -100%;
z-index: 5;
transition: 0.5s;
}
.container .menu.active{
left: 0;
}
.container .menu span{
position: absolute;
top: 20px;
right: 35px;
font-size: 30px;
line-height: 35px;
padding: 6px 10px;
color: white;
background: #333;
border-radius: 4px;
cursor: pointer;
}
.container .menu ul{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
list-style: none;
}
.container .menu ul li{
display: block;
padding: 5px;
margin-top: 20px;
text-align: center;
border-radius: 15px;
transition: 0.2s;
}
.container .menu ul li:hover{
background: tomato;
}
.container .menu ul li a{
text-decoration: none;
font-size: 25px;
color: white;
}That's It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.
