Explorer-style Dynamic Menu

• Download source files - 26 Kb

The Preamble

We designed and developed iNavigate for our own website navigation. We wanted a dynamic approach that would maintain our search engine compatibility and degrade well on older browsers. Over the last year we had a great fun with our menus and this month (May 2001) we've fully added NS 6.0 dynamic support.

This article aims to provide you with an overview of iNavigate (along with the fully functional code sample which you can download from the above link) and show you the steps you need to take to add the Explorer-Style menu to your website or application.

What's browsers are supported?

The iNavigate dynamic menus are switched on for:

• Internet Explorer 4.0+
• Internet Explorer 6.0 beta
• Netscape 6.0+
• Mozilla 0.9 & other Gecko-powered browsers

For older and other browsers, the muliple pre 6.0 NS versions, Opera etc the menu structure is displayed in it's open state.

How do the explorer-style menus work?

The Explorer-Style menus are opened or closed dynamically by setting the CSS Display Attribute.

The components of the menu structure are identified using common ID Attributes, then manipulated and bound to event handlers in JavaScript code. This approach allows for graceful degradation on other or older browsers whilst bringing the menus to life on supported browsers.

The state of the menu structures between pages is persisted using Custom Attributes and Session Cookies.

The JavaScript code looks for a link to the current page in the menu structure, manipulating the HTML dynamically to convert the link to text and add highlight. The JavaScript code also make sure the menu containing the current page is open, so that if session cookies are switched off the visitor's position is still shown.

The vertical line is tiled onto a table background, the excess vertical tail being covered with a single pixel graphic stretched and relative positioned.

What's the advantage of this approach?

• Single HTML Source Code - the menu HTML is the same on every page, iNavigate finds the menu item matching the current page and highlights it automatically.
  
  
• State Persistence - menus stay open or closed as you navigate through the site, iNavigate uses session Cookies to stores the states and automatically restore them on the next page.
  
  
• Graceful degradation - iNavigate menus start life as real HTML, so the menus always render in their open state so other and older browsers (including Netscape 4.x and Opera) or if JavaScript is disabled. Where many other menu systems are either non-functional or even completely blank.
  
  
• Server Application Compatibility - backend server applications typically use a particular URL and query string structure for routing and communication. iNavigate gives you complete flexibility to identify the corresponding menu item using strings or regular expressions.
  
  
• Sub Page Support - if you have sub-pages below a page on the menu structure you can still get iNavigate to identify and highlight the parent page on the menu. The beauty of this is you don't need to include every single page on the menu structures!
  
  
• Menu Group Support - you can have several instances of the menu structure on your site, say in different tabbed areas like we have on our website.
  
  
• Multiple Entry Points - visitors can enter your website on any page and iNavigate will display the correct menu item. Great for bookmarked pages, external links and search engines!
  
  
• Search Engine Compatible - because the menu structures start life as real HTML, search engines can see the links in the menu items. The generated links created by JavaScript based systems are just not there for the search engines.
  
  
• No Frames Dependency - the real HTML approach also means that you are not limited to using frames as with server side components and most JavaScript based solutions.
  
  
• Automatic Text Font/Size Adjustment - the design of iNavigate automatically allows for text font and size alteration, keeping graphics correctly aligned.
  
  
• 100% Client-Side Processing - requires no Component or Plug-in downloads or any server interaction other than the regular http page download.

How do I add the explorer-style menus to my website?

There are 5 easy steps to tailoring iNavigate menus to fit into your html pages:

• Add the iNavigate classes from the iNavigate.css file to your own style sheet - here you can change the color, font size to match your website.

  .iNavigateSpanLevel1
  {
      COLOR: #003366; 
      FONT-WEIGHT: bold
  }
  
  .iNavigateSpanLevel1 A:link
  {
      COLOR: #003366
  }
  
  .iNavigateSpanLevel1 A:visited
  {
      COLOR: #003366
  }
  
  .iNavigateSpanLevel1 A:hover
  {
      COLOR: #800000;
      TEXT-DECORATION: underline
  }
  
  .iNavigateSpanLevel2
  {
      COLOR: #003366;
      DISPLAY: block
  }
  
  .iNavigateSpanLevel2 A:link
  {
      COLOR: #003366
  }
  
  .iNavigateSpanLevel2 A:visited
  {
      COLOR: #003366
  }
  
  .iNavigateSpanLevel2 A:hover
  {
      COLOR: #800000;
      TEXT-DECORATION: underline
  }
  
  .iNavigateCurrentPage
  {
      COLOR: #800000;
      FONT-STYLE: normal
  }
  
  .iNavigateVLineTailCover
  {
      POSITION: relative; 
      LEFT: 14px; 
      TOP: -6px
  }

