Responsive Nav
Kleine, kompakte Mobile Nav ohne weitere Abhängigkeiten und SchnickSchnack
JS Call:
var navigation = responsiveNav(".nav-collapse", {
animate: true, // Boolean: Use CSS3 transitions, true or false
transition: 284, // Integer: Speed of the transition, in milliseconds
label: "Menu", // String: Label for the navigation toggle
insert: "after", // String: Insert the toggle before or after the navigation
customToggle: "", // Selector: Specify the ID of a custom toggle
closeOnNavClick: true, // Boolean: Close the navigation when one of the links are clicked
openPos: "relative", // String: Position of the opened nav, relative or static
navClass: "nav-collapse", // String: Default CSS class. If changed, you need to edit the CSS too!
navActiveClass: "js-nav-active", // String: Class that is added to element when nav is active
jsClass: "js", // String: 'JS enabled' class which is added to element
init: function(){}, // Function: Init callback
open: function(){}, // Function: Open callback
close: function(){} // Function: Close callback
});
Vorteile:
- Keine Abhängigkeiten, kein jQuery
- Sehr klein! Nur 1kb minified und gzippt
- Methods wie .destroy .resize .toggle .open .close
- Mobile Nav wird ohne JS einfach gezeigt
Nachteile:
- CSS kompliziert!
- Funktioniert auf meinem Biligtablet Samsung nicht. Klappt immer wieder zu...
Fazit:
- Super!