Ars Informatica
September 28, 2020
Health Care Informatics
Web-based MySQL/PHP Databasing
Web Development
Favourite Software
Hardware for the Frugal Fanatic
Graphic Design and Image Processing
Free Scripts and Software
About Us
Contact Us

 Article Feed for this site

SurgeMenu Basics: Example and Code

October 22, 2007

Article continues from SurgeMenu: a multi-platform PHP/Javascript Cascading Menu System.

The simplest way to illustrate a basic SurgeMenu implementation is to show you the code required to trigger a simple menu from an input field and populate it with the selection the user picks:

apple juice
orange juice

Within the web page, PHP is called to initialize SurgeMenu. Styles need to be specified, Javascript action(s) defined, the SurgeMenu.php file needs to be referenced, and the menus created. Each is demonstrated in the following sections:

Menu Style Definitions


$menuitem_height = 20;
$menuitem_style = array('font' => '12pt times',
	'color' => 'black',
	'background' => 'white',
	'indent' => '7px');
$menuitem_hover = array('font' => '12pt times',
	'color' => 'white',
	'background' => '#316ac5',
	'indent' => '7px');
$menu_opacity = 100;
$menu_offset = array('x' => 3, 'y' => 25);

$menuitem_height is the pixel height of each menu item. This value is an integer: parenthesis should not be used, nor the 'px' abbreviation added to the value.

$menuitem_style and _hover specify the styles used for all menuitems, and the one currently highlighted by the mouse - each array key (font, color, background, and indent) takes a string value, in parenthesis, reflecting any valid CSS you care to specify. The Funky/Complex Sample Menu, in particular, should give you a good flavor for all the possibilities.

$menu_opacity specifies the opacity level (or non-transparency) of the entire menu. Again, this is an integer; parenthesis should not be used, nor the % sign. An opacity of 100 means that the menu is fully opaque, i.e. not transparent at all. A menu with an opacity of 0 is completely transparent, that is, invisible.

$menu_offset defines the x and y offsets, i.e. the pixel distance by which the menu should be offset from the top left of the calling element. In this example, the top left of the menu should be situated 3 pixels to the right and 25 pixels below the top left of the INPUT field on the page.

I've posted three examples, each with source code. Between them, they highlight the range of visual display options and javascripted actions possible.

Defining the Menu Javascript Action(s)

Next in the SurgeMenu initialization code, we define the Javascript action(s) triggered by selecting a menu item. This could be to launch another web page, to fill a form-field with a value, or any other possible Javascripted action.

The function is menuAction (selection) - the part between open and closing brackets is up to the end-user. Two useful references are available: divID references the element that launched the menu, i.e. the ID of the INPUT field in the example above; selection references the menu selection clicked on. One of its most useful properties is innerHTML, the actual selection text. In our example, the selection text is copied from the menu to the INPUT field that triggered the menu.

<script type="text/JavaScript">
function menuAction (selection) {
	selElement = document.getElementById(selection)
	document.submitForm.elements[divID].value = selElement.innerHTML

Again, see the Sample Pages listed below to get a sense of the many menuAction possibilities.

Include the SurgeMenu.php File

To create the menus and add the run-time menuing Javascript, the SurgeMenu.php file needs to be referenced, i.e.

<?php include 'SurgeMenu.php';



Menu Creation

Within the document BODY, create the main menu and submenus using the custom PHP function createMenu (defined on this page, below). Syntax is

    createMenu(int menu tier, int width, "MenuName","[+]item 1","[+]item2");


    int menu tier = integer indicating menu tier being defined, 0 for top
    int width = width of this menu/submenu in pixels
    "MenuName" = name for menu
    "[+]item" = menu item. Optional plus sign references a submenu

All elements are mandatory; there is no limit on the number of menu items that may be specified. For every submenu referenced in a menu, a submenu must be created. In this example:

createMenu (0, 100, "Drnk", "+juice", "milk", "coffee", "tea");
	createMenu (1, 120, "juice", "apple juice", "orange juice");

That is, submenu item +juice requires a submenu juice.

For multiple submenus that all have the same name, but different content: not a problem. Append an underscore and number to uniquely identify each unique submenu, i.e. +miscellaneous_0, +miscellaneous_1, as shown in the Deeply-Nested, Complex Sample Menu. Underscores and numbers are stripped from the menu items when the names are displayed.

Calling the Menu

Last, but not least, the menu needs to be called. This requires that a PHP call be inserted within the HTML tag for the item that calls the menu - not within opening and closing tags, but within the tag itself, i.e.

<input type="input" <?php callMenu('Drnk') ?>>

The name of the top-level menu created above must be referenced.

Advanced SurgeMenu

Sometimes SurgeMenu does not display where intended - too far down the page, or up too high. Though not an innate problem with the code, it still needs to be addressed.

Unfortunately, how browsers determine the position of a web page element on a given page is incredibly inconsistent. It depends on how this element is positioned, where it fits in the overall site layout, how other page elements are defined and nested, and on the browser and browser version used.

I've created four additional code variations to accommodate for the weirdness I've discovered so far. Fortunately, you don't need to rewrite the code yourself. You can simply specify that a certain variation be used, i.e.

$code_variant = 1;
and SurgeMenu does the rest. More on this in SurgeMenu and Positioning Code Variations.

SurgeMenu can be customized further, for example, to launch the same menu from multiple page elements, or to have multiple menus per page, each with different x, y offsets from their calling elements. However, this is beyond the scope of this article. See the SurgeMenu Cascading Menu System source code for more.

Sample Menus

SurgeMenu Sample Menu: Simple
SurgeMenu Sample Menu: Funky/Complex
SurgeMenu Sample Menu: Deeply-Nested, Complex

Source Code

magnifier iconview SurgeMenu example source code

magnifier iconview SurgeMenu Cascading Menu System source code

download icondownload -
SurgeMenu code and documentation

The SurgeMenu Dynamic Cascading Menu System is free, modifiable software released under the GNU General Public License (GPL).

Copyright © 2020 Ars Informatica. All Rights Reserved.