← Back to branch summary

~smagoun/whoopsie/whoopsie-lp1017637

« back to all changes in this revision

Viewing changes to backend/stats/static/js/yui/docs/node-menunav/node-menunav-6-example.html

  • Committer: Evan Dandrea
  • Date: 2012-05-09 05:53:45 UTC
  • Revision ID: evan.dandrea@canonical.com-20120509055345-z2j41tmcbf4as5uf
The backend now lives in lp:daisy and the website (errors.ubuntu.com) now lives in lp:errors.

Show diffs side-by-side

added added

removed removed

Lines of Context:
backend/stats/static/js/yui/docs/node-menunav/node-menunav-6-example.html
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 Rounded Corners Example</title>
6
 
    <link rel="stylesheet" href="http://yui.yahooapis.com/combo?3.5.0/build/cssreset/reset-min.css&amp;3.5.0/build/cssfonts/fonts-min.css&amp;3.5.0/build/cssgrids/grids-min.css&amp;3.5.0/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
 
 
14
 
    /*
15
 
        Overide the values for border and padding specified for the content box of each
16
 
        submenu in the Sam skin CSS.  The top and bottom borders are set to 0, since both
17
 
        borders will be drawn by the background image used to create the rounded corners.
18
 
        The top and bottom padding will be created by setting the height of each <div>
19
 
        inside the <div class="yui3-menu-corner">.
20
 
    */
21
 
 
22
 
    #productsandservices .yui3-menu .yui3-menu-content {
23
 
 
24
 
        border-top: 0;
25
 
        border-bottom: 0;
26
 
        padding: 0;
27
 
 
28
 
    }
29
 
 
30
 
    .yui3-menu-corner {
31
 
 
32
 
        margin-right: 4px;  /*  Reserve space for the top-right and bottom-right corners. */
33
 
 
34
 
        /* The background image (sprite) for the top-left and bottom-left corners. */
35
 
        background: url(../assets/node-menunav/round.png) no-repeat;
36
 
        zoom:1; /* IE: corners require layout */
37
 
 
38
 
    }
39
 
 
40
 
    .yui3-menu-corner div {
41
 
 
42
 
        height: 4px;
43
 
 
44
 
        margin: 0 -4px 0 4px;   /*  Use a negative right margin to move the <div> into
45
 
                                    the right margin of the parent element
46
 
                                    (<div class="yui3-menu-corner">) to draw the top-right
47
 
                                    and bottom-right corners.
48
 
 
49
 
                                    Apply a left margin to reveal the background image
50
 
                                    applied to the parent element for the top-left and
51
 
                                    bottom-left corners. */
52
 
 
53
 
        /* The background image (sprite) for the top-right and bottom-right corners. */
54
 
        background: url(../assets/node-menunav/round.png) no-repeat;
55
 
 
56
 
        _position: relative;    /*  Necessary to get negative margins working in IE 6
57
 
                                    (Standards Mode and Quirks Mode and IE 7 (Quirks
58
 
                                    Mode only). */
59
 
 
60
 
        _font-size: 0;  /*  Necessary to collapse the height of the <div> in IE 6
61
 
                            (Standards Mode and Quirks Mode and IE 7 (Quirks Mode only) so
62
 
                            that it renders at 4px tall.  */
63
 
 
64
 
    }
65
 
 
66
 
    /*
67
 
        Set the "background-position" property for the bottom-left, top-right, and
68
 
        bottom-right corner elements to reveal the corresponding corner image.
69
 
    */
70
 
 
71
 
    .yui3-menu-corner-bl {
72
 
 
73
 
        background-position: left bottom;
74
 
 
75
 
    }
76
 
 
77
 
    .yui3-menu-corner .yui3-menu-corner-tr {
78
 
 
79
 
        background-position: top right;
80
 
 
81
 
    }
82
 
 
83
 
    .yui3-menu-corner .yui3-menu-corner-br {
84
 
 
85
 
        background-position: right bottom;
86
 
 
87
 
    }
88
 
 
89
 
</style>
90
 
 
91
 
<h1>Header</h1>
92
 
<div class="yui3-g" id="bd">
93
 
    <div class="yui3-u" id="side">
94
 
        <div class="content">
95
 
           <div id="productsandservices" class="yui3-menu">
96
 
                <div class="yui3-menu-content">
