Responsive Nav

Size
3,721 Kb
Views
12,144

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 Previews

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'); });
Responsive Nav - Script Codes
Responsive Nav - Script Codes
Home Page Home
Developer Francois Coron
Username francoiscoron
Uploaded November 08, 2022
Rating 3
Size 3,721 Kb
Views 12,144
Do you need developer help for Responsive 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!

Francois Coron (francoiscoron) Script Codes
Create amazing blog posts 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!