Sample Menu Page for HMENU3.IH

Hi, this page demonstrates the use of my "HMENU3.IH" header file to simplify the user of the Web Reference's hierarchical menu script.

Simple menu tagging replaces the complex definitions of arrays. Look inside "hmenu3.it" for the source code. This needs to be run through my free ppwizard program to generate the html.

I have included in the sample download the required runtime from the webreference site. Note that I have renamed the code file to "hmenu3_c.js". This should help migration to version 4.

Note that I believe that you should need to make little or no changes to support version 4 when it becomes available from the webreference site unless of course you wish to use the new features. The menus will be defined exactly the same way, my code will simply generate the new format.


Menu pops up relative to mouse position

PopUp Menu (when mouse over)

Of course do not expect the links in the above menu to work as the pages don't exist! Colors etc can be easily customised.


Menu Bar (pops up below link)

Menu Bar Item 1     Menu Bar Item 2

Note that this being a very simplistic example the above menu bar is a poor man's attempt. Formatting via a table is probably better and images for the bar would also look better.

The bar would normally be at the top of a page, the menu will only position correctly if there is room to do so otherwise it will move up as required from it's ideal location.

It is also possible to specify that a click is required to popup the menus rather than a simple mouseover.

Please tell me if you find the popup menus don't appear underneath the text with a width matching that of the menu bar text. I have tested Netscape and IE and the versions I have tested work.


This pages Source Code

