Horizontal Example
List Example
Vertical Example
AddMenu, as implied by its name, can be used to create a menu that will be included in all the published files in the website. The technique allows separating the menu's structure's code, code for the links, and their displayed text greatly reducing the complexity of the menu's code.
The preprocessor uses a menu file which contains the HTML for the menu's structure and all substitutions for the required links and text for the menu. The code creates the menus added the published pages. The file uses two resulting additional marker substitutions that are used only in the included menu files. We will use the file type .htm for these files although any file type can be used. A .css file is used to style the menu.
Note: While it is not required, the menu is normally structured as a table inside a <div> section. (Alternatively, the menu could be formatted as regular text or a list, for example.)
The menu file contains two parts. First there are a list of substitutions. They are followed by the HTML code for structure of the menu. Each menu button is associated with a unique positive integer. The two new markers and coding are as follows. The "#" represents the unique integer for the button. These markers must begin in the first column of the menu file.
#link # HTML link command associated with the button #text # text for button
The HTML code section sets up the structure of the <table> (or what ever structure is desired) for the menu. Each button is established with a <td> (or as desired) element typically having the form
<td>~~~L#L~~~</td>
where # is the unique positive integer for the button. The preprocessor substitutes the associated #link text for "~~~L#L~~~". The text of the link is indicated by ~~~T#T~~~ in the link. The preprocessor substitutes the text in the associated text marker for the ~~~T#T~~~. When <button> tags are used, they can be included in either the #link or #text lines.
For example, suppose that we wanted set up a tabled structured menu. Suppose it has a menu button with a link to the file myFile.html using the text My File. Suppose we arbitrarily decided to associate the button with the posistive integer 200. Further suppose we use the css class "myButton" to format the button. The substitution section of the menu file would contain the lines
#link 200 <a href = "myFile.html"><button class = "myButton">~~~T200T~~~</button></a> #text 200 My File
Alternatively, on could use
#link 200 <a href = "myFile.html">~~~T200T~~~</a> #text 200 <button class = "myButton">My File</button"></a>
The HTML section would contain
<td>~~~L200L~~~</td>
In either case the preprocessor would make the required substitutions when processing the structure section and output line
<td><a href = "myFile.html"><button class = "myButton">My File</button></a></td>
When the link is to a separate file (not containing a local part), the link to itself is omitted on its page helping the reader know what page they are looking at. Only the text is used. In this situation case, the link is unneeded because the reader is already on that page. For example, when processing "myFile.html", the substitution using the first method would simply be
<td>My File</td>
The first method is probably preferred in multipage websites because the text would be colored like regular text in the table instead of using the colors of a button. This makes the button for the current page appear different than the other buttons. (If styling the menu item is desired, apply the style to the table.) See the menu on top of this page and other pages in this website for examples.
The location of a menu is specified with a #menu marker which specifies the unique positive integer for the links in the file as well as the file name. It has the form
#menu # menuFileName.type
where # is the unique positive integer for menu item button for that page. The author uses .htm for the file type but any type will work.
For example, suppose the menu file TheMenu.htm contains several menu buttons including the one developed above, one would use the marker
#menu 200 TheMenu.htm
in myFile.html. If another file in the website used button markers with the number 123, one would use
#menu 123 TheMenu.htm
to set up the menu on that page.
Note: What if there are multiple menu items on the same page? This would typically be the case in an one page website with a menu having local (#) links to different places in that page. Use "0" (zero) instead of the "unique" integer. This will eliminate removing the links in the buttons as all the links would be needed.
To illustrate a menu file, the following is the menu file for this website together with its CSS file. They result in the menu seen on top of this page.
#link 100 <a href="index.html"><button class = "menuButton">~~~T100T~~~</button></a>
#text 100 Introduction
#link 101 <a href="AddMenuUsage.html"><button class = "menuButton">~~~T101T~~~</button></a>
#text 101 Usage
#link 102 <a href="AddMenuFile.html"><button class = "menuButton">~~~T102T~~~</button></a>
#text 102 #file, #html,<br> and #code
#link 103 <a href="AddMenuMenu.html"><button class = "menuButton">~~~T103T~~~</button></a>
#text 103 #Menu
#link 104 <a href="AddMenuDate.html"><button class = "menuButton">~~~T104T~~~</button></a>
#text 104 #date and #time
#link 105 <a href="AddMenuSubs.html"><button class = "menuButton">~~~T105T~~~</button></a>
#text 105 #subs
<div>
<table class = "menuTables">
<tr>
<td>~~~L100L~~~</td>
<td>~~~L101L~~~</td>
<td>~~~L104L~~~</td>
<td>~~~L105L~~~</td>
<td>~~~L102L~~~</td>
<td>~~~L103L~~~</td>
</tr>
</table>
</div>
.
The following .css file was used to format the menu table. If one wanted equal width buttons, they would add something like width: 120px; to the css for the .menuButton item.
.menuTables{margin-left: auto; /* center the menu */
margin-right: auto;
border: 5px solid Blue; /* color of border around menu */
background-color: CornSilk; /* color for button without link
and outside of button */
color: Red; /* color of text of item without a link */
}
.menuButton {text-align: center; /* menu item */
background-color: Khaki; /* color of button */
color: Blue: /* color of button text */
font-weight: bolder;
padding-right: 10px; /* inside button space right */
padding-left: 10px; /* inside button space left*/
height: 50px; /* tall enough for tallest menu text. */
border: 2px solid Red; /*button border*/
cursor: pointer;
}
In this file the marker
#menu 103 AddMenuHorizontal.htm
was used to set the location of the menu because its button uses the unique integer 103. However in the introduction, AddMenu.html, whose number in its menu button is 100, the marker is
#menu 100 AddMenuHorizontal.htm
The following is a very unusual menu structured as an unordered list and each item includes an image. Because <button> tags are not used, users have to click on the link text. Each button contains an image. HTML considers images to be text so they can be included in the text for link. In this case the images are included in the text section so they can be clicked on. However, the words "Example" are not part of the hyperlink text so they cannot be clicked on to activate the link.
This example illustrates an alterate menu because it avoids using the <button> tags The user must click on the text (which includes the images in this case). The colorings are determined by the class specifier in the <li> tags in the structure part of the menu file.
Horizontal Example List Example Vertical ExampleHere are the menu (AddMenuList.htm) and css (AddMenuList.css) files used in this example. Notice the css for classes is used differently.
#link 1 <a href="#menuHori">~~~T1T~~~</a> Example
#text 1 <img src = "ImageHori.png" width = "200" alt = "horizontal menu"> Horizontal
#link 2 <a href="#menuList">~~~T2T~~~</a> Example
#text 2 <img src = "ImageList.png" width = "200" alt = "list menu"> List
#link 3 <a href="#menuVert">~~~T3T~~~</a> Example
#text 3 <img src = "ImageVert.png" width = "200" alt = "vertical menu"> Vertical
<div>
<ul class = "menuList">
<li class = "menuListButton">~~~L1L~~~</li>
<li class = "menuListButton">~~~L2L~~~</li>
<li class = "menuListButton">~~~L3L~~~</li>
</ul>
</div>
.menuListButton {/* menu item */
text-align: left;
background-color: lightgreen; /* color of menu item */
font-weight: bolder;
padding-right: 20px; /* inside button space right */
padding-left: 20px; /* inside button space left*/
border: 1px solid blue; /* color between buttons */
height:60px
}
.menuList {background-color: gray;
width: 400px;
border-collapse: collapse; /* merge table and button borders */
}
Because this menu has several relative links into this file, the marker uses "0" for the not so "unique" positive integer.
#menu 0 AddMenuList.htm
The menu on top of this page is horizontal but menus can also be vertical as shown on the left. Of course, menus are typically at the top of the page. A vertical menu is structured as a table with one column. Because <button> tags are not used, users have to click on the link text.
The item "#menu" is in black, the because it is not a link. This serves as a reminder the reader is already on the specified page.
Here is the menu file. Again notice how the css is used differently than when <button> tags are used.
#link 100 <a href="index.html">~~~T100T~~~</a> #text 100 Introduction #link 101 <a href="AddMenuUsage.html">~~~T101T~~~</a> #text 101 Usage #link 102 <a href="AddMenuFile.html">~~~T102T~~~</a> #text 102 #file, #html,<br>and #code #link 103 <a href="AddMenuMenu.html">~~~T103T~~~</a> #text 103 #menu #link 104 <a href="AddMenuDate.html">~~~T104T~~~</a> #text 104 #date and #time #link 105 <a href="AddMenuSubs.html">~~~T105T~~~</a> #text 105 #subs <div class = "vertMenu"> <table class = "vertMenuTable"> <tr><td class = "vertMenuTd">~~~L100L~~~</td></tr> <tr><td class = "vertMenuTd">~~~L101L~~~</td></tr> <tr><td class = "vertMenuTd">~~~L104L~~~</td></tr> <tr><td class = "vertMenuTd">~~~L105L~~~</td></tr> <tr><td class = "vertMenuTd">~~~L102L~~~</td></tr> <tr><td class = "vertMenuTd">~~~L103L~~~</td></tr> </table> </div>
This is the associated .css file.
.vertMenu {float: left;
height: 530px; /* Optional. Avoids having text wrap menu */
/* value obtained by experimentation */
padding-right: 10px;
background-color: lightgray; /* match page color */
}
.vertMenuTable{
border-collapse: collapse; /* merge table and button borders */
border: 5px solid blue; /* color of border around menu */
}
.vertMenuTd{text-align: center; /* button */
background-color: GoldenRod; /* color of menu item */
font-weight: bolder;
padding-right: 20px; /* inside button space right */
padding-left: 20px; /* inside button space left*/
height: 60px;
border: 2px solid blue /* color between buttons - separator */
}
Revised 12/17/2019 21:49.
Questions, suggestions or comments: James Brink