Dreamweaver CS6: The Missing Manual

Creating a Navigation Menu

Every website should have navigation links that let visitors quickly jump to the site’s main areas. On a shopping site, those links might point to the categories of products for sale—books, DVDs, CDs, electronics, and so on. For a corporate intranet, links to human resources, office policies, company events, and each department might be important. Whatever the site, a web designer should strive to get visitors where they want to go via the shortest route possible.

Dreamweaver CS6 includes a powerful and easy navigation-building tool—the Spry menu bar. With it, you can put all your site’s most important links into a compact horizontal or vertical menu (see Figure 4-13). Each button supports two levels of drop-down submenus, so a visitor can quickly jump to a page buried deep within your site.

The Spry Menu Bar is just one of the many “Spry” tools in Dreamweaver CS6. You’ll learn a lot more about what Adobe calls the Spry Framework in Chapter 13, but in a nutshell, Spry is a collection of advanced JavaScript programs that let you add lots of dynamic effects to your web pages. (If you’re familiar with the old Dreamweaver Behaviors, Spry is like those—on steroids.)

Adding a Menu

The first step in inserting a Spry menu is deciding where on the page to put it. A horizontal menu bar, with buttons sitting side by side, works well near the top of a page, either at the very top or below the area dedicated to a logo (often called a “banner”). A vertical menu bar, whose ...