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

Archive for the ‘Menu & Navigation’ Category

CSSPlay is presenting a chic circular menu that can have sub-menus.

Within a limited space, the menu offers a comprehensive browsing experience.

Circular Menu

There is also a small information that can be displayed when an item is hovered.

It uses ordered-lists for all major browsers & uses some tables if the browser is IE6.

P.S. The menu is not totally free. A donation is required for use.

CSS Drop-Down Menu Framework is a free & cross-browser solution to create good looking menus.

Download package already contains examples but new themes can be created very easily.

Cross Browser CSS Menu

Menus can be transformed by only changing the class name. Available transformations are:

  • horizontal
  • vertical left-to-right
  • vertical right-to-left
  • horizontal linear
  • horizontal upwards.

The framework normally uses only CSS but for IE6, there is a JavaScript file that must be included.

idTabs is a jQuery plugin for creating simple to advanced tabs.

Tabs can be added dynamically, the "selected" tab can be acquired, idTabs can be binded to different events like mouseover.

jQuery Tab Plugin

Any element with a class name = idTabs becomes a tabbed area. Every link inside this class becomes a tab & the divs mentioned in these links become the content holders. To be more clear:

<ul class="idTabs">
  <li><a href="#jquery">jQuery</a></li>
  <li><a href="#official">Tabs 3</a></li>
</ul>
<div id="jquery">If you haven't checked out ...</div>
<div id="official">idTabs is only a simple ...</div>

is a basic 2 tabbed menu.

Scrollable is a flexible & lightweight (3.9kb) jQuery plugin for creating scrollable contents.

Any content (HTML, video, text..) can be used as a scrolling item. And, it supports vertical scrolling besides the standard horizontal scrolling which makes it very ideal, specially for news sites or portals to present the flash contents.

JQuery Scroll Plugin

Other features of Scrollable are:

  • Setting the number of visible items
  • Mouse, arrow keys and mousewheel (requires mousewheel.js) support
  • Programmatic actions: next, prev, nextPage, prevPage, seekTo, begin, end
  • Know when list is scrolled with custom event listener

This jQuery plugin is built by the FlowPlayer team (see WRD post) and includes great examples (this & this) with FlowPlayer integration.

Superfish is an advanced suckerfish menu plugin for jQuery.

It turns a standard CSS dropdown menu and tranforms it to a more powerful one (it gracefully degrades).

jQuery Suckerfish Menu

It supports both horizontal & vertical menus and unlimited sub-menus can be defined.

Considering the menu is generated from a CSS-dropdown menu, every sub can be easily styled too.

Other features of Superfish:

  • Suckerfish-style hover support for IE6.
  • Timed delay on mouseout.
  • Animation of sub-menu reveal.
  • Keyboard accessibility.
  • Indicates the presence of sub-menus by automatically adding arrow images to relevant anchors.
  • Drop shadows for capable browsers – degrades gracefully for Internet Explorer 6. Can disable shadows completely via options object.
  • Can show the path to your current page while the menu is idle.
  • Optional callback functions. The ‘this’ keyword within the handlers you attach will refer to the animated ul sub-menu.

MenuMatic, a MooTools 1.2 class, makes creating dropdown menus easier, flexible & SEO friendly.

For users without JavaScript, it switches back on a CSS menu system.

MooTools DropDown Menu

Some features of MenuMatic:

  • SEO Friendly: Manipulates ıonly the existing links.
  • User Friendly: Hide-delay speed can be adjusted.
  • Accessible: Tab key navigates through main menu items & arrow keys can be used for dropdowns..
  • Fails Gracefully: When no JavaScript is available, switcches to suckerfish CSS based drop down menu system.
  • Stylish: Total style control with CSS.
  • Flexible: Many other controls like the opacity of menus…

The class can be used for both horizontal & vertical menus .It is also compatible with all major browsers.

P.S. Thanks to Jason from GreenGeckoDesign for the suggestion.

UvumiTools has 4 great & free MooTools plugins that can save your development time.

MooTools Crop

MooTools Crop

This is an easy to use cross-browser crop interface that has options like:

  • Setting the minimum size
  • Keeping the aspect ratio
  • Live preview of the area to be cropped
  • Supports HTML resizing

MooTools Image Gallery

MooTools Gallery

This plugin enables you to create good-looking image galleries.

Users can click a thumbnail and watch the gallery transform into a slideshow, which is then navigated by clicking the left column or by scrolling with the mouse wheel. A click on the photo being displayed brings the user back to the contact sheet view.

MooTools Dock Menu

MooTools Dock Menu

This dock menu, similar to a Mac interface, is passive under the screen & gets activated when an item is mouse-overed.

The menu is created from a valid unordered list & can be applied within minutes.

MooTools Dropdown Menu

MooTools Dropdown Menu

A cross-browser, animated dropdown menu with unlimited levels support.

It is created from unordered lists & can be totally customized via CSS.

CSS Menu Builder is an online menu builder which enables you to create 30+ horizontal, 700+ vertical & breadcrumb menus (without the unlimited color combinations).

CSS Menu Builder

With an Ajaxed & simple to use interface, menus can be created on the fly and HTML, CSS & necessary image files can be downloaded easily (or a complete ZIP file can be downloaded).

While creating a filebrowser for a project, I have tried several JavaScript tree menus and found this one the easiest to work with.

dTree is an easy to setup & use classic JavaScript tree menu.

With a XHTML 1.0 strict validated output, this tree menu supports unlimited number of levels and remembers the state between pages.

http://www.destroydrop.com/javascripts/tree/default.html

Other features of dTree:

  • Can be used with or without frames
  • Possible to have as many trees as you like on a page
  • All major browsers supported
  • Alternative images for each node

The items don’t need to be in an order within the code as you can re-order them. This is a functional feature when creating the menu from a database.

The script is well-documented and this example shows how flexible it is.

This is a nice animated menu built with MooTools.

The trick of the menu is a Flashy hover effect of the arrow (or any element you want).

MooTools Animated Menu

To use this menu script, you don’t even have to play with JavaScript except defining the variables:

  • background image container
  • nav elements
  • current nav element’s div id
  • background image’s y coordinate
  • left offset of the image

A well-described usage of the menu including the download of all the necessary files can be found at the script’s website.

Uptime Robot
feed-holder
FeedBurner
HotScripts Marketplace
PSD2HTML.com