Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Menu & Navigation’ Category

Mobile responsive design is one of the greatest achievements in recent web design history. A very popular responsive technique is the hidden drawer sliding navigation menu. This can be found in smartphone applications but has also grown into a popular choice for web development. In this post I’ve organized ten free plugins that you can use to create quick & easy sliding navigation menus.


shifter jquery sliding menu plugin

Read the rest of this entry »

It is usually not easy to present “menus that are few levels deep” in a user-friendly way. And, that’s specially hard for cross-platform layouts.

Multi-Level Push Menu is a jQuery plugin that provides a very good solution to such menus.

Multi-Level Menu jQuery

It has support for unlimited levels, works cross browser/platform and makes things much easier for touch devices with swipe gestures.

The menu can be set to next from left-to-right or right-to-left and all works with a simple markup (unordered lists).

In mobile layouts, the space is limited and it should be used wisely to display as much as possible.

That was when “off-canvas navigations (hidden menus which appear when requested)” became popular. And now, they are used on desktop too.

Off-Canvas Navigations

Codrops has recently published an article which describes how such navigations can be created and lists multiple transitions for them.

There are 10+ lovely transitions and a demo page that features them all.

P.S. If you remember, there was also another code, Meny, for such navigations.

For responsive layouts, we should consider how every web element will behave in different screen sizes.

There are pretty standard solutions for elements and components like images, video,  typography, navigation, etc.

However, when it comes to multi-level menus, things can get complicated as it gets difficult to “enable the user to navigate” in such a limited space.

jQuery slimMenu

slimMenu is a jQuery plugin that solves this issue nicely.

It converts an unordered list with any depth into a menu with sub-menus and, for smaller screens, the menu becomes a drill-down navigation.

It is touch-friendly and has several options for customization like the animation or its speed.

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.

Kwicks, the sliding elements effect which became popular with the old MooTools page, has a slick jQuery version named “Kwicks For jQuery“.

The plugin accepts a flexible markup where a container wraps the sliding panels (can be an unordered list,  a <div> wrappping other <div>s , etc.).

Kwicks For jQuery

It has options for customization including the size, max-min width of the panels, margin between them, duration and easing for the effect and the behavior to be triggered for the effect.

Also, Kwicks can work both horizontally + vertically and it has an API for interacting with the elements and the effect.

Uptime Robot