PriorityNav

Dynamically show / hide menu items to make them fit their parent.

demo
changelog

Install

bower install priorityNav --save

Usage

1. Include priorityNav

Include priorityNav (css, js)

<link rel="stylesheet" href="priorityNav.css">

<!--[if (lt IE 9)]>
  <script src="priorityNav-helper.ie8.js"></script>
<![endif]-->
<script src="priorityNav.js"></script>

or priorityNav.native (css, js) and go-native (10k).

<link rel="stylesheet" href="priorityNav.css">

<!--[if (lt IE 9)]>
  <script src="go-native.ie8.js"></script>
<![endif]-->
<script src="go-native.js"></script>
<script src="priorityNav.native.js"></script>

2. Call priorityNav

Add class .priority-nav to nav container, Or include priority-nav if you use SASS:

<!-- add class priority-nav -->
<nav class="nav priority-nav">
  <ul>
   <li>...</li>
   <li>...</li>
   <li>...</li>
  </ul>
</nav>

// or include priority-nav
.nav { @include priority-nav(); }

Then call priorityNav.

priorityNav({
  nav: '.nav',
  hideAll: 300,
});

Options

Default:

{
  nav: '.priority-nav',
  button: 'more',
  showAll: 0,
  hideAll: 0,
}

• nav:
• button: button inner html.
• showAll: breakpoint for show all menu items.
• hideAll: breakpoint for hide all menu items.

Browser Support

Tested on IE8+ and mordern browsers.

reference links

https://css-tricks.com/the-priority-navigation-pattern/
https://css-tricks.com/diy-priority-plus-nav/

License

This project is available under the MIT license.