Section 15.2. Creating Fancy Menus | Creating Web Sites: The Missing Manual

15.2. Creating Fancy Menus

Rollover buttons are wildly popular on the Web, and it's easy to see why. There's something irresistible about a button that lights up when you're over it. However, you can have too much of a good thing, and stuffing too many rollover buttons into a page is a surefire way to create an overdone turkey of a Web site.

Figure 15-9. Left: The FrontPage button generator lets you choose from a long list of button styles, ranging from metallic rectangles to soft glow tabs. You supply the text and target link.
Right: Use the Image tab to set the button size and background color . Turn on the "Create hover image" checkbox to generate a mouse-over image along with the initial button image, and turn on "Create pressed image" if you want a third image, one that appears when the button is clicked (just before the browser navigates to the new page).

More recently, the Web's seen a small renaissance of simplicity, and a trend away from rollover buttons. This change is caused in part by the increasing complexity of the Webquite simply, a handful of rollover buttons is no longer enough to guide a reader around a typical Web site. Instead, Web sites use more detailed multilevel menus that can swallow up dozens of links.

Note: Fancy buttons and fancy menus play a similar role in taking surfers from one page to another. If you have a relatively small site, you may choose to use buttons exclusively. If you have a large Web site, you're more likely to use a combination of menus and buttons.

A typical menu starts with a collection of anchor tags, organized into logical groups, that are placed together on a page. For example, a company Web site might have a group of product pages, a group of pages with contact and location information, and another group of tech support pages. By arranging links into separate groups, it's much easier for visitors to find what they're looking for.

So far, this menu design doesn't require anything special. Using the linking skills you picked up in Chapter 8, and the layout smarts you gained in Chapter 9, you can easily create a side panel with a grouped list of anchors. But really neat menus add another trickthey're collapsible . That means you don't need to see the whole menu at once. Initially, you see only the group headings. When you click a group, a list of related links pops open just underneath.

There are a variety of ways to create collapsible menus. Some are fairly easy, while others are dizzyingly complicated. In the following sections, you'll learn how to build a simple collapsible menu of your own, and use a more complicated menu system, courtesy of a free JavaScript site.

15.2.1. Do-It-Yourself Collapsible Menus

You can create a respectable menu of your own using the collapsible DHTML tricks described in Chapter 14 (Section 14.3.4). The basic idea is to use JavaScript to hide and show specific HTML elements by changing the CSS display property (Section 14.3.4).

For example, imagine you want to create the cool two-level tabbed menu shown in Figure 15-10. This page splits its links into three separate groups, each of which is represented by a tab. Only one tab shows its sublinks at a time.

This design might seem a little intimidating, but it only consists of two separate parts : the tabs at the top of the page, and the link boxes that appear dynamically underneath them. In order to make these regions easy to deal with, it makes sense to wrap them in <div> and <span> tags, as you've seen throughout this book.

Note: In the rest of this section, you'll get a chance to look at the solution piece by piece. To see the complete page, check out the downloadable content for this chapter, available from the "Missing CD" page at www.missingmanuals.com.

Because the three tabs appear next to each other on the same line, the <span> tag is the easiest choice. (Remember, the <div> tag adds a line break and some space between each element. The <span> tag is an inline element, which means you can fit it inside an existing paragraph and place more than one <span> side by side.)

Here's the HTML you'll start with:

 <span class="Tab">About Me</span> <span class="Tab">My Store</span> <span class="Tab">Really Cool Stuff</span>

These <span> tags have the descriptive class name Tab. That associates them with the following style sheet rule, which gives the tabs the correct font and borders:

 .Tab {       font-weight: bold;   padding: 5px;   border-style: solid;   border-width: 1px;      }      body {       font-family: Veranda, sans-serif;     }

Figure 15-10. Top: When the page first loads, the visitor is presented with three tabs.
Middle and bottom: As the visitor moves the mouse pointer over a tab box, a set of related links appears underneath.

