Nav NoJS

Developer
DEADBOOT
Size
2,935 Kb
Views
8,096
  1. Nav NoJS Previews
  2. Nav NoJS HTML Codes
  3. Nav NoJS CSS Codes

How do I make an nav nojs?

What is a nav nojs? How do you make a nav nojs? This script and codes were developed by DEADBOOT on 16 December 2022, Friday.

Nav NoJS Previews
IQ Test

Nav NoJS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Nav NoJS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
Source:
http://jeffri.me/2012/11/pure-css3-responsive-navigation-with-target/
-->
<header class="top">	<h1 class="logo">Company Name</h1>	<div class="main-nav" id="nav">	<a href="#nav" class="nav-open">=</a>	<a href="#" class="nav-close">x</a>	<nav>	<ul>	<li><a href="#">Home</a></li>	<li><a href="#">Our Products</a></li>	<li><a href="#">Testimonials</a></li>	<li><a href="#">Press</a></li>	<li><a href="#">About Us</a></li>	<li><a href="#">Contact Us</a></li>	</ul>	</nav>	</div>
</header>
<section id="primary" class="content"> <h1>Pure CSS3 responsive navigation with :target</h1> <p>Excepteur nonummy vel condimentum repellat, aliquid urna platea convallis imperdiet! A blandit! Elementum cum cupidatat ornare, adipisicing voluptatum, morbi ratione nullam porttitor quisquam consectetur eveniet harum ratione! Condimentum. Quidem ridiculus taciti impedit consequuntur ex nostrud accusamus, maecenas quisque ultricies adipiscing augue fugit, nisl porta sequi doloribus quas dictumst? Aperiam exercitationem facilisis voluptatum curabitur qui! Similique esse, mus, beatae scelerisque auctor.
Dui auctor iure explicabo habitant mollis nullam cillum. Et modi eligendi minus aut recusandae! Saepe officia accusamus sodales provident asperiores nesciunt vehicula placerat! Pariatur accusamus. Id excepturi vulputate fugit, voluptatum in nonummy dis augue. Facilisis, sociis, egestas atque a ante? Dis sociis! Rhoncus repellendus eveniet, vehicula neque sequi ridiculus saepe, adipiscing lectus inventore dolor! Habitant! Nostrum, voluptatem tempore animi hymenaeos.
Aliquid magna litora fringilla blanditiis? Venenatis quaerat luctus doloremque potenti? Modi lobortis, urna harum dolores laborum perspiciatis quas luctus hymenaeos vehicula lacus ante cum beatae hendrerit turpis! Convallis sociosqu possimus voluptate accumsan nascetur tempora pariatur? Hendrerit, diam ornare, occaecati ipsam, sit nulla? Aenean quos. Vehicula! Sem recusandae gravida, diamlorem corporis! Vero dolorem eaque tellus? Consequat accusamus? Justo, orci accumsan ab.
by Jeffri Hong
</p> </section>
</body>
</html>

Nav NoJS - Script Codes CSS Codes

body {	font: 100%/1.5em Apercu, Arial, sans-serif;	color: #121212;	margin: 0;	padding: 0;
}
.top {	background: #f6f6f6;	border-bottom: 1px dashed #aaa;	padding: 0 1em;	min-height: 3.5em;
}
.logo {	float: left;	font-size: 1.5em;	line-height: 2.3em;	color: #666;	margin: 0;	padding: 0;
}
#nav {	text-align: right;
}
#nav > nav > ul {	list-style: none;	margin: 0;	padding: 0;
}
#nav > nav > ul > li {	display: inline-block;
}
#nav > nav > ul > li > a {	display: block;	color: #666;	text-decoration: none;	padding: 1em 1.5em;
}
#nav > nav > ul > li > a:hover {
}
.nav-open, .nav-close {	display: none;	background: #878787;	color: #000;	margin: 0.5em 0;	padding: 0.5em 1em;	text-decoration: none;
}
@media only screen and (max-width: 60em) {	.nav-open {	display: inline-block;	}	#nav:target > .nav-open {	display: none;	}	#nav:target > .nav-close {	display: inline-block;	}	#nav > nav {	position: relative;	text-align: left;	}	#nav > nav > ul {	position: absolute;	top: 0;	right: 0;	width: 100%;	max-height: 0;	max-width: 16em;	background: #f6f6f6;	border-width: 0 1px 1px 1px;	border-style: dashed;	border-color: #aaa;	overflow: hidden;	-webkit-transition: max-height linear 0.5s;	-moz-transition: max-height linear 0.5s;	-ms-transition: max-height linear 0.5s;	-o-transition: max-height linear 0.5s;	transition: max-height linear 0.5s;	}	#nav > nav > ul > li {	display: block;	}	#nav > nav > ul > li > a {	padding: 0.3em 1.5em;	}	#nav:target > nav > ul {	max-height: 400px;	}
}
@media only screen and (max-width: 30em) {	#nav > nav > ul {	position: static;	max-width: none;	border: none;	}	#nav > nav > ul > li > a {	padding: 0.5em 1em;	}	#nav > nav > ul > li:last-child {	margin-bottom: 0.5em;	}
}
Nav NoJS - Script Codes
Nav NoJS - Script Codes
Home Page Home
Developer DEADBOOT
Username deadboot
Uploaded December 16, 2022
Rating 3
Size 2,935 Kb
Views 8,096
Do you need developer help for Nav NoJS?

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!

DEADBOOT (deadboot) Script Codes
Name
Basys_mrmrs
Menu JS Motto
Basys_mdd--typeplate
Menu JS 3
Nav Top Drawer by J. Moore
Nav Top Drawer by J. Moore Vanilla JS
Nav w fallback 2
Basys_mdd--modernscale
Fittext Demo
Menu JSM Mode Inline v2
Create amazing video scripts 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!