Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create full-page overlay navigation. To build this project, we need HTML, CSS and Javascript.
This is a beginner-level javascript project. You can implement this project with just some basic knowledge of javascript.
If you are looking for more tutorials to improve your javascript skills, you can check out this playlist here. This playlist consists of 100+ javascript projects. The difficulty of the projects from this playlist varies from simple to quite complex once.
Hence this playlist is suitable for all kinds of javascript learners. Be it a javascript beginner or a javascript expert there is something for everyone in this playlist.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post, you can check out the video down below. If you like this video, you can subscribe to my youtube channel where I post new tips, tricks and tutorials every alternate day.
I also post HTML, CSS and Javascript-based multiple choice questions that will help you with the interviews.
Project Folder Structure:
Before we start coding let us create the project folder structure. We create a project folder called – ‘Full Page Nav’. Inside this folder, we have two files. These files are – index.html which is the HTML document. Next, we have style.css which is the stylesheet. I have included the javascript code in the HTML document itself.
HTML:
We begin with the HTML code. HTML creates the elements necessary for the layout of our navigation. First, code the code below and paste it into your HTML code.
<!DOCTYPE html>
<html>
<head>
<title>Full Page Navigation</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul id="navbar">
<li>
<a href="#home">
home
</a>
</li>
<li>
<a href="#features">
features
</a>
</li>
<li>
<a href="#pricing">
pricing
</a>
</li>
<li>
<a href="#download">
download
</a>
</li>
<li>
<a href="#contact">
contact
</a>
</li>
</ul>
<i class="fas fa-bars" id="icon" onclick="navigation()"></i>
</nav>
<script type="text/javascript">
function navigation(){
var icon=document.getElementById("icon");
var navbar=document.getElementById("navbar");
if(icon.classList.contains('fa-bars')){
icon.classList.remove('fa-bars');
icon.classList.add('fa-times');
navbar.style.left = '0';
}
else{
icon.classList.remove('fa-times');
icon.classList.add('fa-bars');
navbar.style.left = '-100%';
}
}
</script>
</body>
</html>
CSS:
We style the elements created with HTML using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #202020;
}
ul{
height: 100vh;
width: 100vw;
background: linear-gradient(
45deg,
#9e4dff,
#c44fff
);
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
left: -100%;
transition:left 1s;
}
li{
display: block;
width: 100%;
text-align: center;
}
li:not(:last-child){
margin-bottom: 40px;
}
ul a{
display: inline-block;
text-decoration: none;
text-transform: capitalize;
color: white;
font-family: 'Poppins',sans-serif;
font-size: 30px;
width: 35%;
border-radius: 40px;
transition: 0.3s;
padding: 3px 0;
}
ul a:hover{
background-color: white;
color: #c44fff;
transform: translateY(-5px);
box-shadow: 0 15px 15px rgba(0,0,0,0.05);
}
i.fas{
position: fixed;
height: 50px;
width: 50px;
display: inline-block;
background-color: white;
color: #c44fff;
top: 30px;
right: 30px;
text-align: center;
font-size: 30px;
padding: 10px 0;
border-radius: 50%;
box-shadow: 0 0 25px rgba(0,0,0,0.1);
cursor: pointer;
}
That’s it for this tutorial. Your Fullscreen Overlay Navigation is now ready. You can go ahead and customize the navigation as you like.
If you face any issues while creating this project, you can download the source code by clicking on the ‘Download Code’ button below. Also, if you have any queries, suggestions, or feedback drop them in the comments below.
Happy Coding!
