lcdsantos / Menuspy
Licence: mit
A JavaScript library to make navigation menus highlight the item based on currently in view section.
Stars: ✭ 283
Programming Languages
javascript
184084 projects - #8 most used programming language
es6
455 projects
Projects that are alternatives of or similar to Menuspy
bsnav
An extended Bootstrap 4 menu with a bunch of utilities
Stars: ✭ 90 (-68.2%)
Mutual labels: navigation, menu, nav
React Site Nav
A kick ass site menu powered by styled components inspired by Stripe.
Stars: ✭ 155 (-45.23%)
Mutual labels: navigation, menu, nav
Luxbar
🍸 Featherweight, Responsive, CSS Only Navigation Bar
Stars: ✭ 663 (+134.28%)
Mutual labels: navigation, menu, nav
Hc Offcanvas Nav
JavaScript library for creating toggled off-canvas multi-level navigations, allowing endless nesting of submenu elements, supporting swipe gestures, keyboard interactions and ARIA attributes.
Stars: ✭ 201 (-28.98%)
Mutual labels: navigation, menu, nav
Material Bottom Nav
A bottom navigation bar adhering to the Material Design specification.
Stars: ✭ 41 (-85.51%)
Mutual labels: navigation, menu, nav
Mmenu Js
The best javascript plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp.
Stars: ✭ 2,535 (+795.76%)
Mutual labels: navigation, menu
Dropdownmenukit
UIKit drop down menu, simple yet flexible and written in Swift
Stars: ✭ 246 (-13.07%)
Mutual labels: navigation, menu
SidebarOverlay
Yet another implementation of sidebar menu, but here your menu appears over the top view controller.
Stars: ✭ 66 (-76.68%)
Mutual labels: navigation, menu
navigator
🧿 Build navigation or menu for Laravel and Awes.io. Unlimited complexity and depth, with permissions and sorting support.
Stars: ✭ 47 (-83.39%)
Mutual labels: navigation, menu
Accordion
Silky-smooth accordion widgets with no external dependencies.
Stars: ✭ 32 (-88.69%)
Mutual labels: navigation, menu
Webstackpage.github.io
❤️静态响应式网址导航网站 - webstack.cc
Stars: ✭ 3,054 (+979.15%)
Mutual labels: navigation, nav
Side Menu.ios
Animated side menu with customizable UI
Stars: ✭ 2,702 (+854.77%)
Mutual labels: navigation, menu
priority-plus
A modern implementation of the priority plus navigation pattern.
Stars: ✭ 30 (-89.4%)
Mutual labels: navigation, menu
simple-sidenav
Simple, easily customizable, animated menu.
Stars: ✭ 40 (-85.87%)
Mutual labels: navigation, menu
Layerjs
layerJS: Javascript UI composition framework
Stars: ✭ 1,825 (+544.88%)
Mutual labels: navigation, menu
Transformerslayout
🔥 App金刚区导航菜单,类似淘宝、QQ音乐等APP导航,方格布局横向多行滑动翻页带滚动条
Stars: ✭ 258 (-8.83%)
Mutual labels: navigation, menu
React Command Palette
An accessible browser compatible javascript command palette
Stars: ✭ 140 (-50.53%)
Mutual labels: navigation, menu
MenuSpy
A JavaScript library to make navigation menus highlight the item based on currently in view section.
- No dependencies
- Easy to use
- Lightweight and fast
Usage
Include MenuSpy
<script src="menuspy.js"></script>
MenuSpy
will be available in the global scope.
Or install via NPM/Yarn and require as a module
NPM
npm install menuspy
Yarn
yarn add menuspy
var MenuSpy = require('menuspy');
Initialize the plugin on your menu element
<header id="main-header">
<nav>
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#usage">Usage</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#examples">Examples</a></li>
</ul>
</nav>
</header>
You can also use data-target
on the anchor element with a selector. Example:
<a href="#anything" data-target="selector">Anything</a>
var elm = document.querySelector('#main-header');
var ms = new MenuSpy(elm);
The MenuSpy()
constructor accepts two arguments: the container element and an options object.
Options
Option | Type | Default | Description |
---|---|---|---|
menuItemSelector |
String | a[href^="#"] |
Menu items selector. |
activeClass |
String | active |
Class applied on menu item relative to the currently visible section. |
threshold |
Integer | 15 |
Ammount of space between your menu and the next section to be activated. |
enableLocationHash |
Boolean | true |
Enable or disable browser's hash location change. |
hashTimeout |
Integer | 600 |
Timeout to apply browser's hash location. |
callback |
Function | function(currentItem) {} |
A function to be called every time a new menu item activates. |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].