The complete source code for this page is shown below:

    ;----------------------------------------------------------------------------
    ;     MODULE NAME:   HMENU3.IT
    ;
    ;     DESCRIPTION:   This is a sample file which demonstrates how the
    ;                    "HMENU3.IH" file can be used.
    ;
    ;                    You can generate the html at any time by (windows):
    ;
    ;                        regina ppwizard hmenu3.it
    ;
    ;----------------------------------------------------------------------------
    
    
    ;--- Load support for Version 3 of WebReferences Hier menus -----------------
    #define   HMENU_WANT_POSN_SUPPORT
    #include "HMENU3.IH"
    
    
    ;--- Start of HTML ----------------------------------------------------------
    #define PageTitle  Sample Menu Page for HMENU3.IH
    <HTML>
    <HEAD>
    <TITLE><$PageTitle></TITLE>
    </HEAD>
    <BODY>
    <CENTER><H1><$PageTitle></H1></CENTER>
    
    ;--- Intro ------------------------------------------------------------------
    <P>Hi, this page demonstrates the use of my "HMENU3.IH" header file to
    simplify the user of the
    <A href="http://www.webreference.com/dhtml/">Web Reference's hierarchical menu script</A>.
    
    <P>Simple menu tagging replaces the complex definitions of arrays.
    Look inside "hmenu3.it" for the source code.
    This needs to be run through my free ppwizard program to generate the html.
    
    <P>I have included in the sample download the required runtime from the
    webreference site.
    Note that I have renamed the code file to "hmenu3_c.js".
    This should help migration to version 4.
    
    <P>Note that I believe that you should need to make little or no changes to
    support version 4 when it becomes available from the webreference site unless
    of course you wish to use the new features. The menus will be defined exactly
    the same way, my code will simply generate the new format.
    
    
    
    ;--- Generate Initialization code -------------------------------------------
    #define HMENU_I_WILL_LOAD_ARRAYS
    <$MenuInit>
    
    
    ;--- Test menu #1 --------------------------------------------------------------
    <HR>
    <center><H2>Menu pops up relative to mouse position</H2></center>
    <P><$HMenu 'elMenu1'>PopUp Menu (when mouse over)<$/HMenu>
    
    <P>Of course do not expect the links in the above menu to work
    as the pages don't exist!
    Colors etc can be easily customised.
    
    ;--- Test menu #2 (not very good example (image does use space here) -----------
    <HR>
    <center><H2>Menu Bar (pops up below link)</H2></center>
    <P style="background-color:yellow">
    <$MenuPos "Marks2"><$HMenu 'elMenu2'>Menu Bar Item 1<$/HMenu><$/MenuPos>
    &nbsp;&nbsp;&nbsp;
    <$MenuPos "Marks3"><$HMenu 'elMenu3'>Menu Bar Item 2<$/HMenu><$/MenuPos>
    
    
    <p>Note that this being a very simplistic example the above menu bar is a
    poor man's attempt. Formatting via a table is probably better and images
    for the bar would also look better.
    
    <p>The bar would normally be at the top of a page, the menu
    will only position correctly if there is room to do so otherwise it will move
    up as required from it's ideal location.
    
    <p>It is also possible to specify that a click is required to popup the
    menus rather than a simple mouseover.
    
    <p>Please tell me if you find the popup menus don't appear underneath the
    text with a width matching that of the menu bar text.
    I have tested Netscape and IE and the versions I have tested work.
    
    
    ;============================================================================
    ;=== Note that menu is loaded below so that we can position menu2
    ;=== relative to the image defined just above
    ;============================================================================
    
    
    ;--- MENU # 1 (to keep example simple, just include inline) -----------------
    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
    <!--
       <$MENUATTR MENUWIDTH="130">
       <$MENU>
           <$ITEM SHOW="Item 1" URL="nosubmenu.htm">
          ;<$ITEM SHOW="<HR>">
           <$ITEM SHOW="Software">
               <$MENU>
                       <$ITEM SHOW="Check Url" URL="checkurl.htm">
                       <$ITEM SHOW="ppwizard">
                       <$MENU>
                               <$ITEM SHOW="ppwizard.1" url="ppw1.htm">
                               <$ITEM SHOW="ppwizard.2" url="ppw2.htm">
                               <$ITEM SHOW="ppwizard.3" url="ppw3.htm">
                       <$/MENU>
               <$/MENU>
    
           <$ITEM SHOW="Other">
               <$MENU>
                       <$ITEM SHOW="Stuff" URL="OtherStuff.htm">
               <$/MENU>
       <$/MENU>
    
       ;--- This menu will be positioned relative to position named "Marks2" ----
       <$MENUATTR LEFTPOSN=^<$MenuLeft "Marks2">^ TOPPOSN=^<$MenuTop "Marks2">+<$MenuHeight "Marks2">^ MENUWIDTH=^<$MenuWidth "Marks2">^>
       <$MENU>
              <$ITEM SHOW="Long Menu 1">
              <$ITEM SHOW="Long Menu 2">
                   <$MENU>
                       <$ITEM SHOW="Child 1">
                           <$MENU>
                               <$ITEM SHOW="Child 2">
                               <$MENU>
                                   <$ITEM SHOW="Child 3">
                                   <$MENU>
                                       <$ITEM SHOW="Child 4">
                                       <$MENU>
                                           <$ITEM SHOW="Child 5">
                                               <$MENU>
                                                   <$ITEM SHOW="Child 6">
                                               <$/MENU>
                                       <$/MENU>
                                   <$/MENU>
                               <$/MENU>
                           <$/MENU>
                   <$/MENU>
              <$ITEM SHOW="Long Menu 3">
       <$/MENU>
    
    
       ;--- This menu will be positioned relative to position named "Marks3" ----
       <$MENUATTR LEFTPOSN=^<$MenuLeft "Marks3">^ TOPPOSN=^<$MenuTop "Marks3">+<$MenuHeight "Marks3">^ MENUWIDTH=^<$MenuWidth "Marks3">^>
       <$MENU>
              <$ITEM SHOW="Menu3 1">
              <$ITEM SHOW="Menu3 2">
              <$ITEM SHOW="Menu3 3">
       <$/MENU>
    
    //-->
    </SCRIPT>
    
    ;--- If user has downloaded the header then show the source code ------------
    #if    FindFile("HTMLPRE.IH") <> ''
           ;--- Header available ------------------------------------------------
           <P><HR COLOR="red" size="1">
           <CENTER><H1>This pages Source Code</H1></CENTER>
           <P>The complete source code for this page is shown below:
           #include "HTMLPRE.IH"               ;;Load "smart" PRE support (takes care of unsafe chars etc)
           <$ExampleFile FILE="HMENU3.IT" STATE="REMEMBER">
    #endif
    
    
    ;--- End of HTML ------------------------------------------------------------
    </BODY>
    </HTML>