|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en" class="yui3-loading"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>MenuNav: Left Nav with Submenus with Shadows Example</title> |
|
|
6 |
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?3.10.3/build/cssreset/reset-min.css&3.10.3/build/cssfonts/fonts-min.css&3.10.3/build/cssgrids/grids-min.css&3.10.3/build/cssbase/base-min.css"> |
|
|
7 |
<link rel="stylesheet" href="../assets/node-menunav/node-menunav-examples-base.css"> |
|
|
8 |
<script src="../../build/yui/yui-min.js"></script> |
|
|
9 |
</head> |
|
|
10 |
<body class="yui3-skin-sam"> |
|
|
11 |
|
|
|
12 |
<style> |
|
|
13 |
.yui3-menu-shadow { |
|
|
14 |
|
|
|
15 |
position: absolute; |
|
|
16 |
z-index: -1; |
|
|
17 |
top: 2px; |
|
|
18 |
left: -3px; |
|
|
19 |
background-color: #000; |
|
|
20 |
opacity: .12; |
|
|
21 |
filter: alpha(opacity=12); /* For IE since it doesn't implement the CSS3 |
|
|
22 |
"opacity" property. */ |
|
|
23 |
padding: 1px 3px 0 3px; |
|
|
24 |
width: 100%; |
|
|
25 |
height: 100%; |
|
|
26 |
|
|
|
27 |
} |
|
|
28 |
|
|
|
29 |
#productsandservices .yui3-menu .yui3-shim { |
|
|
30 |
|
|
|
31 |
z-index: -2; /* Place the iframe shim behind the shadow element */ |
|
|
32 |
|
|
|
33 |
/* |
|
|
34 |
Adjust the dimensions of the <iframe> shim to match the shadow, |
|
|
35 |
otherwise <select> elements will poke through the shadow. |
|
|
36 |
*/ |
|
|
37 |
|
|
|
38 |
left: -3px; |
|
|
39 |
padding: 3px 3px 0 3px; |
|
|
40 |
|
|
|
41 |
} |
|
|
42 |
</style> |
|
|
43 |
|
|
|
44 |
<h1>Header</h1> |
|
|
45 |
|
|
|
46 |
<div class="yui3-g" id="bd"> |
|
|
47 |
<div class="yui3-u" id="side"> |
|
|
48 |
<div class="content"> |
|
|
49 |
<div id="productsandservices" class="yui3-menu"> |
|
|
50 |
<div class="yui3-menu-content"> |
|
|
51 |
<ul class="first-of-type"> |
|
|
52 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.yahoo.com/">Home</a></li> |
|
|
53 |
<li> |
|
|
54 |
<a class="yui3-menu-label" href="#connect">Connect</a> |
|
|
55 |
<div id="connect" class="yui3-menu"> |
|
|
56 |
<div class="yui3-menu-content"> |
|
|
57 |
<ul> |
|
|
58 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://developer.yahoo.com/">Developer Network</a></li> |
|
|
59 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com">Flickr</a></li> |
|
|
60 |
<li> |
|
|
61 |
<a class="yui3-menu-label" href="#pim">PIM</a> |
|
|
62 |
<div id="pim" class="yui3-menu"> |
|
|
63 |
<div class="yui3-menu-content"> |
|
|
64 |
|
|
|
65 |
<ul> |
|
|
66 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mail.yahoo.com">Mail</a></li> |
|
|
67 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.zimbra.com">Zimbra</a></li> |
|
|
68 |
</ul> |
|
|
69 |
|
|
|
70 |
<ul> |
|
|
71 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://addressbook.yahoo.com">Address Book</a></li> |
|
|
72 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://calendar.yahoo.com">Calendar</a></li> |
|
|
73 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://notepad.yahoo.com">Notepad</a></li> |
|
|
74 |
</ul> |
|
|
75 |
|
|
|
76 |
<ul> |
|
|
77 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://messenger.yahoo.com">Messenger</a></li> |
|
|
78 |
</ul> |
|
|
79 |
|
|
|
80 |
</div> |
|
|
81 |
</div> |
|
|
82 |
</li> |
|
|
83 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://profiles.yahoo.com">Profiles</a> </li> |
|
|
84 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com">Mobile</a></li> |
|
|
85 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mybloglog.yahoo.com/">MyBlogLog</a></li> |
|
|
86 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pride.yahoo.com/">Pride</a></li> |
|
|
87 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/">Upcoming</a></li> |
|
|
88 |
</ul> |
|
|
89 |
</div> |
|
|
90 |
</div> |
|
|
91 |
</li> |
|
|
92 |
|
|
|
93 |
<li> |
|
|
94 |
<a class="yui3-menu-label" href="#find-info">Find Info</a> |
|
|
95 |
<div id="find-info" class="yui3-menu"> |
|
|
96 |
<div class="yui3-menu-content"> |
|
|
97 |
<ul> |
|
|
98 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com">Answers</a></li> |
|
|
99 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://babelfish.yahoo.com/">Babel Fish Translations</a></li> |
|
|
100 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://info.yahoo.com/">Company Info</a></li> |
|
|
101 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://search.yahoo.com/cc">Creative Commons Search</a></li> |
|
|
102 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://dir.yahoo.com/">Directory</a></li> |
|
|
103 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://hotjobs.yahoo.com/">Jobs</a></li> |
|
|
104 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://local.yahoo.com">Local</a></li> |
|
|
105 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://maps.yahoo.com/">Maps</a></li> |
|
|
106 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://realestate.yahoo.com">Real Estate</a></li> |
|
|
107 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://education.yahoo.com/reference/">Reference</a></li> |
|
|
108 |
</ul> |
|
|
109 |
</div> |
|
|
110 |
</div> |
|
|
111 |
</li> |
|
|
112 |
|
|
|
113 |
<li> |
|
|
114 |
<a class="yui3-menu-label" href="#lifestyles">Lifestyles</a> |
|
|
115 |
<div id="lifestyles" class="yui3-menu"> |
|
|
116 |
<div class="yui3-menu-content"> |
|
|
117 |
<ul> |
|
|
118 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://autos.yahoo.com">Autos</a></li> |
|
|
119 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://food.yahoo.com">Food</a></li> |
|
|
120 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://green.yahoo.com">Green</a></li> |
|
|
121 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://health.yahoo.com">Health</a></li> |
|
|
122 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pride.yahoo.com">Pride</a></li> |
|
|
123 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://shine.yahoo.com">Shine</a></li> |
|
|
124 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://tech.yahoo.com">Tech</a></li> |
|
|
125 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://travel.yahoo.com/">Travel</a></li> |
|
|
126 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://forgood.yahoo.com/index.html">Yahoo! for Good</a></li> |
|
|
127 |
</ul> |
|
|
128 |
</div> |
|
|
129 |
</div> |
|
|
130 |
</li> |
|
|
131 |
|
|
|
132 |
<li> |
|
|
133 |
<a class="yui3-menu-label" href="#new-finance">News & Finance</a> |
|
|
134 |
<div id="new-finance" class="yui3-menu"> |
|
|
135 |
<div class="yui3-menu-content"> |
|
|
136 |
<ul> |
|
|
137 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://buzz.yahoo.com/">Buzz</a></li> |
|
|
138 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://finance.yahoo.com">Finance</a></li> |
|
|
139 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://news.yahoo.com">News</a></li> |
|
|
140 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://publisher.yahoo.com">Publisher Network</a></li> |
|
|
141 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://sports.yahoo.com/">Sports</a></li> |
|
|
142 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://weather.yahoo.com/">Weather</a></li> |
|
|
143 |
</ul> |
|
|
144 |
</div> |
|
|
145 |
</div> |
|
|
146 |
</li> |
|
|
147 |
|
|
|
148 |
<li> |
|
|
149 |
<a class="yui3-menu-label" href="#your-yahoo">Your Yahoo!</a> |
|
|
150 |
<div id="your-yahoo" class="yui3-menu"> |
|
|
151 |
<div class="yui3-menu-content"> |
|
|
152 |
<ul> |
|
|
153 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://edit.yahoo.com/config/eval_profile?.done">Account Information</a></li> |
|
|
154 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://alerts.yahoo.com/">Alerts</a></li> |
|
|
155 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://smallbusiness.yahoo.com/domains">Domains</a></li> |
|
|
156 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com">Flickr</a></li> |
|
|
157 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://my.yahoo.com/">My Yahoo!</a></li> |
|
|
158 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pipes.yahoo.com/">Pipes</a></li> |
|
|
159 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://toolbar.yahoo.com/">Toolbar</a></li> |
|
|
160 |
</ul> |
|
|
161 |
<ul> |
|
|
162 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://bookmarks.yahoo.com/">Bookmarks</a></li> |
|
|
163 |
<li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://delicious.com/">delicious</a></li> |
|
|
164 |
</ul> |
|
|
165 |
</div> |
|
|
166 |
</div> |
|
|
167 |
</li> |
|
|
168 |
|
|
|
169 |
</ul> |
|
|
170 |
</div> |
|
|
171 |
</div> |
|
|
172 |
</div> |
|
|
173 |
</div> |
|
|
174 |
<div class="yui3-u" id="main"> |
|
|
175 |
<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> |
|
|
176 |
|
|
|
177 |
<form> |
|
|
178 |
|
|
|
179 |
<div> |
|
|
180 |
<label for="field-1">Field One</label> |
|
|
181 |
<input type="text" id="field-1" name="field-1"> |
|
|
182 |
</div> |
|
|
183 |
|
|
|
184 |
<div> |
|
|
185 |
<label for="field-2">Field Two</label> |
|
|
186 |
<input type="text" id="field-2" name="field-2"> |
|
|
187 |
</div> |
|
|
188 |
|
|
|
189 |
<div> |
|
|
190 |
<label for="field-3">Field Three</label> |
|
|
191 |
<select id="field-3" name="field-3"> |
|
|
192 |
<option value="1">Field Three - Option One</option> |
|
|
193 |
<option value="2">Field Three - Option Two</option> |
|
|
194 |
<option value="3">Field Three - Option Two</option> |
|
|
195 |
</select> |
|
|
196 |
</div> |
|
|
197 |
|
|
|
198 |
</form> |
|
|
199 |
|
|
|
200 |
<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> |
|
|
201 |
<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> |
|
|
202 |
</div> |
|
|
203 |
</div> |
|
|
204 |
|
|
|
205 |
<div id="footer"> |
|
|
206 |
<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> |
|
|
207 |
</div> |
|
|
208 |
|
|
|
209 |
<script> |
|
|
210 |
// Call the "use" method, passing in "node-menunav". This will load the |
|
|
211 |
// script and CSS for the MenuNav Node Plugin and all of the required |
|
|
212 |
// dependencies. |
|
|
213 |
|
|
|
214 |
YUI().use('node-menunav', function(Y) { |
|
|
215 |
|
|
|
216 |
// Retrieve the Node instance representing the root menu |
|
|
217 |
// (<div id="productsandservices">) |
|
|
218 |
|
|
|
219 |
var menu = Y.one("#productsandservices"); |
|
|
220 |
|
|
|
221 |
|
|
|
222 |
// Use the "all" method to retrieve the |
|
|
223 |
// Node instances representing each submenu. |
|
|
224 |
|
|
|
225 |
menu.all(".yui3-menu").each(function (node) { |
|
|
226 |
|
|
|
227 |
// Append a shadow element to the bounding box of each submenu |
|
|
228 |
|
|
|
229 |
node.append('<div class="yui3-menu-shadow"></div>'); |
|
|
230 |
|
|
|
231 |
}); |
|
|
232 |
|
|
|
233 |
|
|
|
234 |
// Call the "plug" method of the Node instance, passing in a reference to the |
|
|
235 |
// MenuNav Node Plugin. |
|
|
236 |
|
|
|
237 |
menu.plug(Y.Plugin.NodeMenuNav); |
|
|
238 |
|
|
|
239 |
// Show the menu now that it is ready |
|
|
240 |
|
|
|
241 |
menu.get("ownerDocument").get("documentElement").removeClass("yui3-loading"); |
|
|
242 |
|
|
|
243 |
}); |
|
|
244 |
|
|
|
245 |
</script> |
|
|
246 |
|
|
|
247 |
<script> |
|
|
248 |
YUI.Env.Tests = { |
|
|
249 |
examples: [], |
|
|
250 |
project: '../assets', |
|
|
251 |
assets: '../assets/node-menunav', |
|
|
252 |
name: 'node-menunav-5', |
|
|
253 |
title: 'MenuNav: Left Nav with Submenus with Shadows Example', |
|
|
254 |
newWindow: '', |
|
|
255 |
auto: false |
|
|
256 |
}; |
|
|
257 |
YUI.Env.Tests.examples.push('menunav-leftnav'); |
|
|
258 |
YUI.Env.Tests.examples.push('node-menunav-2'); |
|
|
259 |
YUI.Env.Tests.examples.push('node-menunav-3'); |
|
|
260 |
YUI.Env.Tests.examples.push('node-menunav-4'); |
|
|
261 |
YUI.Env.Tests.examples.push('node-menunav-5'); |
|
|
262 |
YUI.Env.Tests.examples.push('node-menunav-6'); |
|
|
263 |
YUI.Env.Tests.examples.push('node-menunav-7'); |
|
|
264 |
|
|
|
265 |
</script> |
|
|
266 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
267 |
|
|
|
268 |
|
|
|
269 |
|
|
|
270 |
|
|
|
271 |
</body> |
|
|
272 |
</html> |