How to Make a Spry Accordion Horizontal

Adobe Dreamweaver is software that helps web designers make web pages without having to manually code HTML or CSS. It is known as a “What You See is What You Get” type of web design program, because you can essentially drop text and images on the page area you want and Dreamweaver will put the HTML code in for you. One of the special features of Dreamweaver CS3 version and above is the Spry menu tool which adds a Spry accordion sub-menu in either a vertical or horizontal position without you needing to use complicated Java programming.

Instructions

1. Open your web page in Dreamweaver. Save any changes you made. Dreamweaver CS3 won’t allow you to make a Spry menu without first saving the page.

2. Place the cursor in the area of the document where you want to create the horizontal accordion menu.

3. Click the “Insert” tab in the top menu bar. Choose the “Spry” tab and select the “Spry menu icon.” This is the icon that has column shapes. Choose to make a horizontal Spry menu when prompted and click “OK.”

4. Add your accordion menu titles and links as you do on other link buttons in Dreamweaver. Upload it via your FTP connection to your webserver when you are finished with the document.

References

• University of Washington: What is Dreamweaver?
• DW Course: Creating and Customizing Horizontal Spry Menu Bars