FRAMES Friendly XML/CSS jsMENUlib.js by Dr. Clue [] www.drclue.net

Example

The links below activate some test menus, so that you can see how they tick. You might notice that some of the menupads contain pictures , but in addition you can put just about any HTML content you like in the menu labels, and the containing menu panel will automaticly size to fit the contents.

jsMENUlib.js 2005 [] The evolution ( Project Notes )

The 2005 evolution of jsMenu.js into jsMENUlib.js seeks to make the jump to an xbrowser CSS / XML driven format , bringing the underlying technology as current with w3c reccomendations as the browsers will allow.

The new menu system leverages my time tested xbrowser jsDHTMLlib.js library allowing for simutanious support of IE,Firefox,NS,Opera and most other browsers accross all my projects. Based on object sniffing it is largely immune to browser brands and versions. It's also a big bandwidth saver as it only needs to be cached once to support a wide range of applications.

Non-XML browsers, will be tricked into supporting a faux XML object produced by a serverside tool that simply remaps any desired XML file into a javascript syntax delivered via a simple <script> tag.

When loaded by the XML challenged browser this script will create a simulated XML object that will fool the XML/DHTML code into seeing an XML object in older browsers.

Installation

Create a directory somewhere to hold the library files. Since these files can be used for many different applications , they probably should have their own home.

jsDHTMLlib.js

Browser normalizing DHTML library, which I wrote myself and have been using for years. This library allows the differences in browser brands/models to be handled in one location, insulating DHTML applications from the gymnastics used to keep the browsers in tow.

jsXMLlib.js

XML normalizations and utilities. The XML library is somewhat newer, but it aims to do for XML what the jsDHTMLlib does for DHTML, in that browser accomidations are isolated to a single library.

jsMENUlib.js

Menu application code.
Create a directory to hold your jsMENUlib.xml file.

Create a jsMENUlib.xml file, and populate it with your menu selections. The example shown below demonstrates a menu with three items in the main menu and two items in a sub menu. The first menu contains two references to html files and one reference to the sub-menu. the sub-menu contains two references to html files


<?xml version="1.0" encoding="ISO-8859-1"?>
<menus>
	<menu name="MNUmainmenu">
		<pad action="index.html">
			<label>Home Page</label>
		</pad>
		<pad action="about.html">
			<label>About </label>
		</pad>
		<pad action="@MNUsubmenu">
			<label>Bookmarks"</label>
		</pad>
	</menu>
	<menu name="MNUsubmenu">
		<pad action="http://www.drclue.net/">
			<label>Dr. Clue's web-site</label>
		</pad>
		<pad action="http://www.altavista.com">
			<label>Altavista Search engine</label>
		</pad>
	</menu>
</menus>

Create a directory to hold the jsMENUlib.css file.

/*	File		:	jsMENUlib.css
**	Author		:	Dr. Clue	( A.K.A. Ian A. Storms )
**	Description	:	This is where you control the general appearance of
**			the menus, and their menupads.
*/

/* The normal display appearance of the menu panel as opposed to the menu pads */
.jsMenuPanel	{
		background-color	:green		;
		border-top		:1px solid black;
		border-bottom		:1px solid black;
		border-right		:1px solid black;
		border-left		:1px solid black;
		padding			:2px		;
		}
/* The normal display appearance of an un-highlighted menu pad */
.jsMenupadLO	{
		padding:2px;
		font-size		:12pt		;
		color			:#ffffcc	;
		background-color	:#999966	;
		display			:block		;
		border			:1px solid black;
		}
/* The highlighted display appearance of a pad with the mouse over it */
.jsMenupadHI	{
		padding:2px;
		font-size		:12pt		;
		color			:#ffffff	;
		background-color	:#99aabb	;
		display			:block		;
		border			:1px solid black;
		}
/* The disabled appearance of an un-highlighted menu pad ( no XML Action value).*/
.jsMenupadGRY	{
		padding			:2px		;
		font-size		:12pt		;
		color			:#ffffff	;
		background-color	:#99aabb	;
		display			:block		;
		border			:1px; solid black;
		}

Adding menus to a page

Add the following line in the <head></head> section of your html page, adjusting the path to wherever you stored the library.
Now all that remains is to place a link to your top-level menus in the HTML page. Since in this example we only have a single top level menu, we only need a single link.

The menu system allows you to customize several parameters by including yet one more script section prior to the inclusion of the "jsMENUlib.js"

<script language="javascript1.2">
optionname=optionvalue;
</script>

The user configurable options for the menu system are outlined below, along with their default values.

menuSUBsymbol ="»": html to indicate sub menu symbol. This can be any HTML one likes , including a reference to an image.
menuLIBpath ="./": Indicates the relative path from the jsMENUlib.js to the directory containing the jsDHTMLlib.js and jsXMLlib.js library scripts.
menuXMLpath ="./jsMENUlib.xml": Indicates the relative path from the jsMENUlib.js to the XML file containing the menu definitions.
menuPOPup =500: Indicates how long (in millisecounds) the mouse cursor needs to hover over a menupad before the sub-menu (if any) is extended.
menuPOPdown=850: Indicates how long (in millisecounds) the mouse cursor needs to be off a menu before it automaticly closes.
menuPOPauto=true: Indicates that when the mouse hovers over a pad with a sub-menu that it should auto extend the sub menu as opposed to waiting for a menu click.