After you declare the <span> tags, it makes sense to add the link groups. Each link group can be represented by a <span> or <div> tag, but a <div> tag makes most sense because the links are placed separately on the page (meaning they aren't inserted into another paragraph). Each <div> tag needs to have a unique ID, because you'll need to use that in your code to show the group of links you want.

Here's the <div> tags for the three link groups:

 <div id="AboutMe" class="Links">          <a href="">My Traumatic Childhood</a>&nbsp;  <a href="">My Education</a>&nbsp;  <a href="">Painful Episodes</a>     </div>     <div id="MyStore" class="Links">          <a href="">Buy Something</a>&nbsp;  <a href="">Request a Refund</a>&nbsp;  <a href="">File a Complaint</a>     </div> <div id="ReallyCoolStuff" class="Links">          Just kidding.     </div>

Even though these <div> tags are stacked one on top of the other, they won't ever appear at the same time. When the page first appears, they're all hidden, thanks to the style rule for the Links class:

 .Links {  display: none;  border-width: 1px;   border-style: solid;   padding: 10px;   background-color: lightyellow;   font-size: x-small;     }

These style sheet rules, <span> tags, and <div> tags create the basic framework for your page. The final step is to create a script that can show one of the hidden <div> tags, depending on which tab your visitor selects.

The code you need is quite similar to what you used with the ToggleVisibility() function demonstrated in Chapter 14 (Section 14.3.4). The difference is that in this case, you're not interested in hiding and showing individual sections. Instead, you want to show a single section (depending on the selected tab) and hide everything else. In this page, that task is handled by a custom function named MakeVisible().

Here's a simplified version of the MakeVisible() function. As you can see, it takes an element name, finds the element, and changes the style settings to make it appear on the page.

 function MakeVisible(element){       // Find the element and unhide it.   var element = document.getElementById(element)   element.style.display = "block"     }

Now you can hook up this function to all of the tab buttons. You have a choice hereyou could react to clicks using the onClick attribute, or to a mouse pointer hovering using the onMouseOver attribute. This example uses the latter approach.

 <span class="Tab"  onMouseOver="MakeVisible('AboutMe')"  >About Me</span>  <span class="Tab"  onMouseOver="MakeVisible('MyStore')"  >My Store</span>  <span class="Tab"  onMouseOver="MakeVisible('ReallyCoolStuff')"  >Really Cool         Stuff</span>

The page still isn't quite right. Although the MakeVisible() function shows the correct tab, it doesn't hide anything. That means that if you pass the mouse pointer over all three tabs, you'll see all three groups of links at the same time, one above the other.

To correct this problem and hide the other tabs, you need to get a little craftier. The problem is that MakeVisible() knows what tab it's supposed to show, but it doesn't know anything about the other tabs. To find these tabs, your code needs to search through the rest of the page. In this example, the basic approach is to look for any <div> tag that has the class name Links, and hide it. You can perform this step at the beginning of the MakeVisible() function, so that everything is hidden. Then, you need the code you saw before to show just the link box you want.

Here's the corrected MakeVisible() function:

 function MakeVisible(tab, element) {       // Get an array with div tags.   var links = document.getElementsByTagName("div")   // Search the array for link boxes, and hide them.    for (var j = 0; j < tabs.length; j++) {          if (links[j].className == 'Links') links[j].style.display = "none"       }   // Find the element and unhide it.   var element = document.getElementById(element)   element.style.display = "block"    }

This code is a little tricky. As with the rollover example earlier in this chapter (Section 15.1.2.1), it uses an array and a for loop. In this case, the array has a list of all the <div> objects on your page. As the code moves through this list, it checks the class name of each <div> tag. If the class name indicates that you've found a link box, the code makes it disappear from the page by changing the display style.

The code in the downloadable example gets slightly fancierit also fiddles with the tab to change the background border color and hide the border for the selected tab. However, the basic approach is still the same.

Note: If the stranger aspects of JavaScript still look like Danish, don't worry. If you're inclined, you can learn about JavaScript programming features like arrays, loops , and if statements from a dedicated book or Web site (see Section 14.2.3.2 in Chapter 14 for some good resources). Or, you can keep your sanity and rely on the examples provided with this book and find great free scripts online.

15.2.2. Third-Party Menus

If you've had enough fun writing your own JavaScript code, you'll be happy to hear that the Web is chock-full of free menu scripts that you can use completely for free. Many of these have more dazzle than the tabbed menu shown in the previous example. Some of the extra features you might find include:

Multilevel menus that let your visitors drill down into specific subcategories .
Pop-up menus that appear "above" your Web page when you click them.
Ridiculously showy effects, like shaded highlighting and transparent backgrounds.

To find a good menu, you can use any of the JavaScript sample sites described in Chapter 14 (see Section 14.4.1). You'll find that there's quite a bit more diversity in menus than in rollover buttons. Every menu looks and behaves a little differently. Some pop up, others slide out, and others try to emulate the look and feel of popular programs like Microsoft Outlook.

To get a glimpse of what's out there, head over to the examples at Dynamic Drive, which has a set of nifty menus at www.dynamicdrive.com/dynamicindex1 and a particularly interesting specimen (called, rather unimaginatively, Top Navigational Bar II) at www.dynamicdrive.com/dynamicindex1/topnavbar.htm. Figure 15-11 shows this menu with the same menu structure that was used in the tabbed menu example from earlier in this chapter.

Tip: Before you choose a navigation bar for your own Web site, you'll want to test drive quite a few. This section walks you through the process, but you'll want to compare the result with other navigation bars before you commit.

In the following sections, you'll download the script code you need for Top Navigation Bar II, and use it to create your menu.

Note: Top Navigational Bar II works in Internet Explorer and Opera, but not Firefox. To get better support, you should definitely check out Top Navigational Bar III (www.dynamicdrive.com/dynamicindex1/topmen3), which provides a similar effect but works in just about every modern browser. (The Web page for the script provides a table with detailed browser compatibility information.)

Figure 15-11. Top Navigational Bar II is a lot like the menus in Windows and Mac programs. When you pop open a menu, it appears on top of existing Web page content.

15.2.2.1. Getting the script

To download Top Navigational Bar II, follow these steps:

Surf to www.dynamicdrive.com/dynamicindex1/topnavbar.htm .

You'll see a page that demonstrates the navigation bar, and provides step-by-step instructions for using it.
In the Step 1 section, copy all the code, and paste it into the <head> section of any Web page .

You can create a new Web page for this purpose, or use a Web page you've already created.
As instructed in the Step 2 section, change the <body> tag in your Web page to <body onload="init()"> .

This tells your code to call the init() method to set up the menu when the page loads.
In Step 3, click to download and open the ZIP file named exfiles.zip . Unzip these files (using any unzip tool you have) into the same folder where you've stored your Web page .

The exfiles.zip file contains three text files that are full of JavaScript code that supports the navigation bar. Fortunately, you never need to look at (or understand) any of this code, unless you're irrationally curious .
Try the page out in your Web browser .

You'll see a sample menu with a series of headings and subheadings . To change this menu into the menu you really want, you need to edit the JavaScript code that you pasted into your Web page (not the ones in the separate script files). As you'll see in the next section, it's pretty easy.

15.2.2.2. Creating the menu

Every JavaScript menu has a slightly different procedure for creating it. Some menus make you define the menu in a separate text file. Other menus, like Top Navigational Bar II, force you to modify the actual JavaScript code to define the links you want.

In the previous section, you pasted the script code into a Web page, and wound up with the sample menu. To customize this menu, you need to open up the Web page, and scroll to the very top of the script.

You'll see this code, which creates the special menu objects:

 <script language="JavaScript"> var myNavBar1 = new NavBar(0); var dhtmlMenu;

Note: The code in this example looks a little different because every statement ends with a semicolon (;). This is a C programming convention that's supported (but optional) in JavaScript. Programming types like it because it clearly indicates where each line ends. We use it in this section because that's the way the Top Navigational Bar II is written.

From this point on, the rest of the code builds up the particular menu structure for your page. The code performs this task one submenu at a time. You can delete the code that's there (to remove the existing menus) or just modify it to create the menu items you really want.

To create a submenu, you begin by creating a new NavBarMenu object, and supplying two numbers . The first number is the width (in pixels) of the top-level menu heading. The second number is the width of the menu that pops up underneath the top-level heading. Here's an example that makes both 150 pixels wide, which is a good size to start with. The longer your text, the wider the space you'll need on your Web page.

 dhtmlMenu = new NavBarMenu(150, 150);

Now, you need to add the top-level heading for this menu item. You do this by calling dhtmlMenu.addItem(), and passing in a new NavBarMenuItem object, like this:

 dhtmlMenu.addItem(new NavBarMenuItem("About Me", ""));

When you create a NavBarMenuItem you supply two details: the menu text ("About Me"), and the link. In the case of a top-level menu item, you don't need the link. Technically, you can make the top-level menu heading clickable, but that behavior confuses just about everyone.

Note: Remember, you don't need to understand how this code works (or why the syntax is the way it is) in order to use it. You simply need to copy the sample code exactly, and replace the menu captions and page links with yours. (You should also test your page with a range of different browsers and on different operating systems.)

You now know just about everything you need to create fancy menus for your site's navigation menu. You simply need to repeat the previous step to create each menu item. Here's how you would add three more menu items, representing the three items in the About Me menu:

 dhtmlMenu.addItem(new NavBarMenuItem("My Childhood", "Child.html"));  dhtmlMenu.addItem(new NavBarMenuItem("My Education", " Education.html "));  dhtmlMenu.addItem(new NavBarMenuItem("Painful Episodes", "Pain.html "));

The only rule you need to keep in mind is that you create the menu items in the same order you want them to appear on the page. The first menu item is always the heading that you'll see at the top.

Finally, when you've completed a submenu, end with this statement, which adds the submenu to the navigation bar:

 myNavBar1.addMenu(dhtmlMenu);

Now you just repeat the whole process to add the next submenu. Here's the complete code that creates the My Store submenu:

 dhtmlMenu = new NavBarMenu(150, 150); dhtmlMenu.addItem(new NavBarMenuItem("My Store", "")); dhtmlMenu.addItem(new NavBarMenuItem("Buy Something", ""));  dhtmlMenu.addItem(new NavBarMenuItem("Request a Refund", "")); dhtmlMenu.addItem(new NavBarMenuItem("File a Complaint", "")); myNavBar1.addMenu(dhtmlMenu);

You can continue this process of defining submenus indefinitely, until you get all the menus you want.