Netscape DevEdge

Skip to: [content] [navigation]

Netscape DevEdge Redesign: JavaScript

Introduction

The initial launch of DevEdge (http://devedge.netscape.com/) as a separate site from the DevEdge Archive (http://developer.netscape.com/) in August 2002 maintained a great degree of compatibility with legacy browsers such as Netscape Communicator 4.x and Internet Explorer 4.x. This backward compatibilty however limited the nature of the site's design and prevented the use of more advanced features.

One of the goals of the Netscape DevEdge Redesign was to illustrate how the W3C web standards can benefit web developers. Backward compatibility with older browsers was not a goal and has opened the door to adding some interesting features which illustrate the possibilities of advanced CSS and JavaScript.

One of the more popular uses of Dynamic HTML is to provide a rich navigation interface for web sites through the use of menus. Many different implementations of Dynamic HTML menus are available.

Typical menus implemented using Dynamic HTML have fairly large footprints, require visitors to enable JavaScript, are constructed on the fly, are not accessible and are difficult for average web authors to implement and maintain. For these as well as other reasons, many sites do not offer a rich navigation interface to their visitors.

We decided that using standards to implement a re-usable, maintainable and accessible menu for DevEdge would help educate web developers about the benefits of standards-based web development.

Pure CSS Menus

During 2002 Eric A. Meyer, Mark Newhouse and others began investigating the use of unordered lists and CSS to provide navigational help on web sites. This lead to the idea of implemented menus using only CSS 2 without the need for cross-browser JavaScript. This was possible for the first time due to the level of support achieved for the necessary features of CSS 2 in Netscape Gecko-based™ browsers such as Mozilla 1.0 and Netscape 7.x.

The possibility of providing the rich experience of Dynamic HTML without having to worry about cross-browser JavaScript issues with the added advantages of easy maintainance and increased accessibility were compelling reasons to investigate the use of pure CSS menus on DevEdge.

Example 1 - Pure CSS Menu

This example uses an unordered list containing the choices for a simple one-level pull down menu. CSS rules are applied to the unordered list through the use of the class name nde-menu-system and submenus are identified via the use of the class name submenu.

Click to view Example 1 

<ul class="nde-menu-system">
  <li><a href="#">Link</a></li>
  <li class="submenu">
    <a href="#">Submenu</a>
    <ul>
      <li><a href="#">Subitem 1</a></li>
      <li><a href="#">Subitem 2</a></li>
    </ul>
  </li>
</ul>

The basic layout and functionality of the menu are achieved through CSS rules which display the top-level list items inline, while attaching different CSS rules to submenus through the use of CSS 2 :hover rules which are responsible for opening and closing the submenus. Other CSS rules serve the role of smoothing out the differences in the implementation of the CSS 2 specification between Netscape Gecko, Opera and Internet Explorer.

Browser Comparison

Netscape Gecko-based browsers such as Netscape 7.x and Mozilla on all platforms as well as Opera 7 on Windows display the top-level items inline and open and close the submenu when the mouse hovers over the top-level Submenu item.

Note that Netscape 7.x requires the top be set in the ul.nde-menu-system li ul css rule in order to position the submenus properly. You may need to adjust this value if you reuse this example on your own site. Note also the difference in appearance between Netscape Gecko-based browsers and Opera 7.

Netscape 6.x on all platforms and Internet Explorer 5.5+ on Windows can display the top-level items inline however due to their lack of support for :hover on arbitrary elements they can not display the submenu.

Pure CSS menus have some compelling advantages:

Pure CSS menus also have disadvantages:

Hybrid CSS-JavaScript Menus

While the promise of pure CSS menus was compelling, the actual behavior of the browsers which visit DevEdge would mean that many of our visitors would not receive a positive experience if we relied solely on CSS to implement our menus.

A compromise approach was reached where we would provide a pure CSS menu which could be used by any CSS 2 capable browser without JavaScript enabled but would use JavaScript to emulate the CSS 2 features which were lacking in Internet Explorer and other browsers. At the same time, JavaScript could be used to smooth over implementation differences between CSS 2 compliant browsers.

The main features of CSS which needed to be emulated in JavaScript are:

Selectors

Selectors in CSS determine to which elements specific CSS rules are applied. JavaScript and the W3C DOM Core API can be easily used to walk the unordered list and to apply specific style rules using the W3C DOM Style APi.

:hover on arbitrary elements

:hover CSS rules can be emulated through the use of mouseover and mouseout event handlers implemented in JavaScript attached to the appropriate elements. These event handlers can use the W3C DOM Core, DOM Style APIs to manipulate the appearance and structure of a document to reproduce the same behavior as accomplished through pure CSS.

Example 2 - Hybrid CSS-JS Menu

Click to open Example 2 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                      "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="cssjsmenudhtml.css">
<link rel="stylesheet" type="text/css" href="cssjsmenuhover.css" id="hoverJS">
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript" src="cssjsmenu.js"></script>
<script type="text/javascript">
  <!--
  function init()
  {
    cssjsmenu('navbar');
    if (document.getElementById)
    {
      var kill = document.getElementById('hoverJS'); 
      kill.disabled = true;
    }
  }
  // -->
</script>
</head>
<body onload="init()">

  <h1>Example 2 - Hybrid CSS-JS Menu</h1>
  <div id="navbar">
    <ul class="nde-menu-system">
      <li><a href="#">Link</a></li>
      <li class="submenu">
        <a href="#">Submenu</a>
        <ul>
          <li><a href="#">Subitem 1</a></li>
          <li><a href="#">Subitem 2</a></li>
        </ul>
      </li>
    </ul>
  </div>

</body>
</html>

This example extends Example 1 by

Browser Comparison

Note that the Hybrid CSS-JS Menu is supported by Netscape Gecko-based browsers Netscape 6.x, Netscape 7.x and Mozilla 0.9.4+ (All platforms), Opera 7 (Windows) and Internet Explorer 5.5+ (Windows).

Example 3 - Hybrid CSS-JS Menu with Style

Click to open Example 3 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                      "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="cssjsmenudhtml.css">
<link rel="stylesheet" type="text/css" href="cssjsmenuhover.css" id="hoverJS">
<link rel="stylesheet" type="text/css" href="cssjsmenustyle.css"">
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript" src="cssjsmenu.js"></script>
<script type="text/javascript">
  <!--
  function init()
  {
    cssjsmenu('navbar');
    if (document.getElementById)
    {
      var kill = document.getElementById('hoverJS'); 
      kill.disabled = true;
    }
  }
  // -->
</script>
</head>
<body onload="init()">

  <h1>Example 3 - Hybrid CSS-JS Menu with Style</h1>
  <div id="navbar">
    <ul class="nde-menu-system">
      <li><a href="#">Link</a></li>
      <li class="submenu">
        <a href="#">Submenu</a>
        <ul>
          <li><a href="#">Subitem 1</a></li>
          <li><a href="#">Subitem 2</a></li>
        </ul>
      </li>
    </ul>
  </div>

</body>
</html>

This example extends Example 2 by adding another stylesheet, cssjsmenustyle.css to customize the appearance of the menu and menu items.

How the Hybrid CSS-JS Menu is used on DevEdge

DevEdge uses the Hybrid CSS-JS Menu to implement both the pull-down menu found at the top of every page and the customize menu which allows visitors to select their favorite themes.

Conclusion

Hybrid CSS-JS menus provide a light-weight, accessible, easily maintained method of adding simple pull-down menus to your site. Please feel free to reuse these menus on your own site.

There are many different approaches to providing modern browsers with dynamic menus. For additional study, I recommend BrainJar.com's Menu Bar and gazingus.org's Using Lists for DHTML menus.

Download Examples

devedge-redesign-js.zip (7K)

A–+R