Spry Menu Bar


From http://help.adobe.com/en_US/dreamweaver/cs/using/WSE935C5F2-03DA-47c2-A092-364F2109664Da.html

A Spry widget is a page element that provides a richer user experience by enabling user interaction. A Spry widget comprises the following parts:

Widget structure: An HTML code block that defines the structural composition of the widget.
Widget behavior: JavaScript that controls how the widget responds to user-initiated events.
Widget styling: CSS that specifies the appearance of the widget.

The Spry framework supports a set of reusable widgets written in standard HTML, CSS, and JavaScript. You can easily insert these widgets—the code is HTML and CSS at its simplest—and then style the widget. The behaviors in the framework include functionality that lets users show or hide content on the page, change the appearance (such as color) of the page, interact with menu items, and much more.

Each widget in the Spry framework is associated with unique CSS and JavaScript files. The CSS file contains everything necessary for styling the widget, and the JavaScript file gives the widget its functionality. When you insert a widget by using the Dreamweaver interface, Dreamweaver automatically links these files to your page so that your widget contains functionality and styling.

The CSS and JavaScript files associated with a given widget are named after the widget, so it's easy for you to know which files correspond to which widgets. (For example, the files associated with the Accordion widget are called SpryAccordion.css and SpryAccordion.js). When you insert a widget in a saved page, Dreamweaver creates a SpryAssets directory in your site, and saves the corresponding JavaScript and CSS files to that location.

Sample of a Spry Menu Bar