|
1 |
|
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
3 "http://www.w3.org/TR/html4/strict.dtd"> |
|
4 <html> |
|
5 <head> |
|
6 <meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
7 <title>YUI Library Examples: MenuNav Node Plugin</title> |
|
8 |
|
9 <link rel="stylesheet" type="text/css" href="../../build/cssreset/reset-min.css"> |
|
10 <link rel="stylesheet" type="text/css" href="../../build/cssfonts/fonts-min.css"> |
|
11 <link rel="stylesheet" type="text/css" href="../../build/cssgrids/grids-min.css"> |
|
12 <link rel="stylesheet" type="text/css" href="../../build/cssbase/base-min.css"> |
|
13 <link rel="stylesheet" type="text/css" href="assets/node-menunav-examples-base.css"> |
|
14 |
|
15 <script type="text/javascript"> |
|
16 |
|
17 // Hide the menu while its dependencies are being loaded |
|
18 |
|
19 document.documentElement.className = "yui-loading"; |
|
20 |
|
21 </script> |
|
22 |
|
23 </head> |
|
24 <body> |
|
25 |
|
26 <div class="yui-d0"> |
|
27 |
|
28 <h1>Header</h1> |
|
29 |
|
30 <div class="yui-t1"> |
|
31 |
|
32 <div class="yui-main"> |
|
33 <div class="yui-b"> |
|
34 |
|
35 <div id="productsandservices" class="yui-menu yui-menu-horizontal yui-splitbuttonnav"> |
|
36 <div class="yui-menu-content"> |
|
37 <ul class="first-of-type"> |
|
38 <li> |
|
39 |
|
40 <span class="yui-menu-label"> |
|
41 <a href="http://answers.yahoo.com">Answers</a> |
|
42 <a href="#answers-options" class="yui-menu-toggle">Answers Options</a> |
|
43 </span> |
|
44 |
|
45 <div id="answers-options" class="yui-menu"> |
|
46 <div class="yui-menu-content"> |
|
47 <ul> |
|
48 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://answers.yahoo.com/dir/">Answer</a></li> |
|
49 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://answersonthestreet.yahoo.com/">Answers on the Street</a></li> |
|
50 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://answers.yahoo.com/question/;_ylt=Av3Nt22Mr7YNs651NWFv8YUPzKIX;_ylv=3?link=ask">Ask</a></li> |
|
51 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://answers.yahoo.com/dir/;_ylt=Aqp_jJlsYDP7urcq2WGC6HBJxQt.;_ylv=3?link=over&amp;more=y">Discover</a></li> |
|
52 </ul> |
|
53 </div> |
|
54 </div> |
|
55 |
|
56 </li> |
|
57 |
|
58 <li> |
|
59 |
|
60 <span class="yui-menu-label"> |
|
61 <a href="http://www.flickr.com">Flickr</a> |
|
62 <a href="#flickr-options" class="yui-menu-toggle">Flickr Options</a> |
|
63 </span> |
|
64 |
|
65 <div id="flickr-options" class="yui-menu"> |
|
66 <div class="yui-menu-content"> |
|
67 <ul> |
|
68 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://www.flickr.com/explore/">Explore</a></li> |
|
69 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://www.flickr.com/groups/">Groups</a></li> |
|
70 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://www.flickr.com/photos/organize/">Organize Your Photos</a></li> |
|
71 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://flickr.com/photos/friends/">Photos From Contacts</a></li> |
|
72 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://www.flickr.com/signup/">Sign Up</a></li> |
|
73 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://www.flickr.com/tour/">Take a Tour</a></li> |
|
74 </ul> |
|
75 </div> |
|
76 </div> |
|
77 |
|
78 </li> |
|
79 |
|
80 <li> |
|
81 |
|
82 <span class="yui-menu-label"> |
|
83 <a href="http://mobile.yahoo.com">Mobile</a> |
|
84 <a href="#mobile-options" class="yui-menu-toggle">Mobile Options</a> |
|
85 </span> |
|
86 |
|
87 <div id="mobile-options" class="yui-menu"> |
|
88 <div class="yui-menu-content"> |
|
89 <ul> |
|
90 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://mobile.yahoo.com/developers">Developers Home</a></li> |
|
91 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://mobile.yahoo.com/mail">Mail</a></li> |
|
92 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://mobile.yahoo.com/gallery">Widget Gallery</a></li> |
|
93 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://mobile.yahoo.com/oneconnect">Y! oneConnect</a></li> |
|
94 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://mobile.yahoo.com/go">Yahoo! Go</a></li> |
|
95 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://mobile.yahoo.com/iphone">Yahoo! on the iPhone</a></li> |
|
96 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://mobile.yahoo.com/mail">More Mobile Services</a></li> |
|
97 </ul> |
|
98 </div> |
|
99 </div> |
|
100 |
|
101 </li> |
|
102 |
|
103 <li> |
|
104 |
|
105 <span class="yui-menu-label"> |
|
106 <a href="http://upcoming.yahoo.com/">Upcoming</a> |
|
107 <a href="#upcoming-options" class="yui-menu-toggle">Upcoming Options</a> |
|
108 </span> |
|
109 |
|
110 <div id="upcoming-options" class="yui-menu"> |
|
111 <div class="yui-menu-content"> |
|
112 <ul> |
|
113 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://upcoming.yahoo.com/event/add/">Add New Event</a></li> |
|
114 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://upcoming.yahoo.com/event/">Events</a></li> |
|
115 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://upcoming.yahoo.com/friend/">Friends</a></li> |
|
116 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://upcoming.yahoo.com/group/">Groups</a></li> |
|
117 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://upcoming.yahoo.com/place/">Places</a></li> |
|
118 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://upcoming.yahoo.com/popular/">Popular</a></li> |
|
119 </ul> |
|
120 </div> |
|
121 </div> |
|
122 |
|
123 </li> |
|
124 |
|
125 <li> |
|
126 |
|
127 <span class="yui-menu-label"> |
|
128 <a href="http://forgood.yahoo.com/index.html">Yahoo! for Good</a> |
|
129 <a href="#for-good-options" class="yui-menu-toggle">Yahoo! for Good Options</a> |
|
130 </span> |
|
131 |
|
132 <div id="for-good-options" class="yui-menu"> |
|
133 <div class="yui-menu-content"> |
|
134 <ul> |
|
135 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://forgood.yahoo.com/take_action/donate.html">Donate</a></li> |
|
136 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://forgood.yahoo.com/everyday_heroes/index.html">Everyday Heroes</a></li> |
|
137 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://forgood.yahoo.com/go_green/index.html">Go Green</a></li> |
|
138 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://forgood.yahoo.com/good_causes/index.html">Good Causes</a></li> |
|
139 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://forgood.yahoo.com/purple_acts/index.html">Purple Acts</a></li> |
|
140 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://forgood.yahoo.com/social_responsibility/index.html">Social Responsibility</a></li> |
|
141 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://forgood.yahoo.com/take_action/index.html">Take Action</a></li> |
|
142 <li class="yui-menuitem"><a class="yui-menuitem-content" href="http://forgood.yahoo.com/take_action/volunteer.html">Volunteer</a></li> |
|
143 </ul> |
|
144 </div> |
|
145 </div> |
|
146 |
|
147 </li> |
|
148 |
|
149 </ul> |
|
150 </div> |
|
151 </div> |
|
152 |
|
153 <p class="first-of-type">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
|
154 |
|
155 <form> |
|
156 |
|
157 <div> |
|
158 <label for="field-1">Field One</label> |
|
159 <input type="text" id="field-1" name="field-1"> |
|
160 </div> |
|
161 |
|
162 <div> |
|
163 <label for="field-2">Field Two</label> |
|
164 <input type="text" id="field-2" name="field-2"> |
|
165 </div> |
|
166 |
|
167 <div> |
|
168 <label for="field-3">Field Three</label> |
|
169 <select id="field-3" name="field-3"> |
|
170 <option value="1">Field Three - Option One</option> |
|
171 <option value="2">Field Three - Option Two</option> |
|
172 <option value="3">Field Three - Option Two</option> |
|
173 </select> |
|
174 </div> |
|
175 |
|
176 </form> |
|
177 |
|
178 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
|
179 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
|
180 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
|
181 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
|
182 |
|
183 </div> |
|
184 </div> |
|
185 <div class="yui-b"> |
|
186 |
|
187 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
|
188 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
|
189 |
|
190 </div> |
|
191 |
|
192 </div> |
|
193 |
|
194 <div id="footer"> |
|
195 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> |
|
196 </div> |
|
197 |
|
198 </div> |
|
199 |
|
200 <!-- YUI Seed --> |
|
201 <script type="text/javascript" src="../../build/yui/yui.js"></script> |
|
202 |
|
203 <script type="text/javascript"> |
|
204 |
|
205 // Call the "use" method, passing in "node-menunav". This will load the |
|
206 // script and CSS for the MenuNav Node Plugin and all of the required |
|
207 // dependencies. |
|
208 |
|
209 YUI({ |
|
210 |
|
211 base: "../../build/", |
|
212 |
|
213 modules: { |
|
214 "node-menunav-core-css": { |
|
215 type: "css", |
|
216 path: "node-menunav/assets/node-menunav-core.css" |
|
217 }, |
|
218 "custommenunavskin": { |
|
219 type: "css", |
|
220 fullpath: "assets/example7.css", |
|
221 supersedes: ['skin-sam-node-menunav'] |
|
222 } |
|
223 } |
|
224 |
|
225 }).use("node-menunav", "node-menunav-core-css", "custommenunavskin", function(Y, result) { |
|
226 |
|
227 // Retrieve the Node instance representing the root menu |
|
228 // (<div id="productsandservices">) and call the "plug" method |
|
229 // passing in a reference to the MenuNav Node Plugin. |
|
230 |
|
231 var menu = Y.one("#productsandservices"); |
|
232 |
|
233 menu.plug(Y.Plugin.NodeMenuNav, { autoSubmenuDisplay: false, mouseOutHideDelay: 0 }); |
|
234 |
|
235 // Show the menu now that it is ready |
|
236 |
|
237 menu.get("ownerDocument").get("documentElement").removeClass("yui-loading"); |
|
238 |
|
239 }); |
|
240 |
|
241 </script> |
|
242 |
|
243 </body> |
|
244 </html> |