97
 
                    <ul class="first-of-type">
98
 
                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.yahoo.com/">Home</a></li>
99
 
                        <li>
100
 
                            <a class="yui3-menu-label" href="#connect">Connect</a>
101
 
                            <div id="connect" class="yui3-menu">
102
 
                                <div class="yui3-menu-content">
103
 
                                    <ul>
104
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://developer.yahoo.com/">Developer Network</a></li>
105
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com">Flickr</a></li>
106
 
                                        <li>
107
 
                                            <a class="yui3-menu-label" href="#pim">PIM</a>
108
 
                                            <div id="pim" class="yui3-menu">
109
 
                                                <div class="yui3-menu-content">
110
 
 
111
 
                                                    <ul>
112
 
                                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mail.yahoo.com">Mail</a></li>
113
 
                                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.zimbra.com">Zimbra</a></li>
114
 
                                                    </ul>
115
 
 
116
 
                                                    <ul>
117
 
                                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://addressbook.yahoo.com">Address Book</a></li>
118
 
                                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://calendar.yahoo.com">Calendar</a></li>
119
 
                                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://notepad.yahoo.com">Notepad</a></li>
120
 
                                                    </ul>
121
 
 
122
 
                                                    <ul>
123
 
                                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://messenger.yahoo.com">Messenger</a></li>
124
 
                                                    </ul>
125
 
 
126
 
                                                </div>
127
 
                                            </div>
128
 
                                        </li>
129
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://profiles.yahoo.com">Profiles</a> </li>
130
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com">Mobile</a></li>
131
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mybloglog.yahoo.com/">MyBlogLog</a></li>
132
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pride.yahoo.com/">Pride</a></li>
133
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/">Upcoming</a></li>
134
 
                                    </ul>
135
 
                                </div>
136
 
                            </div>
137
 
                        </li>
138
 
 
139
 
                        <li>
140
 
                            <a class="yui3-menu-label" href="#find-info">Find Info</a>
141
 
                            <div id="find-info" class="yui3-menu">
142
 
                                <div class="yui3-menu-content">
143
 
                                    <ul>
144
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com">Answers</a></li>
145
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://babelfish.yahoo.com/">Babel Fish Translations</a></li>
146
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://info.yahoo.com/">Company Info</a></li>
147
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://search.yahoo.com/cc">Creative Commons Search</a></li>
148
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://dir.yahoo.com/">Directory</a></li>
149
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://hotjobs.yahoo.com/">Jobs</a></li>
150
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://local.yahoo.com">Local</a></li>
151
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://maps.yahoo.com/">Maps</a></li>
152
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://realestate.yahoo.com">Real Estate</a></li>
153
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://education.yahoo.com/reference/">Reference</a></li>
154
 
                                    </ul>
155
 
                                </div>
156
 
                            </div>
157
 
                        </li>
158
 
 
159
 
                        <li>
160
 
                            <a class="yui3-menu-label" href="#lifestyles">Lifestyles</a>
161
 
                            <div id="lifestyles" class="yui3-menu">
162
 
                                <div class="yui3-menu-content">
163
 
                                    <ul>
164
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://autos.yahoo.com">Autos</a></li>
165
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://food.yahoo.com">Food</a></li>
166
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://green.yahoo.com">Green</a></li>
167
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://health.yahoo.com">Health</a></li>
168
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pride.yahoo.com">Pride</a></li>
169
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://shine.yahoo.com">Shine</a></li>
170
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://tech.yahoo.com">Tech</a></li>
171
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://travel.yahoo.com/">Travel</a></li>
172
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://forgood.yahoo.com/index.html">Yahoo! for Good</a></li>
173
 
                                    </ul>
174
 
                                </div>
175
 
                            </div>
176
 
                        </li>
177
 
 
178
 
                        <li>
179
 
                            <a class="yui3-menu-label" href="#new-finance">News &#38; Finance</a>
180
 
                            <div id="new-finance" class="yui3-menu">
181
 
                                <div class="yui3-menu-content">
182
 
                                    <ul>
183
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://buzz.yahoo.com/">Buzz</a></li>
184
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://finance.yahoo.com">Finance</a></li>
185
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://news.yahoo.com">News</a></li>
186
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://publisher.yahoo.com">Publisher Network</a></li>
187
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://sports.yahoo.com/">Sports</a></li>
188
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://weather.yahoo.com/">Weather</a></li>
189
 
                                    </ul>
