Skip to content

Commit

Permalink
updated readme with breakpoint explanation
Browse files Browse the repository at this point in the history
  • Loading branch information
gijsroge committed Jun 27, 2015
1 parent 1c93cfe commit b4cd15c
Showing 1 changed file with 12 additions and 9 deletions.
21 changes: 12 additions & 9 deletions README.md
Expand Up @@ -8,6 +8,7 @@ PriorityNav is a lightweight pure javascript plugin that will move your menu ite

### Features
- **No dependencies**<br>The plugin is written in pure javascript making it fast and lean.
- **Breakpoint**<br>When the breakpoint has been reached the plugin will automaticly move all items to the dropdown & change the toggle label to navDropdownBreakpointLabel.
- **Smart calculation of available space**<br>It automatically looks for the main navigation's siblings and calculates remaining space.
- **Flexible**<br>Because of the point above you can have multiple inline-block/flexbox items on the same level.
- **Non obstructive menu dropdown**<br>The dropdown menu can be closed by clicking outside and pressing escape.
Expand Down Expand Up @@ -45,15 +46,17 @@ Ideal html structure

### Options
```js
initClass: "js-priorityNav", // Class that will be printed on html element to allow conditional css styling.
mainNavWrapper: "nav", // mainnav wrapper selector (must be direct parent from mainNav)
mainNav: "ul", // mainnav selector. (must be inline-block)
navDropdown: ".nav__dropdown", // class used for the dropdown.
navDropdownToggle: ".nav__dropdown-toggle", // class used for the dropdown toggle.
navDropdownLabel: "more", // Text that is used for the dropdown toggle.
throttleDelay: 50, // this will throttle the calculating logic on resize because i'm a responsible dev.
offsetPixels: 0, // increase to decrease the time it takes to move an item.
count: true, // prints the amount of items are moved to the attribute data-count.
initClass: "js-priorityNav", // Class that will be printed on html element to allow conditional css styling.
mainNavWrapper: "nav", // mainnav wrapper selector (must be direct parent from mainNav)
mainNav: "ul", // mainnav selector. (must be inline-block)
navDropdown: ".nav__dropdown", // class used for the dropdown.
navDropdownToggle: ".nav__dropdown-toggle", // class used for the dropdown toggle.
navDropdownLabel: "more", // Text that is used for the dropdown toggle.
navDropdownBreakpointLabel: "menu", //button label for navDropdownToggle when the breakPoint is reached.
breakPoint: 500, //amount of pixels when all menu items should be moved to dropdown to simulate a mobile menu
throttleDelay: 50, // this will throttle the calculating logic on resize because i'm a responsible dev.
offsetPixels: 0, // increase to decrease the time it takes to move an item.
count: true, // prints the amount of items are moved to the attribute data-count to style with css counter.

//Callbacks
moved: function () {}, // executed when item is moved to dropdown
Expand Down

0 comments on commit b4cd15c

Please sign in to comment.