|
0
|
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 |
<!-- include so that menu has basic styling if JS is no enabled --> |
|
|
16 |
<link rel="stylesheet" type="text/css" href="../../build/node-menunav/assets/skins/sam/node-menunav.css"> |
|
|
17 |
|
|
|
18 |
<style type="text/css"> |
|
|
19 |
|
|
|
20 |
.yui-menu-content p { |
|
|
21 |
margin: .25em .5em; |
|
|
22 |
} |
|
|
23 |
|
|
|
24 |
</style> |
|
|
25 |
|
|
|
26 |
</head> |
|
|
27 |
<body class="yui-skin-sam"> |
|
|
28 |
|
|
|
29 |
<div class="yui-d0"> |
|
|
30 |
|
|
|
31 |
<h1>Header</h1> |
|
|
32 |
|
|
|
33 |
<div class="yui-t1"> |
|
|
34 |
|
|
|
35 |
<div class="yui-main"> |
|
|
36 |
<div class="yui-b"> |
|
|
37 |
|
|
|
38 |
<div id="productsandservices" class="yui-menu yui-menu-horizontal"> |
|
|
39 |
<div class="yui-menu-content"> |
|
|
40 |
<ul class="first-of-type"> |
|
|
41 |
<li> |
|
|
42 |
<span id="answers-label" class="yui-menu-label"> |
|
|
43 |
<a href="http://answers.yahoo.com">Answers</a> |
|
|
44 |
</span> |
|
|
45 |
</li> |
|
|
46 |
<li> |
|
|
47 |
<span id="flickr-label" class="yui-menu-label"> |
|
|
48 |
<a href="http://www.flickr.com">Flickr</a> |
|
|
49 |
</span> |
|
|
50 |
</li> |
|
|
51 |
<li> |
|
|
52 |
<span id="mobile-label" class="yui-menu-label"> |
|
|
53 |
<a href="http://mobile.yahoo.com">Mobile</a> |
|
|
54 |
</span> |
|
|
55 |
</li> |
|
|
56 |
<li> |
|
|
57 |
<span id="upcoming-label" class="yui-menu-label"> |
|
|
58 |
<a href="http://upcoming.yahoo.com/">Upcoming</a> |
|
|
59 |
</span> |
|
|
60 |
</li> |
|
|
61 |
<li> |
|
|
62 |
<span id="forgood-label" class="yui-menu-label"> |
|
|
63 |
<a href="http://forgood.yahoo.com/index.html">Yahoo! for Good</a> |
|
|
64 |
</span> |
|
|
65 |
</li> |
|
|
66 |
</ul> |
|
|
67 |
</div> |
|
|
68 |
</div> |
|
|
69 |
|
|
|
70 |
<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> |
|
|
71 |
|
|
|
72 |
<form> |
|
|
73 |
|
|
|
74 |
<div> |
|
|
75 |
<label for="field-1">Field One</label> |
|
|
76 |
<input type="text" id="field-1" name="field-1"> |
|
|
77 |
</div> |
|
|
78 |
|
|
|
79 |
<div> |
|
|
80 |
<label for="field-2">Field Two</label> |
|
|
81 |
<input type="text" id="field-2" name="field-2"> |
|
|
82 |
</div> |
|
|
83 |
|
|
|
84 |
<div> |
|
|
85 |
<label for="field-3">Field Three</label> |
|
|
86 |
<select id="field-3" name="field-3"> |
|
|
87 |
<option value="1">Field Three - Option One</option> |
|
|
88 |
<option value="2">Field Three - Option Two</option> |
|
|
89 |
<option value="3">Field Three - Option Two</option> |
|
|
90 |
</select> |
|
|
91 |
</div> |
|
|
92 |
|
|
|
93 |
</form> |
|
|
94 |
|
|
|
95 |
<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> |
|
|
96 |
<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> |
|
|
97 |
<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> |
|
|
98 |
<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> |
|
|
99 |
|
|
|
100 |
</div> |
|
|
101 |
</div> |
|
|
102 |
<div class="yui-b"> |
|
|
103 |
|
|
|
104 |
<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> |
|
|
105 |
<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> |
|
|
106 |
|
|
|
107 |
</div> |
|
|
108 |
|
|
|
109 |
</div> |
|
|
110 |
|
|
|
111 |
<div id="footer"> |
|
|
112 |
<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> |
|
|
113 |
</div> |
|
|
114 |
|
|
|
115 |
</div> |
|
|
116 |
|
|
|
117 |
<!-- YUI Seed --> |
|
|
118 |
<script type="text/javascript" src="../../build/yui/yui.js"></script> |
|
|
119 |
|
|
|
120 |
<script type="text/javascript"> |
|
|
121 |
|
|
|
122 |
// Call the "use" method, passing in "node-menunav". This will load the |
|
|
123 |
// script and CSS for the MenuNav Node Plugin and all of the required |
|
|
124 |
// dependencies. |
|
|
125 |
|
|
|
126 |
YUI({base:"../../build/", timeout: 10000}).use("node-menunav", "io", function(Y) { |
|
|
127 |
|
|
|
128 |
var applyARIA = function (menu) { |
|
|
129 |
|
|
|
130 |
var oMenuLabel, |
|
|
131 |
oMenuToggle, |
|
|
132 |
sID; |
|
|
133 |
|
|
|
134 |
menu.set("role", "menu"); |
|
|
135 |
|
|
|
136 |
oMenuLabel = menu.previous(); |
|
|
137 |
oMenuToggle = oMenuLabel.one(".yui-menu-toggle"); |
|
|
138 |
|
|
|
139 |
if (oMenuToggle) { |
|
|
140 |
oMenuLabel = oMenuToggle; |
|
|
141 |
} |
|
|
142 |
|
|
|
143 |
sID = Y.stamp(oMenuLabel); |
|
|
144 |
|
|
|
145 |
if (!oMenuLabel.get("id")) { |
|
|
146 |
oMenuLabel.set("id", sID); |
|
|
147 |
} |
|
|
148 |
|
|
|
149 |
menu.set("aria-labelledby", sID); |
|
|
150 |
|
|
|
151 |
menu.all("ul,li,.yui-menu-content").set("role", "presentation"); |
|
|
152 |
|
|
|
153 |
menu.all(".yui-menuitem-content").set("role", "menuitem"); |
|
|
154 |
|
|
|
155 |
}; |
|
|
156 |
|
|
|
157 |
|
|
|
158 |
var onIOComplete = function (transactionID, response, submenuNode) { |
|
|
159 |
|
|
|
160 |
var sHTML = response.responseText; |
|
|
161 |
|
|
|
162 |
submenuNode.one(".yui-menu-content").set("innerHTML", sHTML); |
|
|
163 |
submenuNode.one("ul").addClass("first-of-type"); |
|
|
164 |
|
|
|
165 |
applyARIA(submenuNode); |
|
|
166 |
|
|
|
167 |
// Need to set the width of the submenu to "" to clear it, then to nothing |
|
|
168 |
// (or the offsetWidth for IE < 8) so that the width of the submenu is |
|
|
169 |
// rendered correctly, otherwise the width will be rendered at the width |
|
|
170 |
// before the new content for the submenu was loaded. |
|
|
171 |
|
|
|
172 |
submenuNode.setStyle("width", ""); |
|
|
173 |
|
|
|
174 |
if (Y.UA.ie && Y.UA.ie < 8) { |
|
|
175 |
submenuNode.setStyle("width", (submenuNode.get("offsetWidth") + "px")); |
|
|
176 |
} |
|
|
177 |
|
|
|
178 |
|
|
|
179 |
var oAnchor = submenuNode.one("a"); |
|
|
180 |
|
|
|
181 |
if (oAnchor) { |
|
|
182 |
oAnchor.focus(); |
|
|
183 |
} |
|
|
184 |
|
|
|
185 |
}; |
|
|
186 |
|
|
|
187 |
|
|
|
188 |
var addSubmenu = function (event, submenuIdBase) { |
|
|
189 |
|
|
|
190 |
var sSubmenuId = submenuIdBase + "-options", |
|
|
191 |
bIsKeyDown = (event.type === "keydown"), |
|
|
192 |
nKeyCode = event.keyCode, |
|
|
193 |
sURI; |
|
|
194 |
|
|
|
195 |
|
|
|
196 |
if ((bIsKeyDown && nKeyCode === 40) || |
|
|
197 |
(event.target.hasClass("yui-menu-toggle") && |
|
|
198 |
(event.type === "mousedown" || (bIsKeyDown && nKeyCode === 13)))) { |
|
|
199 |
|
|
|
200 |
// Build the bounding box and content box for the submenu and fill |
|
|
201 |
// the content box with a "Loading..." message so that the user |
|
|
202 |
// knows the submenu's content is in the process of loading. |
|
|
203 |
|
|
|
204 |
this.get("parentNode").append('<div id="' + sSubmenuId + '" class="yui-menu yui-menu-hidden"><div class="yui-menu-content"><p>Loading…</p></div></div>'); |
|
|
205 |
|
|
|
206 |
|
|
|
207 |
// Use Y.io to fetch the content of the submenu |
|
|
208 |
|
|
|
209 |
sURI = "assets/submenus.php?menu=" + sSubmenuId; |
|
|
210 |
|
|
|
211 |
Y.io(sURI, { on: { complete: onIOComplete }, arguments: Y.one(("#" + sSubmenuId)) }); |
|
|
212 |
|
|
|
213 |
|
|
|
214 |
// Detach event listeners so that this code runs only once |
|
|
215 |
|
|
|
216 |
this.detach("mousedown", addSubmenu); |
|
|
217 |
this.detach("keydown", addSubmenu); |
|
|
218 |
|
|
|
219 |
} |
|
|
220 |
|
|
|
221 |
}; |
|
|
222 |
|
|
|
223 |
|
|
|
224 |
// Retrieve the Node instance representing the root menu |
|
|
225 |
// (<div id="productsandservices">) |
|
|
226 |
|
|
|
227 |
var menu = Y.one("#productsandservices"); |
|
|
228 |
|
|
|
229 |
menu.addClass("yui-splitbuttonnav"); |
|
|
230 |
|
|
|
231 |
|
|
|
232 |
var oSubmenuToggles = { |
|
|
233 |
answers: { label: "Answers Options", url: "#answers-options" }, |
|
|
234 |
flickr: { label: "Flickr Options", url: "#flickr-options" }, |
|
|
235 |
mobile: { label: "Mobile Options", url: "#mobile-options" }, |
|
|
236 |
upcoming: { label: "Upcoming Options", url: "#upcoming-options" }, |
|
|
237 |
forgood: { label: "Yahoo! for Good Options", url: "#forgood-options" } |
|
|
238 |
}, |
|
|
239 |
|
|
|
240 |
sKey, |
|
|
241 |
oToggleData, |
|
|
242 |
oSubmenuToggle; |
|
|
243 |
|
|
|
244 |
|
|
|
245 |
// Add the menu toggle to each menu label |
|
|
246 |
|
|
|
247 |
menu.all(".yui-menu-label").each(function(node) { |
|
|
248 |
|
|
|
249 |
sKey = node.get("id").split("-")[0]; |
|
|
250 |
|
|
|
251 |
oToggleData = oSubmenuToggles[sKey]; |
|
|
252 |
|
|
|
253 |
oSubmenuToggle = Y.Node.create('<a class="yui-menu-toggle">' + oToggleData.label + '</a>'); |
|
|
254 |
|
|
|
255 |
// Need to set the "href" attribute via the "set" method as opposed to |
|
|
256 |
// including it in the string passed to "Y.Node.create" to work around a |
|
|
257 |
// bug in IE. The MenuNav Node Plugin code examines the "href" attribute |
|
|
258 |
// of all <A>s in a menu. To do this, the MenuNav Node Plugin retrieves |
|
|
259 |
// the value of the "href" attribute by passing "2" as a second argument |
|
|
260 |
// to the "getAttribute" method. This is necessary for IE in order to get |
|
|
261 |
// the value of the "href" attribute exactly as it was set in script or in |
|
|
262 |
// the source document, as opposed to a fully qualified path. (See |
|
|
263 |
// http://msdn.microsoft.com/en-gb/library/ms536429(VS.85).aspx for |
|
|
264 |
// more info.) However, when the "href" attribute is set inline via the |
|
|
265 |
// string passed to "Y.Node.create", calls to "getAttribute('href', 2)" |
|
|
266 |
// will STILL return a fully qualified URL rather than the value of the |
|
|
267 |
// "href" attribute exactly as it was set in script. |
|
|
268 |
|
|
|
269 |
oSubmenuToggle.set("href", oToggleData.url); |
|
|
270 |
|
|
|
271 |
|
|
|
272 |
// Add a "mousedown" and "keydown" listener to each menu label that |
|
|
273 |
// will build the submenu the first time the users requests it. |
|
|
274 |
|
|
|
275 |
node.on("mousedown", addSubmenu, node, sKey); |
|
|
276 |
node.on("keydown", addSubmenu, node, sKey); |
|
|
277 |
|
|
|
278 |
node.appendChild(oSubmenuToggle); |
|
|
279 |
|
|
|
280 |
}); |
|
|
281 |
|
|
|
282 |
|
|
|
283 |
// Call the "plug" method passing in a reference to the |
|
|
284 |
// MenuNav Node Plugin. |
|
|
285 |
|
|
|
286 |
menu.plug(Y.Plugin.NodeMenuNav, { autoSubmenuDisplay: false, mouseOutHideDelay: 0 }); |
|
|
287 |
|
|
|
288 |
}); |
|
|
289 |
|
|
|
290 |
</script> |
|
|
291 |
|
|
|
292 |
</body> |
|
|
293 |
</html> |