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.