| Anyone who has used a GUIwhether Mac-based, Windows-based, or UNIX-basedhas watched menus in a window collapse and expand. Click a folder, and its contents are displayed below the folder, while the other files and directories move down to accommodate the expanded content. In Windows, you click plus and minus signs. On the Mac, you click triangles. You can achieve a similar effect on the Web using the display property In this example (Figures 23.6 and 23.7), the menu is placed into a frame to the left of the content, allowing the visitor to quickly move through the pages while maintaining a consistent menu position and open state. Figure 23.6. The list of menu options is in the left frame, and the content is on the right. 
Figure 23.7. The menu for Part I contains links that target the right frame. 
To create a collapsing/expanding menu: | | 1. | var autoClose=1;
In your JavaScript, initialize the variables (Code 23.3):
Code 23.3. The toggleClamShellMenu() function (located in the file menu.html, which is displayed in a frameset) shows or hides submenus.| [View full width] <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Creating Collapsable Menus</title> <script type="text/javascript"> var autoClose=1; var oldObject=null; function toggleClamShellMenu(objectID) { if ((oldObject)&&(autoClose==1)) oldObject.style.display='none' var object = document.getElementById(objectID); if (object.style.display =='block') object.style.display='none'; else object.style.display='block'; oldObject = object; return; } </script> <style type="text/css"> body { font-family: "Helvetica Narrow", Arial, Helvetica, Geneva, sans-serif; background-color: silver; } ul { margin-top: 0px; padding-top: 0px; margin-bottom: 0px; padding-bottom: 0px; } #menu1, #menu2, #menu3 { display: none; } .menuHead { color: #c00; font-size: 14px; font-family: Arial, Helvetica, Geneva, sans-serif; font-weight: bold; text-decoration: none; } .menuOption { display: block; color: #f00; font-size: 12px; font-family: Arial, Helvetica, Geneva, sans-serif; } .menu { width: 98%; } .menu li { list-style: none; margin-left: -20px; } .menu a { font-size: .7em; display: block; text-decoration: none; border-top: 1px solid #666; border-bottom: 1px solid #666; padding: 4px; background-color: #999; color: #fff; margin-left: 2px; } .menu a:hover { font-size: .7em; display: block; text-decoration: none; border-top: 1px solid #666; border-bottom: 1px solid #666; padding: 4px; background-color: #666; color: #f99; } </style> </head> <body> <div > <a href="introduction.html" target= "content"><b>Introduction</b></a> </div> <div > <a href="#" onclick="toggleClamShellMenu('menu1')" >⇒ Part I</a> <ul > <li><a href="ch01.html"target="content">Down The Rabbit-Hole</a></li><li><a href= "ch02.  html"target="content">The Pool of Tears</a></li><li><a href="ch03.html" target="content">A Caucus-Race and a Long Tale</a></li><li><a href="ch04.html" target="content">The Rabbit Sends in a Little Bill</a></li> </ul></div> <div > <a href="#" onclick= "toggleClamShellMenu('menu2')">⇒ Part II</a> <ul > <li><a href="ch05.html"target="content">Advice from a Caterpillar</a></li><li><a href= "ch06.html"target="content">Pig and Pepper</a></li><li><a href="ch07. html"target="content"> A Mad Tea-Party</a></li> </ul></div> <div > <a href="#" onclick="toggleClamShellMenu('menu3')">⇒ Part III</a> <ul > <li><a href="ch08.html"target="content">The Queen's Croquet-Ground</a></li><li><a href="ch09.html"target="content">The Mock Turtle's Story</a></li><li><a href="ch10.html"target="content">The Lobster Quadrille</a></li><li><a href="ch11.html"target="content">Who Stole The Tarts?</a></li><li><a href="ch12.html"target="content">Alice's Evidence</a></li> </ul></div> </body></html>
|
autoClose controls whether the menu automatically collapses when another menu is opened (autoClose=1) or stays open until manually closed (autoClose=0). oldObject stores the address of the last menu opened.
| 2. | function toggleClamShellMenu
(objectID) {…}
Add toggleClamShellMenu() to your JavaScript.
This function uses the objectID variable to locate the menu object. It then sets the display of that object to none if it's already block, or block if it is already none. The effect is that the menu appears and pushes everything after it down.
| | | 3. | #menu1, #menu2, #menu3 {…}
Create a CSS rule for each of your collapsible menus, setting the display property to none (see "Setting How an Element Is Displayed" in Chapter 6). This way, the menus don't appear when the document first loads.
| 4. | toggleClamShellMenu('menu1')
Set up links for each menu that will be used to trigger the function you created in Step 2. The function should be passed the ID for the menu that is to be shown.
| 5. | <ul >…</ul>
Set up a list (<ul>) with an ID and each element in your collapsible menu as a list element (<li>).
|
 Tips
You can use any elements in these menus, including graphics, forms, and lists. The content and design is up to you. In this example, I chose to use a frame to hold the navigation so that the menu would stay in a fixed position while the visitor is scrolling through it and so that the menu wouldn't collapse between pages.
|
