jQuery Drilldown Menu
Infinite menu on your website.

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

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

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

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.

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.

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 strict compatible

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

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 compability

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

Drilldown options

$("#menu").ctDrillDown({
			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

• None known :-)

17 august 2012

• Release :-)