jQuery Drilldown Menu
Infinite menu on your website.

Example 1

Skin: minimal

Example 2

Skin: minimal Features: breadcrumbs attached with animation on breadcrumb click

Example 3

Skin: iphone Features: modified breadrumbs usage

Example 4

Skin: colorful Features: high level API for search and breadcrumbs used, opening node on breadcrumb link is not animated

Example 5

Skin: classic-light Features: high level API for search, custom breadcrumbs usage

Example 6

Skin: system Features: high level API for search, custom breadcrumbs usage, log of operations displayed, API for opening any element used

Example 7

Skin: classic-light Features: swipe event attached

Example 8

Skin: colorful Features: ajax mode with preloading

Example 9

Skin: minimal Features: keyboard navigation

Example 10

Skin: colorful Features: different easing, changed speed of animation, html based state (default open: cars » sport)

Example 11

Skin: system Features: callbacks and event usage

Example 12

Skin: minimal Features: custom ajax queries on menu position click

Note: all features shown might be implemented in all skins

Main features of jQuery Drilldown Menu

I18N support

Search functionality

Let the user type in searched phrase. The plugin will automagically open node with matched content and will highlight the exact match. If there is more than one match, it will show breadcrumbs to all matches. No PHP or any other server side is needed.

Ajax mode supported

Ajax mode

Why load everything at the beginning? Isn't that smart to begin with first screen only and then load only nodes that user needs? Don't worry about lags - if you want, menu may do smart preloading of consequent screens for you, it's just one option.

Keyboard Navigation Available

Keyboard navigation

Type ctrl+m to activate keyboard navigation. From now on you may use arrows (↑, ↓, ←, →) to select wanted element, go into it or go up one level. Use enter to follow the link.

Easily skinnable

Easily skinnable

We've prepared 5 skins for you. Don't like any of them? It's just one CSS file you need to edit - it's that simple. Feel free to modify any predefined CSS.

E-mail or logfile

Extremely easy, powerful when needed

Easy for users with basic needs. Just prepare HTML markup (nothing but couple of "ul" and "li" elements) and call our plugin. Want to attach breadcrumbs and search - there are two high-level methods for that. Want to have full control of plugins behaviour thru API? Open nodes? Go up for given numbers of steps? Handle search differently? Change any option on runtime? There are low level methods for that.

Swipe mode

Mobile devices ready!

Our menu was tested on iPhone an iPad devices. What's more, you may use handy "swipe" event known from smartphones on your pc - see swipe example.

HTML5 and XHTML compatible

HTML5 and XHTML strict compatible

Our drilldown menu works perfectly fine on HTML5 websites as well as on older XHTML strict (or transitional) websites.

Smooth auto resize

Smooth auto resize feature

Whenever new screen is being opened, the plugin checks it height and automatically adjusts the container height in smooth, animated way.

Cross Browser

Cross-browser compability

Every major browser in the newest version is supported. CSS3 skins fall back nice for older browsers.

Configuration options

Drilldown options

			myClass: "ctDrillDown", // class given automatically to the element
			expandableClass: "expandable", // Non ajax mode: this class will be given to "li" with children. Ajax mode: give this class to "li" that has children.
			onOpened: $.noop, // Callback fired just after submenu was opened (element passed as an argument)
			onBeforeOpen: $.noop, // Callback fired just before submenu opening (element passed as an argument)
			onClosed: $.noop, // Callback fired just after submenu was closed (closed element passed as an argument)
			onBeforeClose: $.noop, // Callback fired just before submenu is closed (closing element passed as an argument)
			duration: 300, // Opening/closing animation time
			easing: "linear", // Type of easing (see jquery ui docs for more)
			currentClass: "current", // Menu will automatically open on the element having this class on load (think of stateful menu)
			useCookies: false, // Set it true to activate cookie-based stateful
			heightAutoAdjust: true, // If true, plugin will update the height of container automatically based on content
			matchClass: "match", // class given to element found by search method
			startName: "Start", // name of first breadcrumb
			ajax: false, // set true to enable ajax mode
			ajaxPreloading: true, // used only in ajax mode - should menu preload following screens
			event: "click", // event on which to open submenu
			keyboardNavigation: true, // is keyboard navigation active
			activeClass: "active" // currently active position, i.e. selected on keyboard

Drilldown events

Drill down menu triggers following events:

  • drilldownchange - fired whenever the state of menu is changed (going up or down). Following arguments are passed automatically: $el - node that was opened or closed, moveDown - boolean indicating if movement was down (true) or up (false).

Drilldown methods

  • goTo - open given node
  • goUp - go up (back) given number of levels
  • goTop - go to the top of the menu
  • option - get or set option
  • search - low level search function - returns breadcrumbs to given phrase and opens menu if there was only 1 match
  • getBreadcrumbs - returns breadcrumbs to currently opened or to given element as an array
  • searchWrapper - high level search function - draws clickable breadcrumbs for all matches, opens menu if there was only 1 match
  • getBreadcrumbsFormatted - high level - formats given breadcrumbs array as a clickable HTML nodes and puts them to given container

Known issues

  • None known :-)


17 august 2012

  • Release :-)