responsive-nav.js

responsive-nav.js copied to clipboard

Many website navigation experiences employ mobile-style nav for all device experiences (e.g. http://dockyard.com/). This PR adds support for such an experience by exposing an alwaysDropdown option.

By default, alwaysDropdown is set to false, which brings about no change to responsive-nav.js. However, if the developer sets alwaysDropdown to true then the rules that define the navigation layout in the MQ in responsive-nav.css will not take effect. The result is mobile-style navigation no matter how wide the viewport is.

Backwards-compatible. Tests, demos, and version changed accordingly.

Hmm, I’m unsure why this needs a new option or any edits to the plugin? This can be already done by just keeping the navigation toggle visible on all viewports (https://github.com/viljamis/responsive-nav.js#changing-the-breakpoint). Wondering if a better solution would instead be to just add documention on how to achieve this?

@viljamis, thanks for the response.

That's how I've had it implemented but it seemed like an ugly CSS hack and one that is more likely to change than a hard-coded option.

Maybe there is a better implementation than what I suggested but when using with bower to install and update it would not be wise for me to go into the downloaded source code and edit. I import the responsive-nav code directly into my application. Without an option like I suggested, I am forced to override the vendor files in my application file using the css below. I don't see this being the most maintainable method if the base css were to change and it's adding unnecessary CSS.

// Override old MQ
@media screen and (min-width: 40em) {
  .js .nav-collapse {
    position: absolute;
  }
  .js .nav-collapse.closed {
    max-height: auto;
  }
  .nav-toggle {
    display: initial;
  }
}

// Set new one to take up whole screen
@media screen and (min-width: 2000em) {
  .js .nav-collapse {
    position: relative;
  }
  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }
}