HTML5 and CSS3 All-in-One For Dummies
Book image
Explore Book Buy On Amazon

The concept of a JavaScript-based menu is straightforward. When you hover a mouse pointer over a menu, it opens any submenu and lets you choose one of the options on the submenu, if desired. Moving the mouse to a different menu closes the first submenu and opens another.

How to design the HTML for the menu

This example is based on heavily formatted lists. There are many other ways to create menus, but this approach works quite well. Theoretically, you could easily store the menus on disk or in a database and use JavaScript to construct the required list code for you. However, for now, concentrate on the fact that this menu system is static and provides specific options as shown in the following code:

There are three main menu options: Home, Events, and Contact Us. The Home menu lacks submenus. The Events menu does have a submenu consisting of Event 1, Event 2, and Event 3. The Contact menu provides Telephone, Mail, and E-mail as submenus.


Define the menu styles

The lists that you created won’t look much like a menu at the outset. The secret is the formatting provided by the CSS that follows:

This CSS code is presented in the order of detail. The #menu formatting is for the topmost

About This Article

This article is from the book:

About the book author:

Andy Harris taught himself programming because it was fun. Today he teaches computer science, game development, and web programming at the university level. He's also been a technology consultant for the state of Indiana, helped people with disabilities to form their own web development companies, and worked with families to help them learn computing at home.

This article can be found in the category: