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

Archive for the ‘Menu & Navigation’ Category

Open source code has hastened the development process for everyone involved. Larger platforms such as WordPress have completely revolutionized the methods in which we create websites. But also consider the smaller plugins built for animation, form effects, and of course navigation menus.

This gallery includes the absolute best jQuery plugins for creating a dropdown navigation. Each plugin is completely free to use on any type of project. Most of them also have excellent online documentation which you can follow to customize the style, color, animation, or other similar design properties.

Dropdown Effects

simple drop down animation effects

Read the rest of this entry »

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.

Uptime Robot