General Information
===================
Xmenu-xlayer is a versatile, javascript driven DHTML menu that works on most 
popular browsers. It comes in 3 basic modes: vertical, horizontal or collapsing
and folds/unfolds on clicks or mouseovers. Easy to implement, it doesn't need
any absolute coordinates.

The project page on sourceforge with links to all resources:
  http://sourceforge.net/projects/xmenu-xlayer

The official xmenu-xlayer homepage is:
  http://xmenu-xlayer.sourceforge.net

You can download the lastet release at:
  http://sourceforge.net/showfiles.php?group_id=86242

You can subscribe, unsubscribe, and view mailing list archives at:
  http://sourceforge.net/mail/?group_id=86242
                                                                                                                                                                                                               
The forums for questions, help, discussions may be found at:
  http://sourceforge.net/forum/?group_id=86242


Installation
============
See the file 'INSTALL'


Requirements
============
Xmenu-xlayer works on the following browsers:
* Netscape 4.x and later (communicator series)
* Microsoft Internet Explorer Windows 5 and later (5, 5.5, 6)
* Microsoft Internet Explorer Macintosh 5 and later (5, 5.1, 5.2)
* Gecko in all versions (Mozilla, Firebird, Netscape 6.x/7, Galeon etc.)
* Safari in all versions (Beta, 1.0, 1.1)
* Opera 6 and later (Opera 6, 7)
* Konqueror 3 and later


Features
========
Xmenu-xlayer comes in 3 basic breeds. It can display a menu structure in a
(classic) vertical, horizontal or collapsing manner. The vertical and the 
horizontal display-styles can be configured to fold/unfold menu branches - 
a child of a node and its siblings - by clicking on it or by moving your 
mouse over it. Collapsing menus always react to clicks only. You may configure
configure the place where your menu appears - below or to the right of its root
node.
You can set the menu to highlight the nodes you clicked in order
to better show you the branches currently unfolded. If you supply the name and 
the content of your navigation parameter (form field or URL-parameter), 
xmenu-xlayer  automatically unfolds the correct node/branch on load. This gives
you some kind of navigation status. 
A menu (or a branch) closes if another one of the same type opens (onclick-
menus close other onclick-menus when they open, onmouseover-menus do the same
to their siblings) so that you can build a menu-bar by putting several menus 
of one page. They will behave like a classic application menu. You may disable
this behaviour by setting a flag in the configuration structure. In this case 
the permanent menu will only close if you operate it to do so. You do not have 
to supply any kind of absolute coordinates to position the menu on your page. 
Just add your menu inside a <td> or any other HTML-container-element. Xmenu-
xlayer automatically creates a relative layer/div (XlayerParent.js) inside that
HTML-element and gets it position. That layer won't be visible as it is right 
below the root-node of your menu. The menu layers can be configured in their
background-color, size, offset, icon, font-face, font-size, text-alignement, 
text-border, text-color and can be set to fade in (works on Internet Explorer 
Win/Mac and Gecko and Safari only). These configuration options are present for
each  menu-branch separately. You will be able to have different appearances 
for  each menu and submenu (of a menu). It is easy to port the menu to any
other browser, as 99% of the browser dependant code is inside the DHTML
component Xlayer.js that implements a layer with a coherent API. 

                                                                                                                                                                                                               
Configration
============
Check the example structure 'pastaVertical' defined in XmenuConfigMostTypes.js
in this archive. Some implementation helps found in menuMostTypes.html are
discussed here, too.
Check 'NEWS' for susequent changes in the configuration structure. These entries
allow you to adapt former configs to the latest one.


1.) global settings:

[  
  Xmenu.prototype.VERTICAL,
  1, // delay in sec. before closing menu
  false, // onclick / onmouseover
  true, // horiz. & vertical menu: menu appears below/right of the root-node
  false, // horizontal menu: each hierarchy starts on same X
  false, // keep expansion state
  true, // highlight clicked nodes
  [ 20, 1 ],	// XlayerParent width, height
  "img/spacer.gif" // spacer url
],

1.1.)  Type

Xmenu.prototype.VERTICAL

Here you can define the type - the alignement - of the menu. Choose between

- Xmenu.prototype.VERTICAL
- Xmenu.prototype.HORIZONTAL
- Xmenu.prototype.COLLAPSING

