Responsive Nav
How do I make an responsive nav?
What is a responsive nav? How do you make a responsive nav? This script and codes were developed by Francois Coron on 08 November 2022, Tuesday.
Responsive Nav - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Nav</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Start Content --> <div class="site-container"> <header class="header"> <a href="#" class="nav--icon" id="nav-icon"> <span></span> <span></span> <span></span> </a> <nav class="nav-hide" id="nav"> <p>Menu</p> <a href="#">Home</a> <a href="#">About</a> <a href="#">Work</a> <a href="#">Blog</a> <a href="#">Contact</a> </nav> </header> <div class="cover"></div> <section class="intro"> <div class="wrap"> <h1>We make web better !</h1> <p> We are excited to launch our new company and product Ooooh. After being featured in too many magazines to mention and having created an online stir, we know that Ooooh is going to be big. You may have seen us in the Dinosaurs’ Den where we were we told that we didn’t need them because we were already doing it so well ourselves, so that’s what we have continued to do. We also hope to win Startup Fictional Business of the Year this Year. </p> <p>Browse our site and see for yourself why you need Ooooh.</p> <a href="#" class="btn">Show our work</a> </div> </section> </div> <!-- End Content --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Responsive Nav - Script Codes CSS Codes
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { padding: 0; margin: 0; font-family: helvetica; color: #333;
}
p { color: #555;
}
a { color: inherit; text-decoration: none;
}
.header { position: relative; width: 100%; height: 40px; background: #333;
}
.site-container { width: 100%; height: 100%; overflow: hidden;
}
.nav--icon { position: absolute; right: 0; top: 0; padding: 9px 20px; width: 40px; height: 40px;
}
.nav--icon span { height: 5px; width: 5px; background: #FFF; display: block; margin-bottom: 3px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
.nav-hide { position: absolute; top: 40px; left: 0; right: 0; background: rgba(51, 51, 51, 0.4); padding: 16px 20px; text-align: center; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); -moz-transition: -moz-transform 0.2s ease-in-out; -o-transition: -o-transform 0.2s ease-in-out; -webkit-transition: -webkit-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out;
}
.nav-hide p { text-transform: uppercase; font-weight: bold; color: #FFF; font-size: 24px;
}
.nav-hide a { display: inline-block; color: #FFF; padding: .5rem 1rem; border: 1px solid #FFF; text-decoration: none; margin: 5px 10px; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; -moz-transition: all 0.3s linear 0.1s; -o-transition: all 0.3s linear 0.1s; -webkit-transition: all 0.3s linear; -webkit-transition-delay: 0.1s; transition: all 0.3s linear 0.1s;
}
.show-nav { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0);
}
.show-nav a { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); opacity: 1;
}
.cover { height: 200px; width: 100%; background-size: cover; background-repeat: no-repeat; background-image: url(https://www.dropbox.com/s/uwh2jyiht101ib8/bg-cover.jpg?dl=0); background-position: center center; background-color: #FFC887;
}
.wrap { max-width: 75%; margin: 0 auto; text-align: center;
}
.btn { display: inline-block; background: #B33600; padding: .3rem 1rem; border: 1px solid #B31E00; color: #FFF; font-weight: lighter; text-transform: uppercase;
}
Responsive Nav - Script Codes JS Codes
$('#nav-icon').click(function(){ $(this).toggleClass('active'); $('#nav').toggleClass('show-nav'); });
Developer | Francois Coron |
Username | francoiscoron |
Uploaded | November 08, 2022 |
Rating | 3 |
Size | 3,721 Kb |
Views | 12,144 |
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!
Name | Size |
Starter jade | 2,008 Kb |
Simple Button Icons | 2,257 Kb |
Typographie | 2,407 Kb |
Auto Height textarea | 2,464 Kb |
UI Quotes | 4,430 Kb |
STAR WARS LIGHTSABER | 4,420 Kb |
A Pen by Francois Coron | 3,029 Kb |
Close SVG | 2,706 Kb |
Light card transition on scroll | 3,814 Kb |
Buttons | 2,509 Kb |
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!
Name | Username | Size |
Expandable Left Side Bar with jQuery animate | Retrofuturistic | 2,483 Kb |
Zip Button test | Lje7462 | 1,932 Kb |
Mesmerizing octopus | Jllodra | 3,549 Kb |
Button fills | Zubfatal | 5,205 Kb |
Speech bubbles | Something | 1,547 Kb |
Improve | Gavra | 1,652 Kb |
Minimal Menu | Achudars | 3,430 Kb |
Material design buttons | Fischaela | 4,381 Kb |
Flex Table | Simeonoff | 4,059 Kb |
Project MMetro beta | Atomicsong | 5,157 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!