Fullscreen overlay navigation is a type of navigation that covers the entire screen when it is opened. This is in contrast to traditional navigation bars, which are typically located at the top of the page and only take up a small portion of the screen.
Fullscreen overlay navigation is often used on mobile websites and apps, as it allows users to easily access the navigation options without having to scroll down the page. It can also be used on desktop websites to create a more immersive and engaging user experience.
Folder Structure:
Firstly 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>Code language: HTML, XML (xml)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;
}Code language: CSS (css)Our Fullscreen Overlay Navigation is now ready. You can go ahead and change Class Text to suit your likes and need.
