Hello viewser, in this website you’ll learn to create a Awesome Fullscreen Overlay Navigation Menu Bar using only HTML & CSS that is utilizing today. Previously i've offered a blog on the way this is certainly better to create a Full-Screen Search Bar Animation HTML this is really using CSS JavaScript. Now I’m planning to produce a stylish but simple navigation this is certainly fullscreen is overlay just using CSS.
 |
| Awesome Fullscreen Overlay Navigation Menu Bar using only HTML & CSS |
A navigation this is certainly full-page, that replaces the content that is present pushing it well the display screen. A selection that is website a number of connected products which help in navigating amongst the pages that are different chapters of the web site. There are several forms of selection, with regards to the website’s content and layout.
In this technique (Awesome Fullscreen Overlay Navigation Menu Bar using only HTML & CSS ), in the beginning, into the website, discover only a variety choice on the location this is certainly top is right once you click that switch then a gradient background circulation from that place then show the navigation backlinks. There is a surface this is certainly straight back as soon as you hover for the choosing product that is for certain. This design is wholly according to just HTML & CSS.
If you’re sensation hard to comprehend the things I shall be saying. You can view a video clip clip this is certainly powerful this operational system(Awesome Fullscreen Overlay Navigation Menu Bar using only HTML & CSS).
Video Tutorial of Fullscreen Overlay Navigation Menu Bar
In the movie, you’ve seen the overlay that is fullscreen and I hope you’ve accepted the rules that are important generating the system. We performed usage that is n’t regarding the program everbody knows. To generate a key that is clickable energetic the fullscreen display that is overlay I’ve used HTML <input type=”checkbox”> and label label.
Then you can certainly also use JavaScript on this program and can take this system one step further utilize that is making of JavaScript features once you understand JavaScript.
If you prefer this planned program(Awesome Fullscreen Overlay Navigation Menu Bar using only HTML & CSS) and need to get source principles. It really is easy to possess offer codes for the system. To get the source principles you simply have to scroll along. You need to use the planned system in your site that are HTML sites, and jobs.
Fullscreen Overlay Navigation Menu Bar [Source Codes]
To produce the program( that is prepared Overlay Navigation Menu Bar). First, you should develop two Files one HTML File and another one is CSS File. After producing these files just paste the guidelines becoming after your file.
Initially, build an HTML file using the name that is true of.html and paste the given rules in your HTML file. Remember, you’ve to make a file with .html expansion.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Fullscreen Overlay Navigation | CodingWang</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<input type="checkbox" id="active">
<label for="active" class="menu-btn"><i class="fas fa-bars"></i></label>
<div class="wrapper">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</div>
<div class="content">
<div class="title">
Fullscreen Overlay Navigation Bar
</div>
<p>
using only HTML & CSS
</p>
</div>
</body>
</html>Second, create a CSS file while using the title that's true of.css and paste the offered rules in your CSS file. Keep in mind, you’ve to generate a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.wrapper{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: linear-gradient(-135deg, #c850c0, #4158d0);
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* clip-path: circle(25px at calc(0% + 45px) 45px); */
clip-path: circle(25px at calc(100% - 45px) 45px);
transition: all 0.3s ease-in-out;
}
#active:checked ~ .wrapper{
clip-path: circle(75%);
}
.menu-btn{
position: absolute;
z-index: 2;
right: 20px;
/* left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
color: #fff;
cursor: pointer;
background: linear-gradient(-135deg, #c850c0, #4158d0);
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
transition: all 0.3s ease-in-out;
}
#active:checked ~ .menu-btn{
background: #fff;
color: #4158d0;
}
#active:checked ~ .menu-btn i:before{
content: "\f00d";
}
.wrapper ul{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
list-style: none;
text-align: center;
}
.wrapper ul li{
margin: 15px 0;
}
.wrapper ul li a{
color: none;
text-decoration: none;
font-size: 30px;
font-weight: 500;
padding: 5px 30px;
color: #fff;
position: relative;
line-height: 50px;
transition: all 0.3s ease;
}
.wrapper ul li a:after{
position: absolute;
content: "";
background: #fff;
width: 100%;
height: 50px;
left: 0;
border-radius: 50px;
transform: scaleY(0);
z-index: -1;
transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after{
transform: scaleY(1);
}
.wrapper ul li a:hover{
color: #4158d0;
}
input[type="checkbox"]{
display: none;
}
.content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
text-align: center;
width: 100%;
color: #202020;
}
.content .title{
font-size: 40px;
font-weight: 700;
}
.content p{
font-size: 35px;
font-weight: 600;
}That’s all, so now you’ve successfully created a Awesome Fullscreen Overlay Navigation Menu Bar using only HTML & CSS. Then kindly comment down or e-mail us through the contact web page when your signal does work or you n’t’ve faced any error/problem.
Post a Comment