GUI Cookbook

Also known as the pull-down menu bar or drop-down menu or top menu bar

It is the granddaddy of two-stage menu designs (only the simple horizontal menu is older) with its conceptual birth sometime after 1979.

It appeared for the first time in Apple’s Lisa Office System user interface when was released in January 19th, 1983 as the main navigation device for all the services that the computer of the same name rendered, namely four: "Print/File", "Edit", "View" and "Disk" (the last two varied according to the program) Although the exact date of the invention probably falls earlier, since the Lisa project started on July 30th, 1979.

No doubt, the menu behavior was reminiscent of the sliding action in desk drawers… given the desktop metaphor followed in the rest of the interface. This early menu introduced as well the following other behaviors (still relevant in current interfaces!):

• Changing contrast to show rollover over items.
• Flickering to show selection.
• Keyboard shortcuts for the most frequently used menu commands.
• Checkmarks next to the active menu items (active services).
• "Graying out" of menu options if they were not currently available (A feature deemed so important that the system font was designed to be readable in that state).
• Line dividers to cluster commands of similar nature in each dropping panel.
• Menu “shadow” to make it stand out of the underneath desktop.
• Icon prefix for better differentiating menu items.
• Ellipsis suffix (when needed) to signify those actions in the menu that will require further steps to proceed.

The idea of the drop-down stuck on, and was transferred on the next operating system from the same company: Mac System 1.0 on January 24th, 1984.
Soon after Tandy Computers released DeskMate, the first version of their own GUI in 1984, designed to be used primarily with the keyboard, using function keys as shortcuts for the menus.

On July 11th, 1985, Digital Research introduced their operating system GEM (Announced on PC Magazine, December 25, 1984, pp. 35), a windowing, menuing, iconographic GUI for DOS and for Atari's ST released in that year. It imitated the Mac’s menu so closely (among other features) that it was sued by Apple.

When Microsoft’s Windows 1.0 was released on October 20th, 1985 (although was announced in November 10th, 1983) it introduced the innovation of color and assigned drop-down menus to EACH application just below their title bar. (Lisa and Macintosh only afforded one single system-wide menu bar)… That benefits of such distinction is still being debated up to this day.

Horizontal-vertical menus will not undergo any other dramatic evolution until October 12th, 1988, with the release of NeXTSTEP 0.8 (the operating system for Steve Jobs' NeXT computer) which introduced the vertical-vertical-hierarchical menu as well as the concept of one-click to drop and maintain the menu in place (until a choice in the menu items was done, a common and default practice today) which was a departure from the previous theory of click-and-hold of the mouse button used in the Lisa, Mac and other operating systems at the time.

Drop-down menus became a staple on most operating systems after that, but they will not appear on web sites until the introduction of supporting technologies (for layering and animation) in the web browsers of the time.

Netscape Communicator 2.0B1 (First Beta of the Navigator release) in October 1995 added the ability to handle Java. It is likely that a site could make use of such to create rudimentary drop-down menu behavior. (2.0B3 on December 1995 added the ability to process JavaScript).

Internet Explorer 3.0B1 in May 1996 (The first public release of 3.0) added scripting support (VB and Java). In July 1996, 3.0B2 added support for Cascading Style Sheets and Java applets all godsends for menu-designers.

Netscape Communicator 4.0B2 in February 1997 (Second preview release of 4.0) added in-line layering and Cascading/JavaScript Style Sheet Support. (Including support for core technologies for the DIV tag that will allow careful positioning of moving, overlaying content)

The adoption of drop-down menu behavior, as Javascript+HTML devices, or now days with pure CSS, was quick across the web.

Resources:

http://www.guidebookgallery.org
http://www.blooberry.com/indexdot/
http://toastytech.com/guis/index.html
http://www.operating-system.org/
http://www.seasip.info/Gem/versions.html
http://www120.pair.com/mccarthy/nextstep/intro.htmld

This is a test