Class UnivMOMenu

UnivMOMenu

public class UnivMOMenu

Universal Mouse-over Menu

Summary

Programmatically creates a set of visible mouse-over activated menus, consistent across many (all?) browsers. Not a pop-up menu.

Summary

Copyright (c) 2001 by Andrew J. Peterson (andy@ndpsoftware.com). All Rights Reserved. Permission granted to use only if you send me an email about it, and allow me to link to your site, if it is on the Internet.

Features & Benefits

This class features:

1. Object-oriented. Easy to create a subclass for using [XML] templates, enforcing style guidelines, or more features.
2. Uses different strategies depending on the client browser. It knows how to do the same thing with JavaScript, CSS or DHTML. Most code samples just break on other browsers.
3. Allows any number of menus on a web page. (No globals)
4. Customize colors, size, orientation, fonts.

Usage

include('UnivMOMenu.php');
$mo_menu = new UnivMOMenu("momenu");
-- If you want, you can set any or all of the following...
$mo_menu->setListWidth(700);
$mo_menu->setListHeight(20);
$mo_menu->setPadding(5);
$mo_menu->setBorders(false);
$mo_menu->setFontSize("12px");
$mo_menu->setColors("631", "360", "fff");
$mo_menu->setListVertical( false, true );
$mo_menu->setHorizontalAlign("center");
$mo_menu->setVerticalAlign("top");
...

