Create a navigation bar with drop-down (or pop-up) menus
Caution: while this page is retained for those still supporting this style of button menus in Dreamweaver, these menuse are not mobile friendly. For more modern designs that are mobile friendly, see Responsive Web Design: Quck Tips.
Dreamweaver provides the ability to create nice drop-down menus for navigation bars. Unfortunately, this capability is well-hidden.
If you slide your mouse over the navigation bar to the left, you should see drop-down submenus appear and disappear.
These submenus are variously called "drop-down", "pop-down", "pop-up", and "fly-out", partly depending on where we choose to have them appear.
Overview
First, let's define our terms.
- The navigation instrument you see in the left column is a navigation bar.
- The navigation bar consists of choices that are actually graphic images (though they look like text), called buttons.
- The submenus that appear when you slide your mouse over the buttons we will call menus. We may call them drop-down menus, pop-up menus, or fly-out menus, but always menus. Dreamweaver's term is "pop-up menu".
Making your buttons
Look at the navigation bar at the left. Each of the words ("Teaching", "Research", etc.) is actually a graphic image such as this below,
that I will call a "button". So first you need to use a graphics program such as Photoshop or Paint Shop Pro to create the buttons. GIF and PNG formats work well for most buttons, giving good quality at small file size. (I will not discuss the details of creating such buttons.)
You will then need to create a small variant of each one that is used when the visitor's mouse is hovering over the button, the "mouseover" image. You may use a different colored background, or a bolder font such as here:
Once you have a complete set of these, you are ready to create the navigation bar.
Creating the navigation bar
In Dreamwever, Choose Insert > Image Objects > Navigation Bar.
This brings up a rather clearly presented window for creating your navigation bar.
At the bottom of the window choose whether you want a horizontal bar or a vertical bar like the one at left.
Click on the "+" for each element you want to add. For each, use your first image as the "up" button, and your "mouseover" image as the "over" image. The "down" and the "over while down" can be the same as the "over" image, or you can get creative to achieve the effect you desire. Be sure to supply "alt" text to aid navigation for those with limited sight. Finally enter the destination web page for this element in "When clicked, Go to URL".
Continue adding elements until your navigation bar is complete. Exit the navigation bar creation window, save, and test.
Adding drop-down menus
This option is eacy to use but very well-hidden in Dreamweaver. )This discussion assumes you chose the "Designer View" for your Dreamweaver workspace. This is the default choice when you install. )
On the right side of the Dreamweaver window, there are the panel groups, including "Design", "Code", "Application", "Tag", and "Files." If the "Tag" panel group is not expanded, clidk on its arrow to expand it.
You should now see three tabs in the "Tag" panel: "Attributes", "Behaviors", and "Relevent CSS." Click on "Behaviors."
Click on the first button of your newly created navigation bar, for example, "Teaching". Under the "Behaviors" tab, you should see an entry that includes the words "onMouseOver". Click once on this row, then clidk the "+" menu under the Behavior tab. Choose "Show Pop-up Menu."
This opens a window that will lead you through the steps of creating your pop-up menu for the first navigation bar element. You must enter the text and the link for each menu choice. The "+" button lets you add additional menu choices. Other tabs let you control where the pop-up should appear, the text color, and the background color. The Show Pop-Up window is pretty clear once you have found it!
Continue adding text and the links until your pop-down menu is complete.
Repeat for each element of your navigation bar.
That's it! You have a navigation bar with pop-down menus.
You can later edit the menu you have created as follows:
- Click on the button whose menu you wish to edit.
- Look at the "Behavior" tab under the "Tag" panel.
- Double-click on "Show Pop-up Menu." This brings up the "Pop-up Menu" that controls all menu choices.
Designing for accessibility and ease of use
Design your site to work without the drop-down menus.
Be aware that not everyone who visits your site will see your beautiful pop-down menus. Some will be visually impaired and will be using software the converts your page to speech. Pop-downs may not be read by such software.
Other users will have disabled Javascript, and these menus depend on Javascript.
You can design for these users by the button on the navigation bar take the user to a web page with links to all the menu choices you provided on your pop-down (at minimum).
A good exercise is to disable Javascript in your browser and then try exploring your site.
Pop-down menu position
Give the user a big target. As the user slides from your button to its drop-down, you want the menu to have as much overlap with the button as possible. For a vertical navigation bar like on this page, the drop-down (fly-out) menu is positioned to begin at the top right of the button.
For a horizontal navigation bar, position the drop-down menu should begin at the bottom left of the button.
Position choice is selected in the "Position" tab of the "Pop-up Menu".
Choosing menu delay
The menu delay, how long the menu stays up after you have moved your mouse off of it, is specified in the "Advanced" tab of the "Show Pop-up Menu".
The default is 1000 milliseconds, or one second. Many users find such a long delay annoying, as the menu continues to block other items on the screen.
Setting the delay to zero is not workable. As you slide your mouse from one menu item to the next, it crosses a boundary that is not considered part of the menu. Thus, the menu disappears.
I find that 150 ms is a good choice. It is hard to move your mouse so slowly that the menu unintentionally disappears, but 150 ms is fast enough that users are not annoyed by your pop-ups.
On the navigation bar on this page, the first three items have menu delays of 150 ms, while the last three have delays of 1000 ms. Play with this menu to see the difference.
|
