Ars Informatica
May 01, 2017
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 Sample Menu: Funky/Complex

October 24, 2007

Immediately following is a sample menu for the SurgeMenu: a multi-platform PHP/Javascript cascading Cascading Menu System. It demonstrates some of the huge variety of menu styles available. It also shows a variety of Javascripted actions and how they've been implemented: dynamic style changes, changing of page text and images, browser detection, page changes, prompts, etc.

Style Definitions

Initial style definitions for this menu:

$menuitem_height = 25;
$menuitem_style = array('font' => 'bold 12pt times new roman, times,
	nimbus mono L',
	'color' => 'white',
	'background' => '#5A8ED6',
	'indent' => '7px');
$menuitem_hover = array('font' => 'bold 12pt times new roman, times,
	nimbus mono L',
	'color' => 'white',
	'background' => '#476170',
	'indent' => '7px');
$menu_opacity = 70;
$menu_offset = array('x' => 0, 'y' => 33);

Again, pretty standard stuff. But for a more in-depth explanation, see SurgeMenu Basics: Example and Code.


The Javascript is understandably much more complex. No single set of actions can accommodate all we ask of this menu, and so, the menuAction function has to discriminate between different sets of actions based on the menu selection text. We use the Javascript switch statement, i.e.

function menuAction (selection) {
	switch(selection) {
		case "presetsMenuItem1" :
			iFont = "12pt times new roman, times, nimbus mono L"
			iColor = "black"



		case "presetsMenuItem2" :
			iFont = "10pt arial"
			iColor = "black"



		case "textcolor1MenuItem1" :
		case "textcolor1MenuItem2" :
		case "textcolor1MenuItem3" :
			selElement = document.getElementById(selection)
			iColor = selElement.innerHTML


		default : alert("No action defined for this menu item")

Simply put, we choose our actions based on the ID of the menu item selection. The switch statement matches this ID to the various case labels. If it matches, i.e. to "presetsMenuItem1", then menuAction changes the font to 12pt times new roman, or times, or nimbus mono L, and sets font color to black, and so on. When it has executed all the code that applies to that label, i.e. encounters the break statement, the switch statement ends.

For the full (painfully exhaustive?) Javascript, view the SurgeMenu Funky Menu source code.

Menu Calling Code and Image Maps

It looks like our menu is derived from a web page image map. I wanted it to be. Didn't work.

Here's the actual working code:

<div ID="funkyMenu" style="position:absolute;left:30px;top:60px;width:500px;
	<div <?php callMenu('App') ?> style="position:absolute;left:18px;
	<div <?php callMenu('Act') ?> style="position:absolute;left:207px;

The problem: SurgeMenu works out the location of a page element using the Javascript getElementById method. But this only works for some browsers - and appears to work for others, but doesn't. That is, it returns a value. It doesn't throw an error. This value, however, returns the actual top and left positions for the parent image in some browsers, rather than the positions for the area that was clicked on.

(NB: if you don't test in multiple browsers, you wouldn't have noticed. You would've thought this stuff was functional. Test, test, test.)

So - no image map. The above code is a functional facsimile. It works on all browsers. Basically, rather than an image and image map, we've created a DIV the height and width of the image, and set its background to that image. Second, we've created two absolutely-positioned DIVs within this DIV that cover the areas that trigger their respective menus.

Menu Definitions

You may not need to see this stuff again - the basics are more than adequately covered under SurgeMenu Basics: Example and Code. Again, the full SurgeMenu Funky Menu source code is also available. Still, here goes:
createMenu (0, 170, "App", "+presets", "+general items", "+highlighted
	createMenu (1, 255, "presets", "standard black text on white", "fancy
	& ornate", "funky semi-transparent");
	createMenu (1, 140, "general items", "+text color_1", "+background_1",
	"+transparency", "+font_1");
		createMenu (2, 90, "text color_1", "black", "blue", "red",
		"green", "yellow");
		createMenu (2, 90, "background_1", "white", "cream", "gray");
		createMenu (2, 85, "transparency", "100%", "70%", "50%");
		createMenu (2, 140, "font_1", "10pt verdana", "12pt times",
		"11pt comic");
	createMenu (1, 130, "highlighted items_1", "+text color_2",
	"+background_2",  "+font_2");
		createMenu (2, 90, "text color_2", "black", "red", "white");
		createMenu (2, 155, "background_2", "green", "blue",
		"wingding icon", "background oval");
		createMenu (2, 145, "font_2", "bold 10pt arial", "12pt times",
		"italic 11pt times");

createMenu (0, 180, "Act", "browser data", "popup prompt", "change text on
page", "change image", "change page");

One thing these menus do illustrate is the handling of multiple menu items with the same menu item text. There are two submenus with the text of "background", two with "text colors", etc. Each has a unique submenu, so requires a unique menu item name.

Not a problem: an underscore and number uniquely identifies each unique submenu, i.e. +background_1, +background_2. This full ID is used in all menu item definitions, but terminal underscores and numbers are stripped from the menu items when the names are displayed.

More SurgeMenu

SurgeMenu Dynamic Cascading Menu System
SurgeMenu Basics: Example and Code
SurgeMenu Sample Menu: Simple
SurgeMenu Sample Menu: Deeply-Nested, Complex
SurgeMenu and Positioning Code Variations

Source Code

magnifier iconview SurgeMenu Funky Menu 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).

general items
highlighted items
standard black text on white
fancy & ornate
funky semi-transparent
text color
10pt verdana
12pt times
11pt comic
text color
wingding icon
background oval
bold 10pt arial
12pt times
italic 11pt times
browser data
popup prompt
change text on page
change image
change page

Copyright © 2017 Ars Informatica. All Rights Reserved.