|
1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="utf-8"> |
|
5 <title>Example: Basic Left Nav</title> |
|
6 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
7 <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
8 <link rel="stylesheet" href="../assets/css/main.css"> |
|
9 <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
10 <link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
11 <script src="../../build/yui/yui-min.js"></script> |
|
12 |
|
13 </head> |
|
14 <body> |
|
15 <!-- |
|
16 <a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
17 --> |
|
18 <div id="doc"> |
|
19 <div id="hd"> |
|
20 <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
21 </div> |
|
22 |
|
23 |
|
24 <h1>Example: Basic Left Nav</h1> |
|
25 <div class="yui3-g"> |
|
26 <div class="yui3-u-3-4"> |
|
27 <div id="main"> |
|
28 <div class="content"><div class="intro"> |
|
29 <p> |
|
30 This example demonstrates how to create a traditional, two-column page layout |
|
31 (<a href="../cssgrids/index.html">using Grids</a>) with a set of fly-out menu navigation |
|
32 in the left column. |
|
33 </p> |
|
34 </div> |
|
35 |
|
36 <div class="example newwindow"> |
|
37 <a href="menunav-leftnav-example.html" target="_blank" class="button"> |
|
38 View Example in New Window |
|
39 </a> |
|
40 </div> |
|
41 |
|
42 <h2>Setting Up the HTML</h2> |
|
43 |
|
44 <p> |
|
45 Begin by including the <a href="../cssgrids/index.html#dependencies">CSS Grids dependencies</a> and grid |
|
46 markup (this example uses a 2 column version of the |
|
47 <a href="../cssgrids/cssgrids-fluid.html">Fluid Page Template</a> with a 160px left column). |
|
48 Add the markup for the menu to the left column of the grid. |
|
49 </p> |
|
50 <p> |
|
51 <strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the |
|
52 page's <code><body></code> element or to a parent element of the widget in order to apply |
|
53 the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>. |
|
54 </p> |
|
55 <pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre> |
|
56 |
|
57 |
|
58 |
|
59 <p> |
|
60 The root menu of menus built using the MenuNav Node Plugin can have a verical or horizontal |
|
61 orientation. The default orientation for menus is vertical, but can be easily switched to |
|
62 horizontal by applying a class of <code>yui3-menu-horizontal</code> to the node representing the |
|
63 root menu's bounding box, as illustrated below: |
|
64 </p> |
|
65 |
|
66 <pre class="code prettyprint"><div id="productsandservices" class="yui3-menu yui3-menu-horizontal"><!-- Bounding box --> |
|
67 <div class="yui3-menu-content"><!-- Content box --> |
|
68 <ul> |
|
69 <!-- Menu items --> |
|
70 </ul> |
|
71 </div> |
|
72 </div></pre> |
|
73 |
|
74 |
|
75 <h2>Initializing the Menu</h2> |
|
76 |
|
77 <p> |
|
78 With the menu markup in place, retrieve the Node instance representing the root |
|
79 menu (<code><div id="productsandservices"></code>) and call the |
|
80 <a href="http://yuilibrary.com/yui/docs/api/classes/Node.html#method_plug"><code>plug</code></a> |
|
81 passing in a reference to the MenuNav Node Plugin. |
|
82 </p> |
|
83 |
|
84 <pre class="code prettyprint">// Call the "use" method, passing in "node-menunav". This will load the |
|
85 // script and CSS for the MenuNav Node Plugin and all of the required |
|
86 // dependencies. |
|
87 |
|
88 YUI().use('node-menunav', function(Y) { |
|
89 |
|
90 // Retrieve the Node instance representing the root menu |
|
91 // (<div id="productsandservices">) and call the "plug" method |
|
92 // passing in a reference to the MenuNav Node Plugin. |
|
93 |
|
94 var menu = Y.one("#productsandservices"); |
|
95 |
|
96 menu.plug(Y.Plugin.NodeMenuNav); |
|
97 |
|
98 });</pre> |
|
99 |
|
100 |
|
101 <p> |
|
102 <em>Note:</em> In keeping with the |
|
103 <a href="http://developer.yahoo.com/performance/">Exceptional Performance</a> |
|
104 team's recommendation, the script block used to instantiate the menu will be |
|
105 <a href="http://developer.yahoo.com/performance/rules.html#js_bottom">placed at the bottom of the page</a>. |
|
106 This not only improves performance, it helps ensure that the DOM subtree of the |
|
107 element representing the root menu |
|
108 (<code><div id="productsandservices"></code>) is ready to be scripted. |
|
109 </p> |
|
110 </div> |
|
111 </div> |
|
112 </div> |
|
113 |
|
114 <div class="yui3-u-1-4"> |
|
115 <div class="sidebar"> |
|
116 |
|
117 |
|
118 |
|
119 <div class="sidebox"> |
|
120 <div class="hd"> |
|
121 <h2 class="no-toc">Examples</h2> |
|
122 </div> |
|
123 |
|
124 <div class="bd"> |
|
125 <ul class="examples"> |
|
126 |
|
127 |
|
128 <li data-description="Creating left navigation using the MenuNav Node Plugin."> |
|
129 <a href="menunav-leftnav.html">Basic Left Nav</a> |
|
130 </li> |
|
131 |
|
132 |
|
133 |
|
134 <li data-description="Creating top navigation using the MenuNav Node Plugin"> |
|
135 <a href="node-menunav-2.html">Basic Top Nav</a> |
|
136 </li> |
|
137 |
|
138 |
|
139 |
|
140 <li data-description="Creating menu button navigation using the MenuNav Node Plugin"> |
|
141 <a href="node-menunav-3.html">Menu Button Top Nav</a> |
|
142 </li> |
|
143 |
|
144 |
|
145 |
|
146 <li data-description="Creating split button navigation using the MenuNav Node Plugin"> |
|
147 <a href="node-menunav-4.html">Split Button Top Nav</a> |
|
148 </li> |
|
149 |
|
150 |
|
151 |
|
152 <li data-description="Adding shadows to submenus of a left nav using the MenuNav Node Plugin"> |
|
153 <a href="node-menunav-5.html">Left Nav with Submenus with Shadows</a> |
|
154 </li> |
|
155 |
|
156 |
|
157 |
|
158 <li data-description="Adding rounded corners to submenus of a left nav using the MenuNav Node Plugin"> |
|
159 <a href="node-menunav-6.html">Left Nav With Submenus With Rounded Corners</a> |
|
160 </li> |
|
161 |
|
162 |
|
163 |
|
164 <li data-description="Skining a menu built using the MenuNav Node Plugin to look like the menus on Flickr"> |
|
165 <a href="node-menunav-7.html">Skinning Menus Created Using the MenuNav Node Plugin</a> |
|
166 </li> |
|
167 |
|
168 |
|
169 </ul> |
|
170 </div> |
|
171 </div> |
|
172 |
|
173 |
|
174 |
|
175 </div> |
|
176 </div> |
|
177 </div> |
|
178 </div> |
|
179 |
|
180 <script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
181 <script>prettyPrint();</script> |
|
182 |
|
183 <script> |
|
184 YUI.Env.Tests = { |
|
185 examples: [], |
|
186 project: '../assets', |
|
187 assets: '../assets/node-menunav', |
|
188 name: 'menunav-leftnav', |
|
189 title: 'Basic Left Nav', |
|
190 newWindow: 'true', |
|
191 auto: false |
|
192 }; |
|
193 YUI.Env.Tests.examples.push('menunav-leftnav'); |
|
194 YUI.Env.Tests.examples.push('node-menunav-2'); |
|
195 YUI.Env.Tests.examples.push('node-menunav-3'); |
|
196 YUI.Env.Tests.examples.push('node-menunav-4'); |
|
197 YUI.Env.Tests.examples.push('node-menunav-5'); |
|
198 YUI.Env.Tests.examples.push('node-menunav-6'); |
|
199 YUI.Env.Tests.examples.push('node-menunav-7'); |
|
200 |
|
201 </script> |
|
202 <script src="../assets/yui/test-runner.js"></script> |
|
203 |
|
204 |
|
205 |
|
206 </body> |
|
207 </html> |