Ars Informatica
August 19, 2017
Home
Health Care Informatics
Web-based MySQL/PHP Databasing
Programming
Web Development
Favourite Software
Hardware for the Frugal Fanatic
Graphic Design and Image Processing
Free Scripts and Software
About Us
Contact Us
Links
 
 

 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.
 

Javascript

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"

			..

			break

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

			..

			break

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

			..

		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;
height:250px;background:url('funky_menu.jpg');background-repeat:no-repeat">
	<div <?php callMenu('App') ?> style="position:absolute;left:18px;
	top:17px;width:170px;height:33px"></div>
	<div <?php callMenu('Act') ?> style="position:absolute;left:207px;
	top:17px;width:137px;height:33px"></div>
</div>

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:
<?php
createMenu (0, 170, "App", "+presets", "+general items", "+highlighted
items_1");
	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 SurgeMenu12.zip -
SurgeMenu code and documentation
 

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

presets
general items
highlighted items
standard black text on white
fancy & ornate
funky semi-transparent
text color
background
transparency
font
black
blue
red
green
yellow
white
cream
gray
100%
70%
50%
10pt verdana
12pt times
11pt comic
text color
background
font
black
red
white
green
blue
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.