WeetHet - Internet - Website navigation - Some insights and solutions

Your IP address:

18.97.9.168

Print this page
- use Landscape

Search the
WeetHet Pages

WeetHet is being updated! - Current articles will slowly move to www.tweaking4all.com
For excellent webhosting that is reliable and affordable, we highly recommend: LiquidWeb

On this page ...

On this page I'll present the navigation solution PopupMenuApplet by David Binard.

An excellent alternative, although not free, is apPopupMenu by ApyCom.

There are others out there, but unfortunally WAY to expensive for a private website. As soon as I get the popup menu of them sponsored, I will consider writing about it ...

How to use PopupMenuApplet

On my old webpage and on the current version of WeetHet, one could/will find this in the upper left corner;

A sample of the menu I used on my old website ...

What do we need for the menu ?

1. PopupMenuApplet.class
2. PopupGen.exe

The file PopupMenuApplet.class is needed for getting a menu anyway. Copy the (unzipped) file to the same directory where the HTML-file will be located. The JAVA class is written by David Binard, visit his webpage for more info and/or an the latest version.

PopupGen.exe will be used to generate the menu code.

Let us start by choosing an image for accessing the menu.
Below you will see the button I used on this webpage you're looking at (if you can't find it, some one ripped this text illegally ... please visit my website):

The dimensions of this image are: width=114 and height=24.

As an alternative we could make a simple square button...

Let's assume we named this image "button_menu.gif".

Now we can add the first pieces of code the HTML-page we wnat to create. First locate where you would like to have the button. At that location we will add the code.

Note: width and height are the width and height of the button-image we will be using.

Your basic applet code;

Here we tell the browser that we want a JAVA klasse (class) "PopupMenuApplet.class" to be used at this location. The codebase (".") indicates that the class-file will be located in the same directory as where the HTML-file is located.

The applet must be given a name, "PopupMenuApplet2" in this example.

Finally we must indicate the size of the applet by entering the width and height values of the button-image.

Next step will be to tell the JAVA applet where to find what image and how the menu should look like. First we add the image information:

Here we tell the JAVA applet, that it's "IMG" parametr (PARAM) should have the value (VALUE) "button_menu.gif".

Note: These parameters are JAVA Applet specific !!

Now the hard part: the menustructure.

To make sure the applet is universal, a specific data-structure was created. Let's call these the "data-parameters".

Don't get scared now (I created a little tool for this, so don't worry):

You understand ? No ? No problem, I have trouble reading this too...

