Responsive Navigation

Developer
Ashepherd1
Size
2,765 Kb
Views
14,168
  1. Responsive Navigation Previews
  2. Responsive Navigation HTML Codes
  3. Responsive Navigation CSS Codes
  4. Responsive Navigation JS Codes

How do I make an responsive navigation?

What is a responsive navigation? How do you make a responsive navigation? This script and codes were developed by Ashepherd1 on 29 November 2022, Tuesday.

Responsive Navigation Previews
IQ Test

Responsive Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Navigation</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <div class="menu-toggle">MENU</div> <div class="menu"> <div class="category"> <a class="category-name"> <span>Furniture</span> <i class="material-icons">add</i> <div class="js-reveal"></div> </a> <ul class="sub-category"> <li>Chairs</li> <ul> <li class="sub">Dining Chairs</li> <li class="sub">Stools</li> <li class="sub">Benches</li> </ul> <li>Tables</li> <li>Sofas</li> <li>Accessories</li> </ul> </div> <div class="category"> <a class="category-name js-reveal"> <span>Lighting</span> <i class="material-icons">add</i> </a> <ul class="sub-category"> <li>Floor Lamps</li> <li>Desk Lamps</li> <li>Table Lamps</li> <li>Ceiling Lamps</li> </ul> </div> <div class="category"> <a class="category-name js-reveal"> <span>Kitchen</span> <i class="material-icons">add</i> </a> <ul class="sub-category"> <li>Cookware & Bakeware</li> <li>Cutlery</li> <li>Grilling</li> <li>Appliances</li> </ul> </div> <div class="category"> <a class="category-name js-reveal"> <span>Dining</span> <i class="material-icons">add</i> </a> <ul class="sub-category"> <li>Dinnerware</li> <li>Flatware</li> <li>Drinkware</li> <li>Serveware</li> </ul> </div> </div>
</header> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.0.0/enquire.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive Navigation - Script Codes CSS Codes

body { font-family: arial;
}
.hide { display: none;
}
.menu-toggle { width: 60px; height: 50px; padding-top: 10px; border: 1px solid silver; text-align: center;
}
.menu { width: 90%; max-width: 400px; border: 1px solid silver; padding: 3px 3px 0 3px; position: relative;
}
.category { width: 100%; box-sizing: border-box; padding: 10px 10px; border: 1px solid silver; margin-bottom: 3px; display: block;
}
.sub-category { margin: 0; padding: 0; list-style-type: none; -webkit-transition: max-height 0.4s linear; -moz-transition: max-height 0.4s linear; transition: max-height 0.4s linear; max-height: 0px; overflow: hidden;
}
.sub-category.revealed { margin: 0; padding: 0; list-style-type: none; -webkit-transition: max-height 0.4s ease-out; -moz-transition: max-height 0.4s ease-out; transition: max-height 0.4s ease-out; max-height: 300px;
}
.sub-category li { padding: 3px 0;
}
.sub-category li:hover { background: thistle;
}
.material-icons { float: right;
}
.js-reveal { display: block; padding: 10px 0; cursor: pointer;
}
.bigred { border: 3px solid red; background: pink;
}
.bigblue { border: 3px solid blue; background: aqua;
}
@media (min-width: 600px) { .js-reveal { height: 0; padding: 0; overflow: visible; } .menu-toggle { display: none; } .menu { width: 100%; max-width: 100%; box-sizing: border-box; float: left; } .category { width: 200px; display: inline; float: left; margin-right: 3px; } .sub-category { width: 100%; position: absolute; top: 50px; left: 0; border: 1px solid silver; background: white; padding: 6px; box-sizing: border-box; display: none; } .sub-category.revealed { width: 100%; position: absolute; top: 70px; left: 0; border: 1px solid silver; background: white; padding: 6px; box-sizing: border-box; display: block; } .sub-category li { margin-left: 0; } .category:hover .sub-category { height: auto; display: block; max-height: 300px; } .hidden { display: none !important; } .top { z-index: 1000; background: yellow; } .bottom { z-index: 1000; background: blue; }
}

Responsive Navigation - Script Codes JS Codes

enquire.register("screen and (max-width: 600px)",{ unmatch: function() { //$(".category-name").removeClass("js-reveal"); $(".sub").removeClass("hide"); }, match : function() { $("li.sub").addClass("hide"); //$(".category-name").addClass("js-reveal"); }
});
$('.js-reveal').on('click', function() { $(this).next('ul.sub-category').toggleClass('revealed');
});
Responsive Navigation - Script Codes
Responsive Navigation - Script Codes
Home Page Home
Developer Ashepherd1
Username ashepherd1
Uploaded November 29, 2022
Rating 3
Size 2,765 Kb
Views 14,168
Do you need developer help for Responsive Navigation?

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!

Ashepherd1 (ashepherd1) Script Codes
Name
Spill AMP Page
Pattern Library
Fade Show Reveal by height
DeferCuralate
Image swap fade on hover.
Lazy image swap fade on hover.
GR TYM
Multiple modals from top at variable heights
Menu Toggle
A Pen by ashepherd1
Create amazing sales emails 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!