WEB DESIGN GARAGE [Electronic resources] نسخه متنی

Chapter 10. Creating Popup Menus

Popup menus are all the rage these days. Surely, you've seen them on the Web. You hover over a navigation choice, and a menu of related items appears. It's a classy effect, as Figure 10.1 shows.

Popup menus used to be a nightmare to implement. Fortunately, Internet Explorer since version 5 and Netscape since version 6 support a new kind of JavaScript method called getElementById, which simplifies the scripting of all types of interactive features, including popup menus. Browsers capable of understanding getElementId have been available for a couple of years now, and they are now the predominant browsers on the Web by far; so, for most kinds of sites, you can write scripts with this method in good conscience. Older browsers choke, though, so be warned.

Dynamic HTML, or DHTML, is the synergy of HTML, JavaScript, and Cascading Style Sheets (CSS), all working together to create an interactive Web experience. The typical popup menu is a perfect example of DHTML in action. You build the layout of the nav bar in HTML. CSS elements called layers give you the menus, and a few straightforward JavaScript functions bring the menus to life.