• Choose a category
• All
• Classic-Fiction

By Root 1149 0

requests become more elaborate), the navigation structure can grow unwieldy and become potentially confusing to our users. A well-crafted menu allows us to categorize our content structure while minimizing the valuable screen space it consumes.

Expandable/Collapsible Menus

A common feature of vertical site navigation is a submenu system, where links are grouped into similar categories. This makes it easy for the user to find relevant information and, by allowing the top-level categories to be expanded and collapsed, lets us store a large amount of information in a relatively small area. It also looks cool when menus slide open and close shut. A simple and effective expandable menu is very easy to set up; in fact, we learned most of the code required for a menu way back in Chapter 2. We’ll start by creating a simple menu, and then add a few extra features to it. Our initial menu will look like the one in Figure 5.1.

Figure 5.1. Expandable menus

These days (and until the HTML 5 navigation tag becomes standard) almost all navigational controls are created using unordered lists. From a semantic standpoint this is perfectly sensible, after all, a navigation menu is just a list of links. For our expandable menu, we’ll start off with a set of nested lists:

chapter_05/01_expandable_menus/index.html (excerpt)

• What's new?

  • Weekly specials
  • Last night's pics!
  • Users' comments

• Member extras

  • Premium Celebrities
  • 24-hour Surveillance

  …

  
  Now let’s give it a few basic styles so that we’re working with a nicer-looking menu:

  chapter_05/01_expandable_menus/menus.css (excerpt)

  #menu, #menu ul {

  list-style-type: none;

  padding: 0;

  margin: 0;

  }

  #menu li {

  cursor: pointer;

  background: #94C5EB;

  border-bottom: 1px solid #444;

  }

  #menu li a { text-decoration: none; }

  #menu > li > a {

  padding: 2px 10px;

  font-weight: bold;

  }

  #menu li li {

  cursor: auto;

  border: 0;

  padding: 0 14px;

  background-color: #fff;

  }

  
  We’re using a CSS child selector to style the top-level links differently from the nested ones. This is supported in all modern browsers, but if you require support for Internet Explorer 6, you can simply add a class to your markup and base your styles on that.

  Since we’ll be reacting to a click event anywhere on the top-level list items (including areas not covered by the anchors), we set a pointer cursor on those elements so that users can easily tell that they’re clickable.

  As it stands, we have a nice, multilevel menu. All the items are visible, which is a fine behavior for browsers without JavaScript capabilities. Now we can progressively enhance this behavior. First, we hide all of the categories’ items:

  chapter_05/01_expandable_menus/script.js (excerpt)

  $('#menu > li > ul')

  .hide()

  .click(function(e) {

  e.stopPropagation();

  });

  
  We’re using the child selector to ensure we avoid accidentally hiding elements that are nested further down the menu structure. This way, if you decide to nest your menu more than one level deep, your code will still function as intended.

  You may be wondering about the strange e.stopPropagation() line in this block. We’ll cover that shortly, but first let’s finalize our effect with a toggle function to slide the menu up and down:

  chapter_05/01_expandable_menus/script.js (excerpt)

  $('#menu > li').toggle(function() {

  $(this).find('ul').slideDown();

  }, function() {

  $(this).find('ul').slideUp();

  });

  
  Run this in your browser and you’ll see that we’ve created a perfectly functional multilevel menu. Before we move on to enhancing it with some additional niceties, let’s have a look at what that stopPropagation function is doing.

  Event Propagation

  Event propagation describes the flow of an event through the DOM hierarchy. When an event is fired from an element, any handlers on that element will be given a chance to catch the event. After this processing