Click here to Skip to main content
12,405,932 members (67,864 online)
Click here to Skip to main content
Add your own
alternative version

Stats

122.1K views
2.5K downloads
35 bookmarked
Posted

Explorer-style Dynamic Menu

, 28 May 2001
Rate this:
Please Sign up or sign in to vote.
How to create explorer-style menus for IE 4.0+ NS6.0+ that degrade well on older browsers.
<!-- Download Links -->

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Cirkadia
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

 
GeneralAbility to drag and drop nodes in hierarchy Pin
Anonymous13-Apr-04 5:35
sussAnonymous13-Apr-04 5:35 
QuestionHOW TO BUILD THE MENU USING DATABASE Pin
Rama Kanth14-Apr-02 22:10
memberRama Kanth14-Apr-02 22:10 
AnswerRe: HOW TO BUILD THE MENU USING DATABASE Pin
shubie12-Jun-02 1:24
membershubie12-Jun-02 1:24 
AnswerRe: HOW TO BUILD THE MENU USING DATABASE Pin
karolin14-Mar-05 3:13
susskarolin14-Mar-05 3:13 
GeneralExplorer-Style Dynamic Menu Pin
alastairw14-Feb-02 5:17
memberalastairw14-Feb-02 5:17 
GeneralRe: Explorer-Style Dynamic Menu Pin
Anonymous14-Feb-02 6:51
memberAnonymous14-Feb-02 6:51 
GeneralDemo Pin
Anonymous28-Jun-01 7:26
memberAnonymous28-Jun-01 7:26 
GeneralRe: Demo Pin
Anonymous11-Apr-02 13:05
memberAnonymous11-Apr-02 13:05 
GeneralScreen Shots PLEASE Pin
Brad Bruce30-May-01 6:40
memberBrad Bruce30-May-01 6:40 
GeneralRe: Screen Shots PLEASE Pin
Anonymous30-May-01 7:03
memberAnonymous30-May-01 7:03 
GeneralRe: Screen Shots PLEASE Pin
webmaster30-May-01 7:44
memberwebmaster30-May-01 7:44 
Generalhttp://www.cirkadia.com/iNavigateNew.html Pin
Daz____23-Oct-02 20:47
sussDaz____23-Oct-02 20:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160721.1 | Last Updated 29 May 2001
Article Copyright 2001 by Cirkadia
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid