11.12.2012 Views

JavaScript 2.0-The Complete Reference, Second ... - freecodingtutorial

JavaScript 2.0-The Complete Reference, Second ... - freecodingtutorial

JavaScript 2.0-The Complete Reference, Second ... - freecodingtutorial

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Figure 16-2: An improved pull-down menu with divisions<br />

HTML pull-down menus as navigation devices represent a break from traditional GUI design, so<br />

not much is known about their efficacy or usability. Instead of a repurposed form widget we may<br />

desire to build a more GUI-like menu—with <strong>JavaScript</strong> and CSS we can do just that..<br />

DHTML Menus<br />

<strong>The</strong> goal of many <strong>JavaScript</strong> menu systems is to emulate the functionality of ―real‖ GUIs, such<br />

as Windows, MacOS, or Linux‘s KDE. Pull-down menus provide a convenient and familiar way<br />

to provide users with lists of choices. <strong>The</strong>se choices are commonly links to pages with<br />

information about your products and company or links that trigger some sort of action in the<br />

page. By far the most common use for DHTML menus is for navigation enhancement.<br />

Be forewarned, implementing complex menu systems in <strong>JavaScript</strong> requires a high level of skill<br />

and knowledge. <strong>The</strong> process necessitates that the HTML, CSS, event handling, and dynamic<br />

manipulation of document objects in your page work together harmoniously under a variety of<br />

browsers. With so many interacting technologies, a number of subtle details are often<br />

overlooked, particularly with regard to event handling. If not caught during your testing process,<br />

these oversights can frustrate your users to the point where they will not return to your site. As<br />

with any DHTML task, you should plan on spending a significant amount of time testing your<br />

code under a variety of browsers. A malfunctioning menu system is worse than none at all.<br />

In this section we present some of the most popular varieties of <strong>JavaScript</strong>-based menus seen<br />

in sites, but this selection is by no means exhaustive. <strong>The</strong> DHTML Web sites mentioned in this<br />

chapter, particularly www.dynamicdrive.com, www.dhtmlcentral.com, and<br />

www.webreference.com, are all excellent sources of inspiration and code. We‘ll present a few<br />

examples of what you can find at such sites to get the idea of how other forms of menus can be<br />

created.<br />

Application-Like Menus<br />

<strong>The</strong> first edition of this book included a lengthy demonstration of how to build application-style<br />

menus in <strong>JavaScript</strong> that mimic the look and feel of operating system menus. While the<br />

example was instructive, it was fairly complex and not really appropriate for use in the ―real‖<br />

world. In this edition we present a simple menu system purely as an instructional device.<br />

One complexity with <strong>JavaScript</strong>-based menu systems is setup and appropriate application of<br />

CSS. For example, when creating a menu of any sort, generally we rely on the tag to<br />

hold our various choices.<br />

<br />

Book Releated Sites

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!