full screen navigation thumbnail
Thanks for visiting my website. In this article, we will learn how to create a full screen overlay navigation using HTML and CSS. Don’t worry this is very easy just a simple line of codes.
For that, we need to create an HTML file and add the following code.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Full Screen Navigation</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='http://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body>
<label for="nav" class="nav-btn">
<i class="fa fa-bars" aria-hidden="true"></i>
</label>
<input type="checkbox" id="nav">
<ul class="nav-overlary">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
We Done Thank you please subscribe my channel
</body>
</html> In the above code, you notice we add font-awesome for the bar icon.
<label for="nav" class="nav-btn"> <i class="fa fa-bars" aria-hidden="true"></i> </label> <input type="checkbox" id="nav">
As you checked in HTML we used checkbox. With this checkbox, we will implement overlay navigation. That magic we will do in the CSS.
Now we will create CSS file
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color:#fff;
background: #000;
}
a{
color:#fff;
text-decoration: none;
}
.nav-btn{
position: fixed;
top:30px;
right: 30px;
cursor: pointer;
}
#nav{
display: none;
}
.nav-overlary{
position: absolute;
display: inline-block;
text-align: center;
width: 100%;
height: 100vh;
padding: 40px;
list-style: none;
opacity: 0;
transform: translateY(-100);
transition: .5s;
z-index: -1;
}
.nav-overlary li{
font-size: 40px;
text-transform: uppercase;
padding:20px;
}
input[type="checkbox"]:checked ~ .nav-overlary{
opacity: 1;
transition: 1s;
} In the above code, I made some code in bold which is doing everything. Just try on your browser and comment on your thoughts.
Here is the full video. Must watch and if you like my code subscribe to my YouTube developerdiary channel.
Introduction In the world of web development, selecting the correct framework is critical. Laravel and…
Introduction By enabling containerization, Docker has transformed the way software is built, deployed, and managed.…
Introduction Speed and efficiency are critical in the ever-changing world of web development. Effective caching…
Introduction Git, a popular version control system in software development, enables developers to track changes,…
Introduction Are you tired of grappling with tangled changes and unfinished work while using Git?…
Introduction Version control is essential in software development because it ensures that changes to a…