COMP 126: Practical Web Design & Development for Everyone
responsive-nav.com
Responsive Nav is a lightweight JavaScript plugin for mobile-friendly navigation.
It is dependency-free and works with pure JavaScript. Which you do not have to write.
You can include Responsive Nav in your project by either downloading the scripts or linking to a CDN containing the scripts.
installation, method 1
using a cdn
Add the following script and stylesheet elements inside the <head> of your HTML file:
<script src="https://cdn.jsdelivr.net/npm/responsive-nav@1.0/responsive-nav.min.js"></script>
<link href=" https://cdn.jsdelivr.net/npm/responsive-nav@1.0.39/responsive-nav.min.css
"rel="stylesheet">installation, method 2
download and host locally
1. Download the JS script and/or CSS files from responsive-nav.com
2. Place the file/s in your project directory.
3. Link to the script and/or stylesheet in the <head> of your HTML file.
<script src="path-to-your-folder/responsive-nav.min.js"></script>
<link rel="stylesheet" href="path-to-your-folder/responsive-nav.css">Set up a basic nav structure in your html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Nav Example</title>
<link href=" https://cdn.jsdelivr.net/npm/responsive-nav@1.0.39/responsive-nav.min.css"
rel="stylesheet">
<link rel="stylesheet" href="custom-styles.css">
<script src="https://cdn.jsdelivr.net/npm/responsive-nav@1.0/responsive-nav.min.js">
/script>
</head>
<body>
<nav class="nav-collapse">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<script>
var nav = responsiveNav(".nav-collapse");
</script>
</body>
</html>implement javascript
<script>
var nav = responsiveNav(".nav-collapse", {
animate: true, // Enable CSS transitions
transition: 400, // Animation speed in ms
label: "Menu", // Label for the navigation button
insert: "before", // Position of the toggle button
closeOnNavClick: true, // Close menu when an item is clicked
openPos: "relative", // Position of opened menu
navClass: "nav-collapse", // Default CSS class
navActiveClass: "opened", // Class when menu is open
jsClass: "js" // Class for JS-enabled
});
</script>add this script (or another from a demo) to the <head>
or just above the </body> tag
customization options
custom button
<button class="nav-toggle"> some icon or button </button>
<script>
var nav = responsiveNav(".nav-collapse", {
customToggle: ".nav-toggle"
});
</script>
troubleshooting
-
Menu doesn’t appear? Check JavaScript linkage.
-
CSS not applying? Ensure correct class usage.
responsive-nav
By tkjn
