Full-Screen Overlay Navigation

One of the most important elements of a website is navigation. A well-constructed Navbar helps users find what they are interested in. So We could call it the spine of any website. In this blog, we are going to create full-screen overlay navigation using HTML CSS and a little bit of jquery code. Before collecting the source code of the project, I would suggest you watch the video tutorial below. This will help you to understand the source code. There are more than 1000 videos about front-end development on our YouTube Channel. If you are new to web design, you can subscribe to our video channel.

If you've watched the video, you'll understand how this snippet was made. An excellent and smooth navigation experience for your users will be ensured when you organize and design a navigation menu well. The way your website looks won't matter much if people can't find what they're looking for in a matter of seconds. You need to be aware of the users if you are a web designer. It is possible to make a navigation menu awesome, but it needs to be intuitive and logical. Initially, fullscreen navigation is not visible. There is plenty of room for other page elements in this type of menu because it is accessed through a single icon. The menu items are hidden in the full-screen menu. Menu items are visible when an icon is clicked. And by clicking on these menu items, users can go to their desired section or page.

You May Also Like:

Full-Screen Overlay Navigation [ Source Code ]:

To create a snippet you need to create an HTML file first and then a CSS File. JS code is used here so you can create a separate JS file. We have put the JS code at the bottom of the HTML file. After creating the file, copy the code given below and paste it into your files. Save the code and open it in the browser. If the code works properly then ok. But if the code does not work properly, then download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>Website Header Design with Fullscreen Navbar</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">    
</head>
<body>
   
   <div class="menu">
		<div class="single-menu">
			☰
		</div>
	</div>
	<div class="banner-area">
		<div>
			<h1>Jonathon Doe</h1>
			<p>Front-End Developer &<br>
			Graphics Desinger</p>
		</div>
	</div>
	<div class="nav-area">
		<div class="box-area"></div>
		<div class="box-area"></div>
		<div class="box-area"></div>
		<div class="items">
			<ul>
				<li>
					<a href="#">Home</a>
				</li>
				<li>
					<a href="#">About Me</a>
				</li>
				<li>
					<a href="#">My Works</a>
				</li>
				<li>
					<a href="#">Offers</a>
				</li>
				<li>
					<a href="#">Get in Touch</a>
				</li>
			</ul>
		</div>
	</div>
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        $('.single-menu').click(function(){ 
          $('body').toggleClass('animate');    
        })
    </script> 
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
}
.banner-area {
	background: url(2.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	height: 100vh;
	width: 100vw;
	z-index: 1;
	text-align: center;
	color: #046e67;
}
.banner-area h1 {
	font-size: 55px;
	margin-bottom: 15px;
	font-weight: 300;
	font-family: russo one;
}
.banner-area p {
	font-size: 25px;
	font-family: montserrat;
	color: #000;
}
.nav-area {
	position: relative;
	display: flex;
	overflow: hidden;
	z-index: 2;
	height: 100vh;
	width: 100vw;
}
.items {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	height: 100vh;
	width: 100vw;
	z-index: 3;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transform: translateY(-100%);
	transition: transform 0.5s;
	transition-delay: 0.5s;
	visibility: hidden;
}
.items ul {
	width: 100%;
}
.items ul li {
	font-size: 30px;
	min-height: 40px;
	text-align: center;
	list-style: none;
}
.items ul li a {
	cursor: pointer;
	text-decoration: none;
	color: #fff;
	font-family: russo one;
	display: block;
	padding: 15px 0;
}
.items ul li a:hover {
	background: #fff;
	color: #046e67;
}
.box-area {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: flex 0.45s;
}
.box-area:nth-child(2) {
	flex: 1 0 100%;
	background: transparent;
}
.box-area:nth-child(odd) {
	background: #046e67;
}
.menu {
	position: absolute;
	top: 20px;
	right: 80px;
	z-index: 5;
	background: #046e67;
	padding: 0 15px;
}
.single-menu {
	position: relative;
	cursor: pointer;
	color: #fff;
	font-size: 30px;
}
.single-menu div {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 3px;
	background: blueviolet;
	transition: transform 0.3s;
	transition-delay: 0.5s;
}
body.animate .box-area:nth-child(2) {
	flex: 0;
}
body.animate .items {
	transform: translateY(0%);
	visibility: visible;
	pointer-events: all;
}

Hope your code is working properly. To get more snippets like this, click on the Load More button on the homepage. We regularly share front-end development-related sources on our website. If you are interested in getting source code then visit our website regularly. Please, share the articles on our website with like-minded people. Thank you very much for visiting our website.

DOWNLOAD CODE

Full-Screen Overlay Navigation [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Full-Screen Overlay Navigation

Full-Screen Overlay Navigation [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form