Archive for the ‘Menu & Navigation’ Category

Sticky menus are used widely as they help minimizing the need to scroll for reaching to the menu.

Smint is a jQuery plugin that can turn any given element into a sticky menu instantly.

jQuery Sticky Menu - Smint

Also, the plugin has support for smooth scrolling (which is usually used in one-page websites).

The plugin is almost plug ‘n’ play and the only customization provided is “scrolling speed”.

Sliding side menus are widely used in mobile apps as they are only visible on-demand and save space.

jQuery.mmenu is a slick plugin that brings the same behavior into any -mobile- web layout.

It transforms unordered lists with unlimited sub-lists into menu items and has multiple options for customization.

jQuery sliding menu for mobile - mmenu

The options include the position of the menu (left/right), if a counter for the menu items will be displayed or not and more.

jQuery.mmenu can also be controlled (opening, closing and toggling the menu) with simple functions.

There are pretty standard ways to approach navigation when it comes to responsive layouts and, previously, responsive jQuery menu solutions were shared at WRD.

FlexNav is another jQuery plugin for easily handling menus in responsive layouts and it does that well for complex ones too.

FlexNav jQuery Plugin

The plugin has support for unlimited sub-menus that work similarly in both desktop and mobile layouts.

It has no-JS fallback, works with keyboard-tabs too (for accessibility) and touch-friendly.

On small screens, displaying a button/icon that can show/hide menu items in a single column is a very common method for responsive navigations. Even the icon used is pretty standard.

Responsive-Nav, a JavaScript plugin, simplifies creating such responsive menus with a lightweigt footprint (1.6kb minified-gzipped).

Responsive Nav

It makes use of touch events and CSS3 transitions for a great performance and works on screen readers + with a JavaScript-disabled state.

Also, the plugin is standalone and has callbacks for the init, open and close events.

Hidden side menus are a good way of enabling users to view the navigation options on request. And, they are perfect for responsive layouts as they save space.

Sidr is a jQuery plugin for creating “hidden side menus” on-the-fly.

Sidr - jQuery Plugin

It can be set to be displayed at right or left, a single page can have multiple side menus and offers multiple methods (existing or remote content) for loading the content.

For responsive layouts, a Sidr menu can be attached to a button (that is displayed for specific screen sizes with media -queries) and it’ll be a very handy navigation solution for small screens.