Vertical menus behave like classic desktop application menus. Horizontal menus
are quite similar, but the alignement of the menu nodes and branches is
different. In vertical menus, the children of the current node are displayed to 
the right of it. Horizontal menus show their children below them. Siblings show up 
to the right. Collapsing menus have all nodes just to their bottom.

1.2.) Closing delay

1, // delay in sec. before closing menu

This is the time (in seconds) spent since you moved your mouse outside the menu.
A menu takes this delay to collapse und hide all its branches.

1.3) Onclick / Onmouseover

false, // onclick / onmouseover

This is the setting where you can switch between clicks and mouseovers.
A menu node can unveil its children when you click on it or, alternatively, when
you move your mouse over it. Collapsing menus are always onclick-only as it 
wouldn't make any sense to have your menu expanding its nodes on mouse gestures 
here.

1.4) Appearance below / to the right of the root node

false, // horizontal & vertical menu: menu appears below/right of the root-node

This switch allows you to control if your menu displays its branches below the 
root-node or to its rigt. False sets the menu to appear to the right, true 
turns it to show up below the root-node.

1.5.) Left aligend

false, // horizontal menu: each hierarchy starts on same X

Horizontal menus unveil their branches - children and their siblings - below the
parent node. The horizontal alignement of a branch is 'left', it always
starst at the same vertical offset as its parent node. This switch allows you to
have all branches starting on the same position. This setting affects horizontal
menus, only.

1.6) Permanent 

false, // keep expansion state

If you expand a menu by moving moving your mouse over it or clicking
on it (onclick/onmouseover-switch discussed above), all other menus close
themselves. You can turn off this behaviour by switching this setting to 'true'.
A menu of that kind does not automatically collapse/hide its branches.

1.7) Highlight

true,	// highlight clicked nodes

Each node that you clicked on can be highlighted in a custom style. This style is
defined in the styles section, a parameter for the background color and one for 
the text color. This setting only affects onclick-menus only. You can supply 
navigation parameters in your page-request by inserting parameters there:

("http://.../menuAllTypes.js?sNavigation=spaghetti" ). 

This can be done with forms, too. Your menu will expand the node that has
this text. You may, of course, inhibit this by setting the switch to 'false'. 
If you want this behaviour, you have to supply the name of that variable and
its content in the page request. Furthermore, these parameters have to be given
to the class Xmenus (Xmenus.js) on its instanciation (look in menuAllTypes.html):

var menus =	new Xmenus( 'sNavigation', 'spaghetti' );

1.8) XlayerParent

[ 20, 1 ]	// XlayerParent width, height

This array holds the informations needed for XlayerParent (XlayerParent.js). 
An instance of XlayerParent is used to calculate the position of the menu in a 
page. When you add a menu to the menu controller Xmenus (Xmenus.js) by 
inserting

<script language="JavaScript1.2">
	menus.add( pastaVertical );
</script>

into your page, Xmenu writes a relative layer 

"<DIV style='position:relative'><img src='....></DIV>' or 
'<ILAYER...' (Netscape 4.7)

to your page. This layer is not visible as it is right below the
root-node of the menu ('pasta'). Its function is limited to
position-calculations. You supply  its width and height in the following
array-positions. the spacer url indicated in the following position is used
here, too as src for an image inserted into this layer. This is necessar
as many browsers (specially IE on macintosh) do not render a html-container
if there's not content in it and an image is more flexible talking of width and
height as a '&nbsp;' would be..

1.9) spacer url

If you choose to have icons in your menu nodes (arrows to the right, to the
left or any other gif) and you configure xmenu-xlayer to display those gifs
only if there are children to the specific node, xmenu-xlayer has to use a
spacer gif there instead (Some browsers do not create a table cell if there
is nothing in it, and your text in the menu nodes wouldn't be aligned). The
spacer indicated here is used for the XparentLayer, too (check above).


2). Styles
Still to be done... 

Have a look at the examples in this archive or mail me for any questions at 
dietisheim@sphere.ch.


How to report bugs
==================
To report a bug, submit it to the bug tracker, linked to from the xmenu-xlayer
project page, or send mail to the xmenu-xlayer mailing list. You may
alternatively mail me directly at dietisheim@sphere.ch.

Please be as exact as possible and include (if possible):

* The version of xmenu-xlayer
* The exact javascript-error produced by your browser) or wrong menu behaviour
* Information about your system. For instance:
   - Whar browser and version
   - What operating system and version
* How to reproduce the bug.

Thanks for your contributions and participation!