Overlay nav

Developer
Tom Markart
Size
2,756 Kb
Views
12,144
  1. Overlay nav Previews
  2. Overlay nav HTML Codes
  3. Overlay nav CSS Codes
  4. Overlay nav JS Codes

How do I make an overlay nav?

What is a overlay nav? How do you make a overlay nav? This script and codes were developed by Tom Markart on 06 November 2022, Sunday.

Overlay nav Previews
IQ Test

Overlay nav - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Overlay nav</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <ul> <li><a href="javascript:void(0);">Local News</a></li> <li><a href="javascript:void(0);">Sports</a></li> <li><a href="javascript:void(0);">Living</a></li> <li><a href="javascript:void(0);">Classifieds</a></li> </ul> <div class="button"> <a class="btn-open" href="javascript:void(0);"></a> </div>
</nav>
<div class="overlay"> <div class="wrap"> <ul class="wrap-nav"> <li><a href="javascript:void(0);">News</a> <ul> <li><a href="javascript:void(0);">News</a></li> <li><a href="javascript:void(0);">Communities</a></li> <li><a href="javascript:void(0);">Sports</a></li> <li><a href="javascript:void(0);">Politics</a></li> <li><a href="javascript:void(0);">Business</a></li> <li><a href="javascript:void(0);">Living</a></li> <li><a href="javascript:void(0);">Entertainment</a></li> <li><a href="javascript:void(0);">Opinion</a></li> <li><a href="javascript:void(0);">Obituaries</a></li> </ul> </li> <li><a href="javascript:void(0);">Account</a> <ul> <li><a href="https://www.google.hr/">Manage Account</a></li> <li><a href="javascript:void(0);">Manage Subscription</a></li> <li><a href="javascript:void(0);">Customer Support</a></li> </ul> </li> <li><a href="javascript:void(0);">Marketplace</a> <ul> <li><a href="javascript:void(0);">Advertise</a></li> <li><a href="javascript:void(0);">Local Deals</a></li> <li><a href="javascript:void(0);">Classifieds</a></li> </ul> </li> </ul> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Overlay nav - Script Codes CSS Codes

body {	margin:0;	padding:0;	background:#fff;	font-family:'Montserrat',sans-serif;	font-size:12px;
}
ul {	margin:0;	padding:0;	text-decoration:none;	list-style:none;
}
li {	padding:0;	margin:0;
}
nav {	text-align:center;	width:100%;	position:relative;	height:auto;	overflow:hidden;	background:none;
}
nav ul {	text-align:center;
}
nav ul li {	display:inline-block;
}
nav ul li a {	color:#333;	display:inline-block;	padding:1em 3em;	text-decoration:none;	border-bottom:2px solid #fff;	transition-property:all .2s linear 0s;	-moz-transition:all .2s linear 0s;	-webkit-transition:all .2s linear 0s;	-o-transition:all .2s linear 0s;	font-size:16px;
}
nav ul li a:hover {	color: #0d76ba; text-decoration:none;
}
/*styling open close button*/
.button {	display:inline;	position:absolute;	right:50px;	top:6px;	z-index:999;	font-size:30px;
}
.button a {	text-decoration:none;
}
.btn-open:after {	color:#333;	content:"\f0c9";	font-family:"FontAwesome";	transition-property:all .2s linear 0s;	-moz-transition:all .2s linear 0s;	-webkit-transition:all .2s linear 0s;	-o-transition:all .2s linear 0s;
}
.btn-open:hover:after {	color:#ba2814;
}
.btn-close:after {	color:#fff;	content:"\f00d";	font-family:"FontAwesome";	transition-property:all .2s linear 0s;	-moz-transition:all .2s linear 0s;	-webkit-transition:all .2s linear 0s;	-o-transition:all .2s linear 0s;
}
.btn-close:hover:after {	color: #ba2814;
}
/*overlay*/
.overlay {	display:none;	position:fixed;	top:0;	height:100%;	width:100%;	background:#333;	overflow:auto;	z-index:99;
}
.wrap {	color:#e9e9e9;	text-align:center;	max-width:90%;	margin:0 auto;
}
.wrap ul.wrap-nav {	border-bottom:1px solid #575757;	text-transform:capitalize;	padding:150px 0px 100px;
}
.wrap ul.wrap-nav li {	font-size:20px;	display:inline-block;	vertical-align:top;	width:24%;	position:relative;
}
.wrap ul.wrap-nav li a {	color:#ba2814;	display:block;	padding:8px 0;	text-decoration:none;	transition-property:all .2s linear 0s;	-moz-transition:all .2s linear 0s;	-webkit-transition:all .2s linear 0s;	-o-transition:all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {	color:#f0f0f0;
}
.wrap ul.wrap-nav ul {	padding:20px 0;
}
.wrap ul.wrap-nav ul li {	display:block;	font-size:13px;	width:100%;	color:#e9e9e9;
}
.wrap ul.wrap-nav ul li a {	color:#f0f0f0;
}
.wrap ul.wrap-nav ul li a:hover {	color:#aaa;
}
@media screen and (max-width:48em) {	.wrap ul.wrap-nav>li {	width:100%;	padding:20px 0;	border-bottom:1px solid #575757;	}	.wrap ul.wrap-nav {	padding:30px 0px 0px;	}	nav ul {	opacity:0;	visibility:hidden;	}
}
.content {	width:100%;	margin-top:200px;	font-size:20px;	color#333;	text-align: center;
}

Overlay nav - Script Codes JS Codes

$(document).ready(function(){ $(".button a").click(function(){ $(".overlay").fadeToggle(200); $(this).toggleClass('btn-open').toggleClass('btn-close'); });
});
$('.overlay').on('click', function(){ $(".overlay").fadeToggle(200); $(".button a").toggleClass('btn-open').toggleClass('btn-close'); open = false;
});
Overlay nav - Script Codes
Overlay nav - Script Codes
Home Page Home
Developer Tom Markart
Username tmarkart
Uploaded November 06, 2022
Rating 3
Size 2,756 Kb
Views 12,144
Do you need developer help for Overlay nav?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tom Markart (tmarkart) Script Codes
Name
Skewed Header - svg
Vertical Image Filler
Election Widget Vertical
BMIC - Claim Form UI
Select2
Google Matched Content - rendered
Story Detail 1.0b
Story Detail 1.0 - related content - asset types - aspect ratio
Google Places API Parsing
Story Detail - expand secondary asset inline
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!