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.
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 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.
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>
<$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>