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 Git tags are an essential feature of version control systems, offering a simple way…
Introduction The methods that browsers employ to store data on a user's device are referred…
Introduction A well-known open-source VPN technology, OpenVPN provides strong protection for both people and businesses.…
Introduction Integrating Sentry into a Node.js, Express.js, and MongoDB backend project significantly enhances error tracking…
Introduction In the world of JavaScript development, efficiently managing asynchronous operations is essential. Asynchronous programming…
Introduction Let's Encrypt is a Certificate Authority (CA) that makes it simple to obtain and…