YUI Library Home

YUI Library Examples: TreeView Control: Menu-Style TreeView Design

TreeView Control: Menu-Style TreeView Design

As with the Folder Style example, here we're using CSS to control the styling of our TreeView Control's node icons. The CSS and image assets for the Menu Style are available as part of the YUI download package.

This example also implements MenuNode instead of TextNode for node creation. Only one MenuNode can be open at a given depth at the same time. This creates an interaction in which nodes close up behind you as you open new ones, keeping the vertical size of the TreeView more compact during navigation.

Implementing the Menu Style

The key change we've made in this TreeView Control example is that we've applied a supplementary CSS file to create the "Menu Style" node presentation:

This CSS redefines the look of branch nodes so they appear as arrows. The folder-style CSS accompanies your YUI download and can be found in the yui/examples/treeview/assets directory.

Beyond the link element referenced above, the following markup is on the page for this example:

Based on that markup, we use the following JavaScript code to create our TreeView instance, populate its nodes, and add expand/collapse functionality:

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings