Using Sliding Menus

A sliding menu is a simple user interface widget that lets you put a lot of information on a page without cluttering it all up. The user can view just as much (or as little) of the extra information as they want to see at a time. Script 15.1 contains the HTML, Script 15.2 the CSS, and Script 15.3 the JavaScript, as shown below.

Script 15.1. Here’s a straightforward HTML page with a lot of links.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Shakespeare's Plays</title> <link type="text/css" rel="stylesheet" href="script01.css" /> <script type="text/javascript" src="script01.js"></script> </head> ...

Get JavaScript and Ajax for the Web: Visual QuickStart Guide, Seventh Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.