O'Reilly logo

Creating a Web Site: The Missing Manual, 2nd Edition by Matthew MacDonald

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 15. Fancy Buttons and Menus

Chapter 14 gave you a crash course in JavaScript, the secret ingredient you need to add slick features and frills to ordinary Web pages. Although JavaScript is quirky, arcane, and sometimes frustrating, learning its basics pays off. In this chapter, you’ll use that knowledge to create fancy buttons and menus that liven up any Web site.

Although buttons and menus that pulse, swirl, and unfurl may seem like small potatoes, they’re actually a hallmark of contemporary Web design. In fact, a stylized button or well-designed collapsible menu is sometimes all the polish you need to make your pages stand out.

Fortunately, you don’t need to be a JavaScript whiz to add these sophisticated touches to your site. As you’ll see in this chapter, there are plenty of great tools (both in Web editing programs like Expression Web and Dreamweaver and in free online scripts) that can help you get the results you want without all-night JavaScript coding sessions.

Creating Fancy Buttons

In Chapter 8, you learned to use links to let site visitors travel from one page to another. Although ordinary links work perfectly well, they just aren’t showy enough for creative Web masters. Modern Web sites guide visitors through their pages with graphical buttons. Figure 15-1 shows an example.

These menu links look like ordinary text, but they’re actually graphical buttons. When you hover over one, the text changes color by substituting a different image. When you click a button, the image changes yet again, this time to a version with a different background color. Sometimes buttons add even more graphical details, like etched borders or artfully textured backgrounds.
Figure 15-1. These menu links look like ordinary text, but they’re actually graphical buttons. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required