• add a calls to:
  

  iNavigate_BeforeLoad() which analyses menu structures to set and restore menu states. This needs to be called after document structure has been parsed, but before Load is complete ie in JavaScript after the menu HTML
  

  iNavigate_AfterLoad() which analyses Menu structures to set and restore menu states. This needs to be called after the document Load is complete, ie in the onLoad event of the BODY tag.
  

• construct your own menu structure and copy it into each page - here you add your menu items and what HTML pages they link to:

  NOTE: Use sample code downloaded, as the alignment used here will disrupt menu operation on some browsers.
  
  <body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" onLoad="iNavigate_AfterLoad()">
  
  <table border="0" cellpadding="0" cellspacing="0" ">
      
      <tr>
  
      <td width="10"><img src="iNavigate/graphics/blank.gif" width="7" height="1"></td>
  
      <td valign="top" >
      <!------------------------ iNavigate MENU START -------->
      <script language="JavaScript1.2" src="iNavigate/jscript/iNavigate.js"></script>
      
      <!------------------------ iNavigate MENU CONFIG ------->
      
  
      <!------------------------ iNavigate LEVEL 2 Only --->
      <span id="iNavigateSpanLevel1" class="iNavigateSpanLevel1">
      <img src="iNavigate/graphics/blank.gif" width="9" height="9" border="0">
      <img src="iNavigate/graphics/squareblank.gif" width="16" height="15"><nobr>iNavigate</nobr><br>
      
      <span id="iNavigateSpanLevel2" class="iNavigateSpanLevel2">
      <table border="0" cellpadding="0" cellspacing="0" background="iNavigate/graphics/vline.gif">
          <tr><td>
          <img src="iNavigate/graphics/blank.gif" width="9" height="9" border="0">
          <img src="iNavigate/graphics/hline.gif" width="16" height="5">
          <a id="iNavigateItemLevel2" href="features.htm"><nobr>Features</nobr></a><br>
          <img src="iNavigate/graphics/blank.gif" width="9" height="9" border="0">
          <img src="iNavigate/graphics/hline.gif" width="16" height="5">
          <a id="iNavigateItemLevel2" href="technology.htm"><nobr>Technology</nobr></a><br>
          </td></tr>
      </table>
      <span class="iNavigateVLineTailCover"><img src="iNavigate/graphics/menupixel.gif" height="6" width="1" border="0"></span><br>
      </span>
      </span>
  
      <!------------------------ iNavigate LEVEL 1 Only --->
      <span id="iNavigateSpanLevel1" class="iNavigateSpanLevel1">
  
      <img src="iNavigate/graphics/blank.gif" width="9" height="9" border="0">
      <img src="iNavigate/graphics/squareblank.gif" width="16" height="15">
      <a id="iNavigateItemLevel1" href="license.htm"><nobr>License</nobr></a><br>
      </span>
      
      
      <!------------------------ iNavigate MENU ACTIVATION --->
      <script language="JavaScript1.2">iNavigate_BeforeLoad();</script>
  
      <!------------------------ iNavigate MENU END ---------->
      </td>
  
      <td width="10"><img src="iNavigate/graphics/blank.gif" width="7" height="1"></td>
      <td width="1" bgcolor="#808080"><img src="iNavigate/graphics/blank.gif" width="1" height="1"></td>
      <td width="10"><img src="iNavigate/graphics/blank.gif" width="7" height="1"></td>
  
      <td valign="top" width="650">
  
      <!------------------------ CONTENT START --------------->
      Your content here...
  
      <!------------------------ CONTENT END ----------------->
      </td>
  
      <td width="10"><img src="iNavigate/graphics/blank.gif" width="7" height="1"></td>
      <td width="1" bgcolor="#808080"><img src="iNavigate/graphics/blank.gif" width="1" height="1"></td>
      </tr>
  </table>
  
  </body>
  </html>

• if your home page is anything other than 'index.htm', use iNavigate_SetHomePage (in the menu configuration section) to tell iNavigate its filename so it can be recognized when the url is just your domain name, for example:

  <script language= "JavaScript1.2">iNavigate_SetHomePage('Home.html');</script>

• if your site does not have a white background, you will need to edit 2 graphics to match your background: vline.gif and menupixel.gif. Note that vline.gif is not supplied with a transparent background because of buggy rendering of transparent backgrounds on Netscape 4.x.

That's it for a basic site.

Customization

For more fine control take a look at the Customizing section in your downloaded sample.