19
Apr
// php the_time('Y') ?>
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.

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.
Requirements: jQuery
Compatibility: All Major Browsers
10
Apr
// php the_time('Y') ?>
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).

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.
Requirements: No Requirements
Compatibility: All Major Browsers
2
Apr
// php the_time('Y') ?>
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.

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.
Requirements: jQuery
Compatibility: All Major Browsers
13
Nov
// php the_time('Y') ?>
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.).

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.
Requirements: jQuery
Compatibility: All Major Browsers
24
Oct
// php the_time('Y') ?>
Makisu is an experimental and very original dropdown menu with a 3D appearance which can fold up and down with a slick effect.
The menu uses CSS 3D and comes as a jQuery plugin which auto-converts any targeted list elements.

It has several options for customization like the duration of the animation, shading color, perspective used for the menu and more.
For browsers without CSS 3D support, it falls back to a standard list.
Requirements: jQuery
Compatibility: Most Modern Browsers
23
May
// php the_time('Y') ?>
Improving (manipulating) standard HTML elements with JavaScript for a better usability makes sense when used wisely.
ddSlick, a lightweight jQuery plugin, does that by mimicking the behavior of list-menus with a better look and more information.
It works as a drop-down menu where we can use images and description besides a simple text.

The data source that populates the drop-down options is JSON and there are multiple options for customizing the functionality. The look & feel can be changed as well (very few styles used).
There is also a callback function that is fired when an option is selected (which is good for auto-modifying a hidden form for a possible submit, etc.).
Requirements: jQuery
Compatibility: All Major Browsers
26
Oct
// php the_time('Y') ?>
Codrops, a web development blog publishing very nice tutorials, has released a set of creative navigation examples built with pure CSS(3).
There are 10 unique examples, all have the same HTML structure but different CSS styles that make use of CSS transitions and animations.
Icons used are from a symbols typeface, so, no images are used in the examples but only HTML, CSS and a custom font file.
They are definitely beautiful "as is" and also a good starting point to create new ones.

Requirements: No Requirements
Compatibility: All Modern Browsers
8
Oct
// php the_time('Y') ?>
Flexible Nav is a jQuery plugin that can automatically generate a sitemap-like navigation for web pages.
It analyzes the heading tags of the page and displays them on the right side of the page as links by proportionally keeping the distances between each item.
Each link gets users to the related items and, as the user scrolls, the navigation keeps showing "on which part of the page you are".

As the name states, the plugin is flexible in many aspects; it can target any custom tags (rather than headings) or create the navigation for a given wrapper rather than the whole <body>.
The plugin is specially handy for web pages that are updated frequently in a given structure as there will be no need to update the navigation each time.
Requirements: jQuery
Compatibility: All Major Browsers
27
Dec
// php the_time('Y') ?>
If you have a web application where users need to know few tricks before using it, guiding them in the beginning would be a good idea.
Codrops is sharing a very nice jQuery script that makes creating a chic site tour so easy.

It works by adding classes (with a specific format) to the elements to be highlighted and configuring them to display any custom text.
The script can work manually by the user clicking prev-next links or totally automated in the pre-defined order.
Tooltips displaying the information can also be customized as color, position and the duration they will be active.
Requirements: jQuery
Compatibility: All Major Browsers
21
Dec
// php the_time('Y') ?>
jMenu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus.
Besides jQuery, it also requires jQuery UI and supports all the effects of this library (like fadeIn or slideDown).

The markup of the menu is pretty clean as it makes use of nested lists.
The look and feel of the output is set in a CSS file so updating it without touching the JS code is possible.
P.S. The resource page is in French (Google-translated version), however, demos and the JavaScript code is commented in English.
Requirements: jQuery & jQuery UI
Compatibility: All Major Browsers