How do I… Create a customized JavaScript jump menu in Dreamweaver CS3?

If you are in charge of maintaining a Web site, one of your recurring tasks is likely accommodating a committee of supervisors or clients that want to add links to the site on a continuing basis. This can often lead to a cluttered navigation interface, if it doesn’t destroy your layout altogether.

Fortunately, Adobe Dreamweaver CS3 has many tools that can provide quick and easy solutions to problems like these. One of the more practical solutions to an ever-expanding list of navigation links is a JavaScript “jump” menu, which is a pull-down form menu that automatically directs the user’s browser to another Web page as soon as they select an option from the menu. And the best part is that no knowledge of advanced scripting techniques is required to implement it. You can even use some simple CSS code to give your Jump menu a distinct look.

If you don’t own a copy of Dreamweaver CS3, you can download a fully functioning 30-day trial.

This blog post is also available as a TechRepublic gallery and TechRepublic download. The download includes an example of the JavaScript described in this How do I… blog post.

Let’s begin by opening Dreamweaver and creating a new HTML document (Figure A) by selecting the New option from the File menu. In the Dialog box that appears, Select HTML in the Page type column. Ignore the other options in the box, and click the “Create” button.

Figure A

Creating a new HTML document in Dreamweaver CS3

Before you do anything else, save your document. It is always a good idea to save a new HTML document in Dreamweaver in the directory that houses your parent Web site before you begin coding. This will help avoid broken and misdirected links later on if you decide to link to internal site pages.

Dreamweaver lets your author a page via its WYSIWYG tools as well as by hand-coding. Its best to have both options visible at all times so that you can switch back and forth and see how modifying the code affects the browser preview and vice-versa. If both the Code and Design view are not visible, click on the button that is labeled “Split”. You will find it in-between the Code and Design buttons near the top of the screen, under the document tab (Figure B).

Figure B

Clicking the Split button lets you see both the Code and Design windows

Now it is time to build our Jump menu. Go to the top of the screen and in the horizontal Insert menu (it runs across the screen just under the Application menus) click on the Forms tab to bring up the Form objects. (Figure C)

Figure C

Select the Forms tab to bring up the Form objects palette

Next, click on the Jump Menu button. This will make a dialog box appear, as in Figure D.

Figure D

Click the Jump Menu button to bring up the Jump Menu authoring box

Let’s have the first item in our Jump Menu take us to Google.com. The field labeled “Text:” is the text that will appear in the menu when the user views it in his browser. It can be whatever you wish, including most special characters. For now, let’s keep this simple. In the “Text;” field, enter the word Google (Figure E). The field below it, labeled “When selected, go to URL:” is the Web address that will be the destination tied to the copy in the “Text:” field. Enter the URL http://www.google.com.

Figure E

Creating the first item in the Jump Menu

Next, let’s add two more items to the Jump menu. Click the Add Item button two times and you’ll see the Jump menu add two more blank entries. (Figure F)

Figure F

Adding two blank items to the Jump Menu

Click on item1 in the Menu Items list and fill out the Text and Selected URL fields just as you did before, linking the new item to an absolute URL. Repeat the process again with item2. (Figure G)

Figure G

Linking the two new menu items

Now let’s say that you want to rearrange the order of the items in the menu list. This is easily done with the two arrow buttons in the upper right area of the dialog box. Click on the last entry in the Menu items box to select it. Then click on the up arrow until the last item is now at the top of the list, as in Figure H.

Figure H

Re-ordering the Menu items

When you are satisfied with the content of your Jump Menu, click the OK button to return to Dreamweaver’s main authoring area to see your menu. (Figure I)

Figure I

The newly-created Jump Menu

Before we test it, let’s use some simple CSS code to make the Jump Menu a little more distinguished. Go to the top of the screen and from the Window menu, select the CSS option. The CSS palette will open, as shown in Figure J.

Figure J

The CSS palette

Click on the Add CSS Rule button to bring up the CSS Rule dialog box (Figure K). In the Selector Type options, choose the Tag option. In the Tag pull-down menu, choose the “Select” tag. Finally, click the Radio button at the bottom that is labeled “This document only.”

What these options do is define the appearance of your Jump Menu automatically, so that you do not have to assign a CSS class to the menu later or worry about an external Style sheet. Click OK to continue to the CSS Rule Definition dialog box.

Figure K

The New CSS Rule dialog box

The CSS Rule Definition dialog box will open at the Type Category, From the Font pull-down menu, select the font set “Arial, Helvetica, sans-serif”, then give it a size of 10, as shown in Figure L.

Figure L

Defining Type options for the New CSS Rule

Now select the Background Category and select a light value color, as shown in Figure M.

Figure M

Defining Background options for the New CSS Rule

Click OK to return to Dreamweaver’s authoring area. The styles you defined should be readily viewable in the Jump Menu. (Figure N) Save your document, and then open it up in a Web browser to test it.

Figure N

The completed Jump Menu

There is no limit to the number of items the Jump menu can list, and of course, you can even link it to Web pages within your own Web site. Use the CSS customization to make it fit right in with your site’s unique look and feel.

courtesy @Techrepublic