190
 
                                </div>
191
 
                            </div>
192
 
                        </li>
193
 
 
194
 
                        <li>
195
 
                            <a class="yui3-menu-label" href="#your-yahoo">Your Yahoo!</a>
196
 
                            <div id="your-yahoo" class="yui3-menu">
197
 
                                <div class="yui3-menu-content">
198
 
                                    <ul>
199
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://edit.yahoo.com/config/eval_profile?.done">Account Information</a></li>
200
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://alerts.yahoo.com/">Alerts</a></li>
201
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://smallbusiness.yahoo.com/domains">Domains</a></li>
202
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com">Flickr</a></li>
203
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://my.yahoo.com/">My Yahoo!</a></li>
204
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pipes.yahoo.com/">Pipes</a></li>
205
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://toolbar.yahoo.com/">Toolbar</a></li>
206
 
                                    </ul>
207
 
                                    <ul>
208
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://bookmarks.yahoo.com/">Bookmarks</a></li>
209
 
                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://delicious.com/">delicious</a></li>
210
 
                                    </ul>
211
 
                                </div>
212
 
                            </div>
213
 
                        </li>
214
 
 
215
 
                    </ul>
216
 
                </div>
217
 
            </div>
218
 
        </div>
219
 
    </div>
220
 
 
221
 
    <div class="yui3-u" id="main">
222
 
        <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>
223
 
 
224
 
        <form>
225
 
 
226
 
            <div>
227
 
                <label for="field-1">Field One</label>
228
 
                <input type="text" id="field-1" name="field-1">
229
 
            </div>
230
 
 
231
 
            <div>
232
 
                <label for="field-2">Field Two</label>
233
 
                <input type="text" id="field-2" name="field-2">
234
 
            </div>
235
 
 
236
 
            <div>
237
 
                <label for="field-3">Field Three</label>
238
 
                <select id="field-3" name="field-3">
239
 
                    <option value="1">Field Three - Option One</option>
240
 
                    <option value="2">Field Three - Option Two</option>
241
 
                    <option value="3">Field Three - Option Two</option>
242
 
                </select>
243
 
            </div>
244
 
 
245
 
        </form>
246
 
 
247
 
        <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>
248
 
        <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>
249
 
 
250
 
    </div>
251
 
</div>
252
 
 
253
 
<div id="footer">
254
 
    <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>
255
 
</div>
256
 
 
257
 
<script>
258
 
 
259
 
    //  Call the "use" method, passing in "node-menunav".  This will load the
260
 
    //  script and CSS for the MenuNav Node Plugin and all of the required
261
 
    //  dependencies.
262
 
 
263
 
    YUI().use('node-menunav', function(Y) {
264
 
 
265
 
        //  Retrieve the Node instance representing the root menu
266
 
        //  (<div id="productsandservices">)
267
 
 
268
 
        var menu = Y.one("#productsandservices");
269
 
 
270
 
 
271
 
        //  Use the "all" method to retrieve the
272
 
        //  Node instances representing each submenu.
273
 
 
274
 
        menu.all(".yui3-menu").each(function (node) {
275
 
 
276
 
            //  Add decorator elements used to create the rounded corners to the
277
 
            //  bounding box of each submenu.
278
 
 
279
 
            // Insert the first decorator before the submenu's content box
280
 
            node.prepend('<div class="yui3-menu-corner yui3-menu-corner-tl"><div class="yui3-menu-corner-tr"></div></div>');
281
 
 
282
 
            // Insert the second decorator after the submenu's content box
283
 
            node.append('<div class="yui3-menu-corner yui3-menu-corner-bl"><div class="yui3-menu-corner-br"></div></div>');
284
 
 
285
 
        });
286
 
 
287
 
 
288
 
        //  Call the "plug" method of the Node instance, passing in a reference to the
289
 
        //  MenuNav Node Plugin.
290
 
 
291
 
        menu.plug(Y.Plugin.NodeMenuNav);
292
 
 
293
 
        //  Show the menu now that it is ready
294
 
 
295
 
        menu.get("ownerDocument").get("documentElement").removeClass("yui3-loading");
296
 
 
297
 
    });
298
 
 
299
 
</script>
300
 
 
301
 
 
302
 
</body>
303
 
</html>