In this article we’re going to build vertical menus with CSS3. Whenever possible, I recommend using software for several reasons: It’s easier and it saves a lot of time. If you need to reverse engineer the results it’s easier than building the layout from scratch. Still, there will be times when scratch building a layout will be a better approach. In that case, there’s a resource section at the end of this article with some tutorial options that will be of use to you.
Right now, we’re going to look at a couple of software options.
Fast CSS3 Vertical Menus with Dreamweaver CS6
Our first program is Adobe Dreamweaver CS6 and the Spry Menu Bars. To get started, I’m going to create layout using the built-in templates.
Go to File: New. I chose to create a template with the settings below:
Blank page HTML 2 column fixed, left sidebar, header and footer DOCTYPE: HTML5
Here’s the template page. I’m going to remove the default navigation highlighted in the screen shot above to make room for a Spry Menu bar.
The template now looks like the above.
To add a Spry Menu bar to the layout, activate the Spry tab and click on the Spry Menu icon. This brings up the dialog box you see above. Choose the vertical option and click on OK.
This adds the Spry Menu bar to your layout.
As you can see, there are multiple menu options up to three levels across, which you can easily edit.
One option is to edit the HTML as in the screen shot above. As you can see, this would be fast and easy to do.
When working on this project, you’ll notice a CSS and a JavaScript file. These were created when the Spry Menu was inserted into the document. Editing these values will control how the Spry Menu is displayed.
As you can see, Spry Menus offer a fast and easy way of creating menus, whether vertical or horizontal in your layouts.
Fast CSS3 Vertical Menus with CSS3 Menu 3.3 
In this section, we’re going to look at a fast way of creating menus and sub-menus using CSS3 Menu 3.3. Since I’m using the free version, I only have access to the Android, Mac and Compact Gray templates, but even with these limitations, there’s a lot that can be done.
For this section, I’m going to make use of the Android: Green Vertical template.
As you can see, the menu comes with some default settings. To add or delete menu items, simply click on an item to select it and edit it. To add an item to a menu or submenu, click on the large “+” button. To add a submenu, click on the small “+” button. And to delete an item, click on the red “-” button to remove it.
Immediately below the buttons are several fields which allow you to enter the name of the menu item, the link, target and hint.
You can also make use of icons to go with the menu item. This option is on the top right of the interface.
Once you’ve decided on the menu and submenu structure along with the links, you can now exert control over the look and feel of the menu items. On the bottom right of the interface you’ll notice two tabs, one for menus, one for sub-menus.
In this section, you have control over the font color, size, color of the hover, background, radius controls, size and width of the menu and more. To give you a sampling of what this can do, here are some changes I’ve made to the default template.
As for what I’ve changed, here are the main menu settings:
Background Hover: #00FFFF Menu Radius: 0 Font: Tahoma, Geneva, San Serif Menu Width: 112px Menu Height: 117px
Here are the settings for the Sub-Menu
Menu Radius: 0 Background Hover: #00FFFF
Note that in the Sub-Menu section there are some advanced settings but since I have the free version of the software I’m unable to access these settings.
Here’s what the menus look like now.
Once you’re satisfied with your settings, click on the disk icon to save your project. The other option is the world icon and you click on that to publish the project.
When you save the project you’ll wind up with several files: An HTML file of the page, and a folder that contains the CSS and the image components that make up the menu. For reference, here’s a file containing the HTML, CSS3 and images, so you can see how it all works.
Conclusion
As you can see, it’s much easier to build menus using software, partly because it saves time. But there will be occasions when templates don’t quite do the job. In that case you’ll need to modify an existing template or build the menu from scratch.
Reverse Engineering Tutorials
There are several ways of reverse engineering a tutorial and one way is to copy the code into a document, then either comment out or remove parts of the code to see what that does to the layout. Another way is to make use of Firebug in the Firefox browser, which allows you change/delete code without actually affecting the source. And when you’re done, you can copy those changes for use in your layouts.
Resources
• Demonstration of Spry Menus
• 15 CSS3 Navigation and Menu Tutorials and Techniques
• 40 Free CSS3 Menu Tutorials
• Devin R Olsen
