Background information

Scripting conventions

Some useful scripts:

User Alerts

Page information

Pull-down menus

Random images

Mouseovers

Windows and remotes

Where to go from here



Classes home

HTML Info home

 

Javascript

Jeff Williamson
Northern Virginia Community College
www.nvcc.edu/home/nvwillj/html-graphics/
nvwillj@nvcc.edu


Pull-down menus

Pull-down menus might be the most ubiquitous use of Javascript on the web, and for good reason.  They work pretty well in most conditions, free up space for web design, and are user-friendly.

I have seen about three types of pull-down menus: menus with a button activator, automatic menus, and menus for frames.

Menu with a button activator

This type of menu is good for a longer set of choices, where users might have a hard time scrolling up or down to the correct item.  The button serves as a confirmation of their choice before the page is brought up.

Click here for the source code.

Automatic menus

This script conflicted with the script above so it's on a separate page.

Menu for frames

Framesets often have a thin frame for navigation controls, and drop-down menus are nice space-saving solutions.  They require slightly different coding, so that the page loads in a different window from the navigation frame (the menus above, if placed into a thin navigation frame would load the new page into the thin navigation frame).

Problem: there are endless variations for how a new page could load:
  • in a whole window, without a frameset?
  • in the main window of a frameset?
  • in one of the windows of a multi-frame nested frameset?
    • exactly which window and exactly how are the frames nested?

There's no simple solution here, save to read up on frames and Javascript, particularly on Javascript and parent and top frameset properties.

An example of a Javascript menu in a navigation frame is in an instructional site I wrote as part of a class project.

The source code for the menu is here.

 

Comments? Questions? Visit the help page

Machine translations of this page into
Spanish, French, German, Italian, and Portugese
are available

Last updated information on updates page