This data represents a rather simple menu (sorry for the Dutch text, but hey, it's just an example):

Welkom

Internet	>>	Introductie
Navigatie Help
		HTML
Over deze webpagina	>>	Updates
		Statistieken
		Software en de Auteur

*the submenus have a differnt color, so it won't be to hard to keep them apart. The final menu will NOT have these colors!

A program to create these structures can be downloaded here.

What else do we need ?

We tell the browser where the applet ends by using the </APPLET> tag.

Here you'll see the entire code for a simple page using the previous examples (the blue marked text is the menu-code):

<HTML>
<HEAD>
<TITLE>PopupMenu test page</TITLE>
</HEAD>
<BODY>

</APPLET>
</BODY>
</HTML>

How to use the PopupGen application ?

Note: this application will NEVER win any beauty contest. I wrote this little piece of software because I didn't want to spend to much time on building and maintaining the menu structure for my webpage.

If you did not came here via the "Navigation Solution": please read the rest of the article, starting here. Below you will find a little tool to convert such a project to a HTML table.

Let's start by downloading the program-file and extracting the zip-file (for example using Winzip).
The zip-file contains just one file: PopupGen.exe.

Double click the icon to start the application:

Main window ...

Note: For those of you working with a monitor displaying 800x600 or less: you will not be able to see the full window, since the size of this window is 818x607, go and buy a new monitor !

Some "words" before we start:

Name	Purpose/Meaning
Add Node	adds a menu-item on the same level as the selected menu-item
Add Subnode	adds a submenu-item to the selected menu-item
Seperator	adds a horizontal line to the menu, for seperating subjects
Menu label	this will be the text displayed in the menu
Menu URL	is the link that should appear when selecting this menu-item
URL target	is (for example) used with frames, you can leave this empty if you don't need it
Edit Node	copies the information of the selected menu-item so you can alter them
Apply	after using "Edit Node" and altering the text, you can use this button to apply the changes
Delete Node	remove the selected menu-item
Save Project	save the menu-structure for later use, this will be usefull for maintenance
Load Project	open a previously saved menu structure
Generate	generate teh needed JAVA PARAM code
Expand All	all submenu-items will be made visible
Collapse All	all submenu-items will be hidden
Exit	guess what,... quit the application

Note: DO NOT USE QUOTES in a menu title !

The application starts with an empty menu. If you would have saved a previous project, then you could load it right now using "Load Project".

Since we haven't done this yet, we will start building our example menu now. We will be using the sample menu seen before (don't mind the dutch text, it's just an example anyway).

Let us start with the menu-items in the main-menu.

1. Enter at the "Menu label" field: "Welkom" (without the quotes!)
2. At the "Menu URL" fied: "welcome.htm"
3. Since I'm using frames here and the target frame is called "text", we enter the value "text" at thej "URL target"-field.
4. Click "Add Node".

Note: Step 3 can be skipped if you're not using frames!

We will see:

Our first menu item

It will be easy to identify the values you just entered, seperated by asterisks ("*").

Repeat these steps for the other items, using these values:

Menu Label	Menu URL	URL Target
Internet	internet.htm	text
Navigatie Help	navigationhelp.htm	text
Over deze webpagina ...	about.htm	text

Resulting in to this window:

Now with some items added

We still miss the seperator lines. We need 2 of them: click the "Seperator" button twice.
Two lines will appear now,... unfortunally at the wrong location:

Seperators added on the wrong place ...

Using the mouse we can move the lines to a different location, by dropping them on the menu-item that should be after the sepeartor line. Click the item you want to move using the left mouse button and keep that button pressed. Now move the mouse to the desired menu-item and release the mouse button.

Now also move the second seperator.

Seperators after moving them

Now we have completed the main-menu, let's start creating the submenu.
Select the menu-item that needs submenu-items.

1. at the field "Menu label" enter "Introductie"
2. at the "Menu URL" field, enter "internet.htm"
3. Once again, enter "text" at the "URL target" since I'm using frames. You can leave this field empty if you're not using frames.
4. Click "Add SubNode".

Note: Step 3 can be skipped if you're not using frames!

Our first submenu item!

For the next submenu-item you can now use two different approaches.
1. You select the new submenu-item and start adding items on that same level using "Add Node"
2. You keep the mainmenu-item selected and add submenu-items using "Add SubNode".

It's up to you what you prefer.

Note: adding a seperator line can only be done on the same level as the selected item.

Once you're done creating the entire menu, you can use "Save Project", so you can edit the menu later.

Use a meaningfull name when saving the project, for example: menu_project.txt.

A project file is saved in plain ASCII text. You will be able to edit this using a wordprocessor or Notepad.

For each depth level a TAB is placed in frotn of a menu-item. The mainmenu (rootlevel) is considered level zero, therefor no tabs are placed in frotn of these items. A submenu of the mainmenu is considered level one, therefor one TAB is placed in front of this item. A submenu of a submenu is considered level two, so 2 TAB's in frotn of these items.

Let's create the JAVA PARAM code now by clicking the "Generate" button.

Once more, use a sensible name here, for example: menu_code.txt.

Note: This code is also stored in plain ASCII text.

Adding the parameter code to your HTML-code is pretty easy and straight forward.
Open the generated code using notepad.

Select all lines and cop them to the clipboard (either by using CTRL+C or the menu "Edit"-"Copy").
Open now (using notepad or your HTML-editor) the HTML-file and locate the position of the applet-data.

In this example I did paste the generated code (marked blue) here:

<HTML>
<HEAD>
<TITLE>PopupMenu test page</TITLE>
</HEAD>
<BODY>

</APPLET>
</BODY>
</HTML>

Save the HTML-file, and you're done....

Generating a table based on the menu

Additionally I wrote a small application to convert a project file to an HTML file, which you can download here (sources). This is done to keep the website accessable for those that do not have the popup-menu.

This program works pretty straight forward.

First you need to have a project file generated with POPUPGEN.EXE (as shown above).

Next you need to have an HTML file with a tag to indicate where to inject the table. The tag should be: 

Generate a FLAT menu ...

Step 1, click the "Load Project" button and select your project file.

Step 2, click the "Load HTML" button and select the HTML file with the  tag.

Step 3, click the "Create HTML" button so the project file will be placed as a table in the HTML file.

Step 4, click the "Save HTML" button to save the HTML file (you can choose name and location of the file).