VISIBLE RANKING — ONLINE MARKETING

How to create a cross-browser drop-down menu with Dreamweaver in minutes

This is going to be short and the main purpose is to let you know Dreamweaver CS4 has a built-in functionality letting you create a good CSS-based drop-down menu in minutes. I’m not sure at what version Dreamweaver started to have this built-in drop-down generator. Perhaps it was from CS3.

The drop-down is CSS/text-based, very easy to customize and maintain and works well with different browsers even when you have a big Flash or image banner right underneath.

Use the Insert menu

All you need to do is go to menu Insert > Spry > Spry Menu Bar. Dreamweaver/Spry will display a pop-up asking you whether you want a vertical or horizontal menu. After selecting, you just need to play with the Properties panel in Dreamweaver to specify the number of levels your menu is going to have as well as how many sub-item under each main item and so on. Dreamweaver will create a web file [.html, .php, .asp...] , a CSS file [.css] and a Javascript file [.js] and put these 3 files in a folder. If you’ve already managed your website(s) with Dreamweaver [with Site > Manage Sites...], these 3 files will be put inside a folder under one of your managed website.

Changing the drop-down properties

Briefly from the image above from the left to the right, you can specify:

• The instance name of your drop-down menu: the instance name is the id [used in the accompanied CSS and Javascript] of your menu. You can have more than one instances of drop-down menu on a page. Each instance will have a separate id.
• The properties of your first level: number of items, name and url of each item. You can easily add or delete any item by using the plus + or minus - sign. Initially and by default Dreamweaver automatically names individual items as Item 1, Item 2…, and you can easily change these name in the Properties Panel
• The properties of your second level: The same as above

If you’re familiar with CSS, you can easily edit the CSS file such as changing the menu background colors, mouseover colors, text colors, menu width and so on.

Again, hope this helps! Feel free to post your question/comment.