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

Archive for the ‘Menu & Navigation’ Category

ProtoFish is an advanced dropdown menu script which supports multilevel navigations & built with Prototype.

The script is lightweight (1.3kb minimized), unobtrusive & cross-browser.

Multilevel Hover Menu

The hover class used & delay effect of the menus can be customized with ease.

It is accessible via keyboard using the TAB key & multiple instances of ProtoFish menus can be used on the same webpage.

For demos with various number of of levels & delay effects, click here.

jsTree is a cross-browser, free & flexible JavaScript tree component with various features.

It can create the tree from the following data sources:

  • predefined HTML
  • JSON
  • XML

Different types of nodes (open, close, rename, create, delete) can be created & supports various callbacks (onchange, oncreate, ondelete, onload, etc …).

JavaScript Tree

A great feature is async loading for creating dynamic trees by simply mentioning an URL for requesting data when needed.

Other features of jsTree:

  • drag & drop of nodes
  • multiple node selection
  • multilingual – same tree in as many languages as you like
  • ability to customize the look & feel
  • animated open/close of nodes
  • optional keyboard navigation
  • ability to move nodes between multiple trees

The component can also work as a jQuery plugin.

jQuery Menu is a solid menu system that helps creating dropdown, iPod drilldown and flyout styled navigations easily.

It is the updated & much improved version of the iPod-like menu mentioned here (WRD post).

jQuery Menu System

The menu system uses a hierarchical unordered list for creating the menus & sub-menus.

It is ready with ThemeRoller which makes it very easy to customize the look and has ARIA (Accessible Rich Internet Applications Suite) support.

With various configuration options & ease of use, jQuery Menu is definitely a very helpful solution for creating menus.

Leigeber is presenting a standalone accordion script that has multi-level support.

The script is lightweight (1.4kb) & it is an updated version of an accordion script by the same author (see WRD post).

Multi Level Accordion Script

The accordion is called with a single line JavaScript function & if wanted, the levels can be toggled from outside links besides the title of each level.

The script is compatible with all major browsers.

jBreadCrumb is a jQuery plugin for displaying breadcrumb navigations in a more flexible & smarter way.

As the length of a breadcrumb menu may be very long & the common method used for this problem is limiting th eamount of menus used, jBreadCrumb follows another route.

jQuery BreadCrumb Menu

It creates a collapsible interface that smartly decides the display method according to the amount and length of the elements.

This is a better navigation in means of usability & SEO.

Usage is not complicated & it only requires the jQuery Easing plugin.

Mif.Tree is a quality solution for creating tree menus with MooTools.

The code is very flexible & lets you control every part of the navigation like:

  • Adding new rows
  • Drag’n drops
  • Sorting, renaming & more.

MooTools Tree Menu

The tree menu created can also be browsed via keyboard & supports checkboxed tree menus.

Mif.Tree is very well-documented & presents vaious examples.

Veerle’s blog is presenting a tutorial, with source codes, on creating a simple & scalable css-based breadcrumbs.

What are breadcumbs?

From Wikipedia: Breadcrumbs or breadcrumb trail are a navigation technique used in user interfaces. Its purpose is to give users a way to keep track of their location within programs or documents.

CSS Breadcrumbs

Only 1 image is used for creating this navigation which is the seperator. It is a bigger image than the displayed one considering the breadcrumb will be scaled when needed.

A handy resource on a method that is used in almost every web application. To see the demo, click here.

NETTUTS is presenting a beautiful tutorial, prepared by Trevor Davis, for creating a functional portfolio page using jQuery.

Once a category is clicked in the page, content is filtered accordingly & displayed with fadeIn/fadeOut effects.

jQuery Portfolio

It is possible to modify the interface provided easily by changing the effects used, like disabling items by applying opacity rather than hiding which is totally up to the imagination of everyone.

The tutorial is very detailed & comes with the source files. A demo can be found here.

ListNav is a jQuery plugin for creating alphabetical navigations from lists.

Once configured, a customizable (via CSS) navigation bar appears above the list, displaying letters from A to Z. When a letter is clicked, the items that start with that letter is displayed.

jQuery Alphabetical Lists

ListNav shows the number of items under a letter when the letter is hovered.

The plugin is optimized for long lists & can work with both ul and ol lists.

It also supports multiple navigations at the same page and works with all major browsers.

Pop! is a simple but effective jQuery plugin for creating dropdown menus.

It enables you to store any content in a container & shows/hides it with the clicks.

jQuery Simple Dropdown Menu

How to use it?

  • Insert the jquery.pop.js file into your webpage (make sure jQuery is inserted too)
  • Initialize it:

 <script type='text/javascript'>
   $(document).ready(function(){
     $.pop();
   });
</script>

  • Using the preferred pop! class, wrap the content:

<div class="pop">
   any content to display
</div>

That’s it.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com