How to create a Full screen overlay navigation

byCodingFlicks -October 30, 2020

0

How to create a Full screen overlay navigation

Hi there, Today, I will provide another simple and straightforward snippet about Creating a Full-screen overlay navigation menu using HTML, CSS, and lightweight javascript library, Jquery. I have shared some jquery or javascript related snippets. Check those if you have time.

There will be a hamburger icon in the top-right corner of the web page in this full-screen menu project. When the user clicks, then the main menu will appear with an overlay color behind it. Without further explanation, I am providing you the code so that you can practice on your own.

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
	<meta content="width=device-width, initial-scale=1" name="viewport">
	<title>How to create a Full screen overlay navigation</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class='icon-area'>
		<div class='line1'></div>
		<div class='line2'></div>
		<div class='line3'></div>
	</div>
	<nav class="main-menu">
		<ul>
			<li>
				<a href="#">Home</a>
			</li>
			<li>
				<a href="#">About</a>
			</li>
			<li>
				<a href="#">Services</a>
			</li>
			<li>
				<a href="#">Portfolio</a>
			</li>
			<li>
				<a href="#">Blog</a>
			</li>
			<li>
				<a href="#">Contact</a>
			</li>
		</ul>
	</nav>
	<h1>Full-Screen navbar</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque molestias, expedita facilis corporis obcaecati tenetur voluptas sed odit ipsum voluptatum qui eligendi libero, et dolore consequatur accusamus vel dolorum quas asperiores, veniam est ex non. Expedita eius tempore ea ipsam repellat quaerat facere iusto saepe maiores sequi repellendus asperiores id modi, aliquid excepturi corporis culpa, magni architecto! Iure odio quod, in adipisci libero eligendi at deserunt expedita aliquam porro velit blanditiis cupiditate asperiores maiores praesentium unde inventore debitis? Autem minus sunt, dignissimos, explicabo culpa quia quod. Magni ratione dignissimos eius voluptatibus sit qui eum recusandae praesentium expedita. Cumque possimus quas ex! Odit itaque fuga perferendis, quas doloremque laboriosam facilis porro eaque eveniet voluptates molestias dolorum praesentium neque architecto sint aperiam consectetur exercitationem laudantium reprehenderit qui odio. Blanditiis maiores quaerat, similique repellendus voluptate quisquam eligendi explicabo, assumenda et repudiandae quas, quasi iure minus. Impedit quo beatae consequuntur dicta a voluptatum qui praesentium eum magnam est, suscipit quam optio tempore sed nobis quasi veritatis ea perferendis nemo corporis vel cupiditate maxime, reprehenderit inventore? Magnam adipisci commodi omnis corporis quibusdam quis id laboriosam non pariatur hic cumque aperiam incidunt, praesentium, nam possimus. Quis asperiores, minima ipsum reprehenderit eius quas a atque harum? Architecto repudiandae, quo quasi. Fugit repellat, quaerat itaque hic illum dicta nesciunt, ipsam dolores quis maiores. Quam sit unde esse nobis cum velit assumenda consequatur illum animi excepturi dolore delectus, voluptas placeat odio quidem iste magni ullam. Sit eius, eum debitis minima aliquam totam soluta fuga ratione facilis? Cupiditate quam provident beatae voluptatem obcaecati, nostrum quis, suscipit natus, sint architecto culpa libero iure. Illo culpa dicta et dolore consectetur autem? Dignissimos, culpa nobis voluptas et quas recusandae commodi facilis dolor dolorem repellendus id quisquam nesciunt maiores aliquam consectetur ducimus a numquam totam excepturi. Officia enim optio beatae, ipsum deserunt sit ratione a, sunt quod, eligendi vero iusto totam aperiam, magni iure provident atque incidunt perferendis necessitatibus blanditiis rerum ullam unde. Fuga repellendus vel doloribus modi commodi impedit, minus quaerat, placeat consequuntur, accusantium similique nulla recusandae et accusamus. Deleniti voluptatum eligendi rerum voluptates explicabo animi nisi labore eum at laboriosam deserunt iusto, repellat, voluptatibus vel similique illo dolor doloribus, neque? Molestias temporibus quae, eligendi cupiditate quos facere deserunt iure laboriosam necessitatibus inventore. Ea porro quasi ex, voluptatibus, doloribus doloremque quam, non ullam, ducimus reiciendis modi sint! Culpa veritatis tempora corrupti reiciendis libero, sit recusandae earum labore porro voluptatibus, inventore itaque cupiditate architecto ullam, ipsam officiis fugiat consectetur saepe velit. Iusto quae tempora, provident velit adipisci aperiam corporis officia iste sed mollitia sint maiores dolore laboriosam, eligendi, ipsum eum quod deleniti cumque odit consequuntur unde! Quos commodi facere nulla ducimus quam repellat quis reiciendis excepturi aspernatur officia temporibus eligendi, maxime molestias error praesentium tempora voluptates vel quia optio harum mollitia voluptate ex voluptas illo! Enim dolores ad officiis aut sed, quos, cumque aperiam cupiditate assumenda impedit, mollitia magni natus architecto accusantium ab quae non. Dolorum nemo, similique ipsa facilis incidunt, eaque. Aut repellat vero explicabo deleniti accusantium ad laudantium illum nam sequi. Modi?</p>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js">
	</script> 
	<script>
	       $(function(){
	           $('.icon-area, nav').click(function(){
	               $('.icon-area').toggleClass('animate');
	               $('nav').fadeToggle();
	               $('nav').removeClass('main-menu');
	           });
	       });
	</script>
</body>
</html>

CSS

* {
	font-family: poppins;
}
body, html {
	margin: 0;
	padding: 0;
}
h1, p {
	margin: 0 auto;
	width: 90%;
}
h1 {
	text-align: center;
	text-transform: uppercase;
	padding: 25px 0;
}
p {
	text-indent: 30px;
	text-align: justify;
}
nav, .icon-area {
	-webkit-touch-callout: none;
	user-select: none;
}
nav {
	position: fixed;
	z-index: 10;
	background-color: rgba(1, 197, 196, 0.95);
	width: 100%;
	height: 100%;
	text-align: center;
	display: table;
	color: #fff;
}
.main-menu {
	display: none;
}
nav ul {
	display: table-cell;
	vertical-align: middle;
	padding-left: 0 !important;
}
nav ul li {
	list-style: none;
}
nav ul li a {
	font-size: 50px;
	color: inherit;
	letter-spacing: 3px;
	font-weight: 300;
	text-decoration: none;
}
.icon-area {
	position: fixed;
	top: 20px;
	right: 20px;
	width: 45px;
	height: 45px;
	z-index: 20;
	cursor: pointer;
}
.line1, .line2, .line3 {
	width: 100%;
	height: 5px;
	margin-bottom: 8px;
	background-color: #262626;
	transition: all 0.3s ease-in-out;
}
.animate .line1, .animate .line2, .animate .line3 {
	background-color: #fff;
}
.animate .line1 {
	transform-origin: 10% 40%;
	transform: rotate(45deg);
}
.animate .line3 {
	transform-origin: 10% 40%;
	transform: rotate(-45deg);
}
.animate .line2 {
	background-color: transparent;
}

I hope you liked this uncomplicated project. Please follow our social media profiles to stay connected with the blog, and thanks for stopping by.

Please do not enter any spam link in the comment box.