Skip to content
madguy edited this page Feb 15, 2011 · 8 revisions

SmoothMenu addon for jQuery UI

Japanease document is README.ja.md

License

Copyright 2011, Madguy
MIT-style License.
http://www.opensource.org/licenses/mit-license.php

Inspired by MenuMatic
http://greengeckodesign.com/menumatic

Description

jQuery.ui.SmoothMenu is

SmoothMenu is the jQuery plugin that implemented the movement that is near to MenuMatic of MooTools.

Futures

  • hierarchical menu
  • horizontal and vertical support
  • jQuery ThemeRoller
  • A function of basic jQuery UI

Demo

http://madguy.github.com/jQuery.ui.smoothMenu/

Required

  • jQuery v1.4.x or heigher
  • jQuery UI v1.8.x or heigher
    • jquery.ui.core.js
    • jquery.ui.widget.js

Usage

HTML

JavaScript $('#root > li').smoothMenu();

Options

The child element tag of the list

Time before an element disappearing after a mouse left it. (Millisec)

The open direction of list.

Id of the container element.

The time of the open/close animetion.(Millisec) Time to take till an element opens. (Millisec)

Name Type Default Description
childTag String 'li' The child element tag of the list
delay Number 1000 Time before an element disappearing after a mouse left it. (Millisec)
direction String 'horizontal' The open direction of list. horizontal or vertical
dockId String 'ui_smooth_menu_container' Id of the container element
duration Number 200 The time of the open/close animetion.(Millisec)
easing String 'swing' Easing of open/close animation
icon Boolean true Indication setting of the icon
opacity Number 0.95 Transparency when an element was opened
parentTag String 'ul' Parent element tag of the list
zIndex Number 1 z-index appointment of the widget. By 1 increases at every recurrence.

Method

Name Usage Description
destroy .smoothMenu('destroy') Back to the initial state to remove the widget.
disable .smoothMenu('disable') Disable the widget.
content .smoothMenu('content') Return the list of child elements.
enable .smoothMenu('enable') Enable the widget.
hide .smoothMenu('hide', [duration]) Hide the widget. You can specify the speed duration.
option .smoothMenu('option' , optionName , [value]) Get or set any button option. If no value is specified, will act as a getter.
option .smoothMenu('option' , options) Set multiple button options at once by providing an options object.
rootContainer .smoothMenu('rootContainer') Return the parent element.
show .smoothMenu('show', [duration]) Show the widget. You can specify the speed duration.
widget .smoothMenu('widget') Returns the element.

Event

Name Type Description
create smoothmenucreate This event is triggered when smoothMenu is created.
beforeShow smoothmenubeforeshow This event is triggered when smoothMenu before open. If call the event.preventDefault method or return false.Operation is canceled.
onShow smoothmenuonshow This event is triggered when smoothMenu is opened.
beforeHide smoothmenubeforehide This event is triggered when smoothMenu before close. If call the event.preventDefault method or return false.Operation is canceled.
onHide smoothmenuberonhide This event is triggered when smoothMenu is closed.

Advertisement

The author has operated the following services. Please see if you like.

ToNaMeT
http://www.tonamet.com