Skip to content
Newer
Older
100644 127 lines (93 sloc) 2.79 KB
49037bf @arian initial commit
authored Jan 2, 2010
1 MooDropMenu
2 ===========
3
4 This is a simple yet powerful drop menu class. You can create an unlimited nested menu,
5 build by the HTML tags ul and li. You can define your functions to open and close the menus
6 with the onOpen and onClose Events. This gives you great power in customizing your drop
7 down menu. You can customize the menu even more by CSS.
8
9 ![Screenshot](http://github.com/arian/MooDropMenu/raw/master/screenshot.png)
10
11 How to use
12 ----------
13
14 Just include MooDropMenu.js or MooDropMenu-min.js and the MooDropMenu.css to your HTML:
15
16 #HTML
17 <script type="text/javascript" src="/js/MooDropMenu-min.js"></script>
18 <link href="/css/MooDropMenu.css" rel="stylesheet" type="text/css" media="screen" />
19
20 And the menu structure
21
22 #HTML
23 <ul id="nav">
24 <li><a href="#">Home</a></li>
25 <li>
26 <a href="#">Blog</a>
27 <ul>
28 <li><a href="#">Archive</a></li>
29 <li>
30 <a href="#">Categories</a>
31 <ul>
32 <li><a href="#">Javascript</a></li>
33 <li><a href="#">Mootools</a></li>
34 <li><a href="#">PHP</a></li>
35 </ul>
36 </li>
37 <li><a href="#">Last comment</a></li>
38 </ul>
39 </li>
40 <li><a href="#">Contact</a></li>
41 </ul>
42
43
44 And then initialize the menu
45
46 #JS
47 window.addEvent('domready',function(){
48
49
50 // The simple way
51 $('nav').dropMenu();
52
53
54
55 // The more advanced way
56 $('nav').dropMenu({
57 onOpen: function(el){
58 el.fade('in')
59 },
60 onClose: function(el){
61 el.fade('out');
62 },
63 onInitialize: function(el){
64 el.fade('hide').set('tween',{duration:1000});
65 }
66 });
67
68
69 // Using the MooDropMenuClass
70 var dropMenu = new MooDropMenu($('nav'),{
71 onOpen: function(el){
72 el.fade('in')
73 },
74 onClose: function(el){
75 el.fade('out');
76 },
77 onInitialize: function(el){
78 el.fade('hide').set('tween',{duration:1000});
79 }
80 });
81
82 }
83
84 Documentation
85 -------------
86
d890696 @arian Style the Headers off the docs
authored Jan 2, 2010
87 ## Class: MooDropMenu ##
49037bf @arian initial commit
authored Jan 2, 2010
88
89 ### Syntax ###
90
91 #JS
92 var dropMenu = new Awf.DropMenu(element, [options]);
93
94 #### Arguments ####
95 1. element - (element,string) An Element or the string id of an Element to apply the drop menu to.
96 2. options - (object,optional) An object with options for the drop menu. See below
97
98 #### Options ####
99 - mouseoutDelay - (number: defaults to 200) The time (delay) before the onClose event get fired
100
101 #### Events ####
102 - open - (function) The function which opens a part of the menu
103 - close - (function) The function which close a menu
104 - initialize - (function) The function which to execute when the menu part (ul) get initialized
105
d890696 @arian Style the Headers off the docs
authored Jan 2, 2010
106 ## Native: Element.MooDropMenu ##
107
49037bf @arian initial commit
authored Jan 2, 2010
108
109 ### Syntax ###
110
111 #JS
112 $('myElement').dropMenu[options]);
113
114 ### Arguments ###
115 1. options - (object,optional) An object with options for the drop menu. See the MooDropMenu options
116
117 ### Returns ###
118 - (object) This Element.
119
120 Demo
121 ----
122 [http://mooshell.net/cQhC2/](http://mooshell.net/cQhC2/)
123
124 License
125 -------
126 MIT-style license.
Something went wrong with that request. Please try again.