-- Add the actual menu items
$mo_menu->addMenuItem("Page 1", "page1.html");
$mo_menu->addMenuItem("Page 2", "http:	$mo_menu->addMenuItem("Page 2", "http:	...

-- Somewhere in a style section (even linked) include:
<style>
<?php $mo_menu->displayStyles(); ?>	
</style>
...

-- Finally, when you get to where you want the menu, output it...
print $mo_menu->display();

For debugging purposes, you can set the global variable $gUnivMOMenuForceTechnique to either 0, 1, 2 or 3. These force the display method despite the browser type. You can see the display method from the constants here, or by using the function getRenderingTechnique.

Examples

There is a live example at aida2.org.
There is a demo of some of the options aida2.org/univmomenu_egs.php.

History

This was inspired by the original code by Stefano SteO Arcidiacono - info@steo.it or http: He featured a nice layout with consistent borders, and the analysis of which technique to use (Layers, JS, CSS) for each browser. Andrew Peterson added the OO interface, cleaned, and parameterized it.

Known bugs

• Setting the height is an estimate. If the items don't fit, the rectangle will be expanded arbitrarily.
• iCab (MacOS X) has rounding errors that created ugly borders. Heightened problem if you specify an absolute height.
• iCab (MacOS X) seems to not allow me to set the visited links color, and so changes are (millions to 1) that the color isn't what you want.
• Opera (MacOS X) mouse-over highlighting is the word only (not the whole cell), in the horizontal layout without an arbitrary height set. This is ugly, but workable. Same bug exists universally for some browsers.
• In some cases, mouse-clicks on the cell are ignored-- only ones on the text are respected. This works in most of the cases, but there are a few that slipped through.
• The onclick JS (last choice) does not properly include the target frame.

Constructor Summary

UnivMOMenu(var $inName)

Method Summary

void	addMenuItem(var $title, var $url, var $target, var $inCellColor) Add a new item to the list.
void	addUnivMOMenuItem(var $inMenuListItem) Add a new item to the list.
int	determineRenderingTechnique(var $inUseThisOne) Calculates the preferred rendering technique for the list.
string	display() Returns the HTML code that will draw/perform the list actions.
void	displayStyles() Returns the style sheets necessary to implement the given list in the given browser.
string	getRenderingTechnique() Returns the name of the current rendering technique.
boolean	isListVertical()
void	setBorderColor(var $inBorderColor) Set the color of the borders, if there are any.
void	setBorders(var $inWantBorders) Set whether or not there are borders between items, or whether they blend into each other.
void	setColors(var $inCellColor, var $inHiliteColor, var $inTextColor) Set colors of the items.
void	setFontFamily(var $inFontFamily) Set the CSS-style font family.
void	setFontSize(var $inCSSFontSize) Set the font size.
void	setHorizontalAlign(var $inAlign) Set the CSS-style horizontal alignment for all text items.
void	setListEvenlySpaced(var $inIsEvenlySpaced) Evenly spaced is an attribute that attempts to keep each item of the table the same size.
void	setListHeight(var $inHeight) Set the preferred height of the list.
void	setListVertical(var $inIsVertical, var $inIsEvenlySpaced) Set the layout of the list.
void	setListWidth(var $inWidth) Set the preferred width for the list.
void	setPadding(var $inCellPadding) Set the amount of padding around each item; it's the same as cell padding in an HTML table.
void	setVerticalAlign(var $inAlign) Set the CSS-style vertical alignment for all text items.

Constructor Detail

UnivMOMenu

public UnivMOMenu(var $inName)

Parameters:

string - name of this list. This is a "code-name" that will be used to identify the list in various places. (Right now it is only used in some places to identify the CSS.) By necessity, this name should be simple and unique, using only characters and numbers (if necessary). Please, no underlines (illegal in CSS), or punctuation marks.

Method Detail

determineRenderingTechnique

public int determineRenderingTechnique(var $inUseThisOne)

Calculates the preferred rendering technique for the list. Uses some primitive knowledge about browsers, which I gleened from some sample code. If you have better info, fill it in.

Parameters:

$inUseThisOne - Default Value: TECHNIQUE_AUTO

getRenderingTechnique

public string getRenderingTechnique()

Returns the name of the current rendering technique. The rendering technique is what non-HTML technology is used to create the hover effect: JavaScript, CSS, or ILAYERs.

setListWidth

public void setListWidth(var $inWidth)

Set the preferred width for the list. If the list is vertical, this number will be respected unless on of the list items has a word too wide to display in the given dimension-- then the list will be stretched. If the list is horizontal, this is a suggestion for the overall width. If will stretch the list if it's too small, and ignore this value if it's too big.

Parameters:

$inWidth - Default Value: 0

setListHeight

public void setListHeight(var $inHeight)

Set the preferred height of the list. If the list is vertical, this is only a preference. There are many things that can go wrong to make it bigger or draw not so nice. See known bugs section.

Parameters:

$inHeight - Default Value: 0

setPadding

public void setPadding(var $inCellPadding)

Set the amount of padding around each item; it's the same as cell padding in an HTML table.

Parameters:

$inCellPadding - Default Value: 0

setBorders

public void setBorders(var $inWantBorders)

Set whether or not there are borders between items, or whether they blend into each other. Pass "true" for borders (default).

Parameters:

boolean - whether the items have a one-pixel border (or not)

setBorderColor

public void setBorderColor(var $inBorderColor)

Set the color of the borders, if there are any.

Parameters:

string - the item's color when the user's mouse is over it (indicating that a click will follow the link).

setColors

public void setColors(var $inCellColor,
                      var $inHiliteColor,
                      var $inTextColor)

Set colors of the items. Colors must either be a name or a six-character hex value, in hex. Sorry, 3-character, CSS-style web safe colors are not acceptable. As always, be careful with names-- these are inconsistently supported across browsers. I recommend using web-safe colors by their 6-digit number.

Parameters:

string - background color of each item

string - the item's color when the user's mouse is over it (indicating that a click will follow the link).

string - color of the text for the item. Must have significant contrast with foreground AND background color to work well. NOTE: There is no way to set the mouseover text color.

setFontFamily

public void setFontFamily(var $inFontFamily)

Set the CSS-style font family.

Parameters:

string - in CSS-complain style, eg "Verdana, Helvetica, sans-serif"

setFontSize

public void setFontSize(var $inCSSFontSize)

Set the font size.

Parameters:

string - CSS-complain font size, like "12pt", "10px" or "110%"

int - HTML 3.2-style font size, from 1 to 7, or "+3". Will only be used for browsers without CSS support.

setVerticalAlign

public void setVerticalAlign(var $inAlign)

Set the CSS-style vertical alignment for all text items.

Parameters:

string - CSS-complain vertical alignment. For example, "top", "middle", "text-top", "%"

$inAlign - Default Value: "middle"

setHorizontalAlign

public void setHorizontalAlign(var $inAlign)

Set the CSS-style horizontal alignment for all text items.

Parameters:

string - CSS-complain horizontal alignment. One of "left", "right", "center" or "justify".

$inAlign - Default Value: "left"

setListVertical

public void setListVertical(var $inIsVertical,
                            var $inIsEvenlySpaced)

Set the layout of the list. This can be either vertical (a 1-column wide table) or horizontal (a 1-row high table). Default format is vertical (for no particular reason).

Parameters:

boolean - if vertical layout is desired

boolean - if evenly-sized elements are desired. See setListEvenlySpaced

$inIsEvenlySpaced - Default Value: false

isListVertical

public boolean isListVertical()

setListEvenlySpaced

public void setListEvenlySpaced(var $inIsEvenlySpaced)

Evenly spaced is an attribute that attempts to keep each item of the table the same size. There are many reasons this will go wrong! I recommend only using it if (1) your items are pretty close to the same size (2) you have plenty of space available. If the two caveats are not respected, chances are that this setting will not work.

Parameters:

boolean - if evenly-sized elements are desired

$inIsEvenlySpaced - Default Value: true

displayStyles

public void displayStyles()

Returns the style sheets necessary to implement the given list in the given browser.

addMenuItem

public void addMenuItem(var $title,
                        var $url,
                        var $target,
                        var $inCellColor)

Add a new item to the list. Cannot change the hilite color per item, so design accordingly.

Parameters:

string - Title to display in the cell.

string - URL to link to when the user clicks. A missing URL implies no hiliting when the item when it is moused over.

string - Target window for the URL, default is "_self", per HTML.

string - HTML color (name or 6-digit hex color). Note: There is no way to control the hilite color or text color on an individual basis so design accordingly. Default uses default background color.

$url - Default Value: ""

$target - Default Value: ""

$inCellColor - Default Value: ""

addUnivMOMenuItem

public void addUnivMOMenuItem(var $inMenuListItem)

Add a new item to the list. Cannot change the hilite color per item, so design accordingly.

Parameters:

UnivMOMenuItem. - Dynamically allocated by caller. This takes ownership of it.

display

public string display()

Returns the HTML code that will draw/perform the list actions.