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. Also note that it could just as easily pop up as the result of a right click (context menu).


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.
    Also note that it could just as easily pop up as the result of a
    right click (context menu).
    
    ;--- Test menu #2 -----------------------------------------------------------
    <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 location 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
    
    
    ;--- Load standard "where do ya get it?" ------------------------------------
    #if    FindFile("ppwaddon.ih") <> ''
           ;--- This file won't be around on YOUR machine! ----------------------
           #define  PPWADDON_PAGE   HMENU3.IH
           #include "ppwaddon.ih"
    #endif
    
    ;--- End of HTML ------------------------------------------------------------
    </BODY>
    </HTML>
    
    

Where can PPWIZARD & It's Headers be found?

In case you got here via a search engine or a link from another site you can download the header file used in this sample page ("HMENU3.IH") and ppwizard itself (my free html preprocessor) from the ppwizard download page at:

PPWIZARD can be thought of as a "Super SSI", it can include external files and do most of the things that server side includes can (and heaps more) but do them in a simpler manner and have no impact or requirements on the server.

PPWIZARD is the most powerful mechanism available for code reuse and automation of common tasks. See the PPWIZARD pages for more details.


Tuesday December 12 2000 at 7:38pm