When creating your own navigation system for your web site, Spry is a remarkable tool that organizes and breaks down the entire structure simply and easily. The Spry system makes it so easy to go back and change the structure and layout of different navigation elements with a system of menus and submenus, so that you don’t have to mess with a ton of code. Sometimes, it is easier for us to work visually to create our designs, and Dreamweaver, along with the Spry system, helps us to do that.
For the example, we are going to create and edit a menu that has submenus that go 3 deep. This makes it easy to organize a lot of information quickly, and categorize your topics in the structure of a tree’s branches. We will talk more about that later.
Open up your document, and click your cursor at the point where you want to insert your navigation menu. This menu is going to be placed down the left side, and will branch out with different submenus. Just for the example, We are going to make this short and sweet. With you cursor at the desired position, go to Insert >Spry> Spry Menu Bar. A window will pop up, allowing you to choose from a horizontal menu with drop downs, or a vertical menu with flyouts. For today’s purposes, we are going to choose vertical.
From here, things are pretty simple. The first column, with items 1, 2, 3, and 4 are the main items. Whatever you want to be seen when someone comes to this page is what you want to have in the first column. These are your main categories. WHere it says “text” is where you type in the name of the menu item. Each additional column after that is for another submenu. You can create them as deep as needed, but I wouldn’t go much farther than about 4 submenus deep, because that can become tedious to deal with when navigating a web site. You still have to consider usability and basic simplicity. The Link section under text is where you set the submenu to point to when it is clicked on. In other words, the page that it links to. This is simple, and easy to organize. If there aren’t enough menus or submenus, then click the + or – signs to add and subtract menus accordingly.
Setting the menu system up, adding fields, and adding new stuff later is the easy part. The next part is still easy, but only if you now what you are looking for. We are going to edit the look and feel of the type and the background of the buttons via CSS. Looking at the large list can be a little daunting if you are new to the SPry system, but there are a couple of main areas to focus on.
Go to the CSS Styles panel and make sure that All is selected. Scroll to the bottom of the list, and you will see SpryMenuBarVertical.css. It should have an arrow next to it, so click it and its submenus will drop down. Choose the first menu at the top, which will allow us to edit the look and feel of the buttons. This is called Ul.MenuBarVertical. Double click this item and a pop-up menu will come up, allowing us to edit the Text, its color, thickness, size, typeface, background, etc. Here create the navigation buttons to fit with your site.
The one thing to remember is that your submenus need to look consistent with your main menus, but if for some reason you want them to be different, you can control that easily as well. To edit the look of the submenus, scroll down the list in the CSS panel until you find ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus and the next three menus after that. These control the hover effects of the main menu and the looks of the submenus and their hovers states as well. This is where Spry is so versatile, because you can create a truly custom, completely editable, completely organized menu system that isn’t an absolute pain to go back and edit.
