diff --git a/README.md b/README.md index 39339a9..8acff93 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,7 @@ PriorityNav is a lightweight pure javascript plugin that will move your menu ite ### Features - **No dependencies**
The plugin is written in pure javascript making it fast and lean. +- **Breakpoint**
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**
It automatically looks for the main navigation's siblings and calculates remaining space. - **Flexible**
Because of the point above you can have multiple inline-block/flexbox items on the same level. - **Non obstructive menu dropdown**
The dropdown menu can be closed by clicking outside and pressing escape. @@ -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