Author: | catalinred |
---|---|
Views Total: | 1,949 views |
Official Page: | Go to website |
Last Update: | November 5, 2019 |
License: | MIT |
Preview:

Description:
Animenu is a lightweight responsive dropdown navigation system that collapses the horizontal navbar into a hamburger toggle menu on mobile devices.
Based on CSS3 media queries. JavaScript is used to toggle CSS classes as you click/tap the toggle button when running on the mobile device.
How to use it:
1. Load the core stylesheet style.css in the head section of the document.
<link rel="stylesheet" href="css/style.css" />
2. Create a normal dropdown navbar from a nav list.
<nav class="animenu" role="navigation" aria-label="Menu"> <button class="animenu__btn"> <span class="animenu__btn__bar"></span> <span class="animenu__btn__bar"></span> <span class="animenu__btn__bar"></span> </button> <ul class="animenu__nav"> <li><a href="#">Home</a></li> <li> <a href="#" class="animenu__nav__hasDropdown" aria-haspopup="true">jQueryScript</a> <ul class="animenu__nav__dropdown" aria-label="submenu" role="menu"> <li><a href="#" role="menuitem">jQuery Plugins</a></li> <li><a href="#" role="menuitem">Blog</a></li> <li><a href="#" role="menuitem">Contact Us</a></li> </ul> </li> <li> <a href="#" class="animenu__nav__hasDropdown" aria-haspopup="true">CSSScripnt</a> <ul class="animenu__nav__dropdown" aria-label="submenu" role="menu"> <li><a href="#" role="menuitem">Vanilla JavaScript</a></li> <li><a href="#" role="menuitem">Pure CSS/CSS3</a></li> <li><a href="#" role="menuitem">Contact Us</a></li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
3. The JavaScript to toggle CSS classes as you tap the hamburger toggle button.
// ES6 (() => { let $ = el => document.querySelector(el); $(".animenu__btn").addEventListener("click", function(){ this.classList.toggle("animenu__btn--active") $(".animenu__nav").classList.toggle("animenu__nav--active") }); })() // --- // IE 10 // (function(){ // var $ = function(el) { // return document.querySelector(el); // } // $('.animenu__btn').addEventListener('click', function() { // this.classList.toggle("animenu__btn--active") // $('.animenu__nav').classList.toggle("animenu__nav--active") // }); // })(); // --- // IE9 / IE8 // (function(){ // var animenuToggle = document.querySelector('.animenu__btn'), // animenuNav = document.querySelector('.animenu__nav'), // hasClass = function( elem, className ) { // return new RegExp( ' ' + className + ' ' ).test( ' ' + elem.className + ' ' ); // }, // toggleClass = function( elem, className ) { // var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ' ) + ' '; // if( hasClass(elem, className ) ) { // while( newClass.indexOf( ' ' + className + ' ' ) >= 0 ) { // newClass = newClass.replace( ' ' + className + ' ' , ' ' ); // } // elem.className = newClass.replace( /^\s+|\s+$/g, '' ); // } else { // elem.className += ' ' + className; // } // }, // animenuToggleNav = function (){ // toggleClass(animenuToggle, "animenu__btn--active"); // toggleClass(animenuNav, "animenu__nav--active"); // } // if (!animenuToggle.addEventListener) { // animenuToggle.attachEvent("onclick", animenuToggleNav); // } // else { // animenuToggle.addEventListener('click', animenuToggleNav); // } // })()
The dropdown button does not close on my tablet. How do I make it close?
Also I noticed on my dreamweaver program, I get a message saying there’s a syntax error on line 2 in the animenu.js Would that have anything to do with as to why the dropdown won’t close?