~bcsaller/juju-gui/charmFind

This example demonstrates how to create a traditional, two-column page layout (<a href="../cssgrids/index.html">using Grids</a>) with top navigation featuring drop-down menus.

</p>

</div>

View Example in New Window

</a>

</div>

<h2>Setting Up the HTML</h2>

<p>

Begin by including the <a href="../cssgrids/index.html#dependencies">CSS Grids dependencies</a> and grid

markup (this example uses a 2 column version of the

<a href="../cssgrids/cssgrids-fluid.html">Fluid Page Template</a> with a 160px left column).

Add the markup for the menu to the left column of the grid, and the class <code>yui3-skin-sam</code>

to the <code><body></code>.

</p>

<p>

The root menu of menus built using the MenuNav Node Plugin can have a verical or horizontal

orientation. The default orientation for menus is vertical, but can be easily switched to

horizontal by applying a class of <code>yui3-menu-horizontal</code> to the node representing the

root menu's bounding box, as illustrated below:

</p>

<ul>

</ul>

</div>

</div></pre>

<h2>Initializing the Menu</h2>

<p>

With the menu markup in place, retrieve the Node instance representing the root

menu (<code><div id="productsandservices"></code>) and call the

passing in a reference to the MenuNav Node Plugin.

</p>

<pre class="code prettyprint">// Call the "use" method, passing in "node-menunav". This will load the

// script and CSS for the MenuNav Node Plugin and all of the required

// dependencies.

YUI().use('node-menunav', function(Y) {

// Retrieve the Node instance representing the root menu

// (<div id="productsandservices">) and call the "plug" method

// passing in a reference to the MenuNav Node Plugin.

var menu = Y.one("#productsandservices");

menu.plug(Y.Plugin.NodeMenuNav);

});</pre>

<p>

<em>Note:</em> In keeping with the

<a href="http://developer.yahoo.com/performance/">Exceptional Performance</a>

team's recommendation, the script block used to instantiate the menu will be

<a href="http://developer.yahoo.com/performance/rules.html#js_bottom">placed at the bottom of the page</a>.

This not only improves performance, it helps ensure that the DOM subtree of the

element representing the root menu

(<code><div id="productsandservices"></code>) is ready to be scripted.

</p>

</div>

100

101

102

103

104

105

106

<h2 class="no-toc">Examples</h2>

107

</div>

108

109

110

111

112

113

114

<a href="menunav-leftnav.html">Basic Left Nav</a>

115

</li>

116

117

118

119

120

<a href="node-menunav-2.html">Basic Top Nav</a>

121

</li>

122

123

124

125

126

<a href="node-menunav-3.html">Menu Button Top Nav</a>

127

</li>

128

129

130

131

132

<a href="node-menunav-4.html">Split Button Top Nav</a>

133

</li>

134

135

136

137

138

<a href="node-menunav-5.html">Left Nav with Submenus with Shadows</a>

139

</li>

140

141

142

143

144

<a href="node-menunav-6.html">Left Nav With Submenus With Rounded Corners</a>

145

</li>

146

147

148

149

150

<a href="node-menunav-7.html">Skinning Menus Created Using the MenuNav Node Plugin</a>

151

</li>

152

153

154

</ul>

155

</div>

156

</div>

157

158

159

160

</div>

161

</div>

162

</div>

163

</div>

164

165

166

167

168

</body>

169

</html>

Older »