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!

Quellen: