Building a DHTML Drop Down Menu with Dreamweaver
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
One of the coolest ways to display your site's navigation is to use DHTML drop-down menus. You know the type: You roll your mouse over a link, and a menu drops down or flies out, revealing additional links. Drop-down menus take up less screen real estate than permanent links. You can be very creative (yet effective) in designing them as well, and they provide a nice bit of interactivity to your user.
Here's the catch: Learning to hand-code DHTML—the combination of HTML, CSS, DOM and JavaScript—takes time, even for the most devoted Web designer or developer. Even with experience, it can be time consuming to implement. Fortunately, Macromedia Dreamweaver includes a great visual tool that allows you to incorporate DHTML on your site without knowing any of the underlying code.
In this article, you learn how to build a DHTML drop-down menu using Macromedia Dreamweaver.
Here's an overview of what's covered in this multipart article:
Part 1: "Layers 101"—You'll begin by getting a quick overview of layers, including what browsers support them, and a high-level introduction explaining how they work. Then you'll dive right into creating the necessary layers for your sample chapter. You'll learn how to create, move, delete, and modify layers until you've placed them exactly where they need to be. After that, you'll learn how each layer's size and content was decided. Finally, you'll complete this part of the tutorial by working with multiple layers as you apply background colors and background images, insert regular images, and attach rollover images using Dreamweaver's rollover behavior.
Part 2: "Setting the Z-Index"—In the, second of four parts, you'll learn about CSS-P's z-index property, which controls how layers are stacked on top of one another. You'll also learn why each layer needs to be stacked above or below other layers for the DHTML menu to work. By the end of this section, you'll have all the layers positions and stacked appropriately—you're halfway there!
Part 3: "Setting the Initial Visibility Status"—In this section, you'll learn why and how to set each layer's initial visibility status to control which layers are visible and what's hidden when the drop-down menu first loads.
Part 4: "Attaching the Show-Hide Layers Behavior"—In the last section, you'll learn how to attach Dreamweaver's Show-Hide Layers behavior to different page elements to create the drop-down effect you're after.
Downloading the Project Files
Click here to download the necessary files to follow along with this article. The .zip file contains an HTML file and all the graphics files—everything you need to build the DHTML drop-down menu in this article.
Project File Locations
The instructions in this article assume that the image files are in a folder located in the same subdirectory as the dhtml-dropdown-menu.html file. If you place dhtml-dropdown-menu.html in the c:\website folder, then place all the images in the c:\website\images folder.
The HTML File
The dhtml-dropdown-menu.html file that you downloaded has been modified as follows:
The background color has been set to #B7A785.
The left margin, top margin, margin width, and margin height properties have all been set to 0.
The margins were set to 0 to ensure that a layer sized to 100% width actually takes up the entire width of the screen. By default, browsers include a small border around the pages it loads. Setting these margins to 0 overrides that default border setting.
NOTE
You can modify these properties in Dreamweaver by clicking Modify, Page Properties, or pressing Ctrl+J. Or, you can edit them directly in Code view.