This is a demo of Menu Hotkeys. Hold down the Alt key and click a menu item.

Note: The menu item links are to the sections of this document.

Why

Menu Hotkeys is a jQuery Plugin which allows users to quickly assign hotkeys (keyboard shortcuts) to HTML menu items. Navigation is one of the most important usability aspects of a web page. Being able to quickly navigate to pages within a website is a huge win for users. Menu Hotkeys is a great way to make your websites navigation more user friendly.

How it Works

1) Hold Down the Alt Key and Click a Menu Item to Add a Hotkey

Hotkey Prompt

Enter your hotkey.

2) Click Add to Add the Hotkey to the Menu Item

Hotkey Indicator

After clicking the Add Button, the Hotkey will be added and an Indicator will appear.

3) Typing the Keyboard Shortcut Will Now Navigate to the Page

Typing Shortcut

Typing Shortcut

Dependencies

Δ Hope to remove this dependency in the near future

Getting Started

Download the production version or the development version.

In your web page:

<script src="dist/menu-hotkeys.min.js"></script>
    <script src="jquery.js"></script>
    <script src="bootstrap-popover.js"></script>
    <script src="dist/menu-hotkeys.min.js"></script>
    <script>
      $('#nav').menuHotkeys();
    </script>

Any nested links under the #nav will get the ability to have hotkeys assigned. By default, shortcuts (hotkeys) are persisted to window.localStorage.

Options

Option Name Description Default Value
hotkeyPrefix Starting keyboard sequence for all hotkeys. ctrl + shift
menuHotkeyUrl URL to GET persisted shortcuts from and PUT to save None

Note: menuHotkeyUrl will PUT to menuHotkeyUrl/{menuItemName}

Example:

<script>
      $('#nav').menuHotkeys({
        hotkeyPrefix: 'alt',
        menuHotkeyUrl: 'https://localhost/menu-hotkeys'
      });
    </script>

Events

This is the list of events that are fired when certain actions happen:

Event Name Action Arguments
menu-hotkeys-loaded When the persisted hotkeys are loaded Array of Objects with name and hotkey properties
menu-hotkey-input-open When Hotkey Input Prompt opens. None
menu-hotkey-input-close When Hotkey Input Prompt closes. None
menu-hotkey-input-error When Hotkey Input Prompt has an input error. error menu-hotkey-updated