<HTML>
<HEAD>
<TITLE>SurgeMenu Sample Menu: Funky/Complex</TITLE>

<?php //CUSTOMIZATION CODE FOR SURGEMENU - STYLE DEFINITIONS

$menuitem_height = 25;								//height of each menu item, in pixels
$menuitem_style = array('font' => 'bold 12pt times new roman, times, nimbus mono L',
	'color' => 'white',
	'background' => '#5A8ED6',
	'indent' => '7px');							//CSS style definitions
$menuitem_hover = array('font' => 'bold 12pt times new roman, times, nimbus mono L',
	'color' => 'white',
	'background' => '#476170',
	'indent' => '7px');
$menu_opacity = 70;								//percent opacity: number from 0 to 100 (default)
$menu_offset = array('x' => '0', 'y' => '33');					//default offset of menu from calling object

echo '<script type="text/JavaScript">';

//SURGEMENU CUSTOM FUNCTION menuAction() - DEFINES JAVASCRIPT CODE TO EXECUTE WHEN A MENU ITEM HAS BEEN SELECTED
//
//available parameters:
//
//	divID		- supplied by showMenu; references the element that originally launched the menu
//	selection 	- references the selection clicked on. One of the its most useful properties is innerHTML (the selection text)
?>

function menuAction (selection) {							//define custom actions for menu selections 
	selElement = document.getElementById(selection)				//set handler for selected menu element

	switch(selection) {							//check name of selected menu element
		case "presetsMenuItem1" :						//black text on white: 12pt times
			iFont = "12pt times new roman, times, nimbus mono L"
			iColor = "black"
			iBackground = smiBackground = "white"
			hFont = "12pt times new roman, times, nimbus mono L"
			hColor = "white"
			hBackground = smhBackground = "#5A8ED6"
			hIndent = '7px'
			opacity = 100
			break
		case "presetsMenuItem2" :						//varying fonts; italicized when highlighted;
			iFont = "10pt arial"					//funky wingding to mark highlighted image
			iColor = "black"
			iBackground = smiBackground = "#F6F4C0"
			hFont = "italic 11pt times new roman"
			hColor = "black"
			hBackground = smhBackground = "#F6F4C0 url(\'menuitemmarker.gif\') 7px 7px no-repeat"
			hIndent = '30px'
			opacity = 100
			break
		case "presetsMenuItem3" :						//bold font, 12pt times, semi-transparent
			iFont = "bold 12pt times new roman, times, nimbus mono L"
			iColor = "white"
			iBackground = smiBackground = "#5A8ED6"
			hFont = "bold 12pt times new roman, times, nimbus mono L"
			hColor = "white"
			hBackground = smhBackground = "#476170"
			hIndent = '7px'
			opacity = 70
			break
			
		case "textcolor1MenuItem1" :					//set color of menu item text
		case "textcolor1MenuItem2" :
		case "textcolor1MenuItem3" :
		case "textcolor1MenuItem5" :
			iColor = selElement.innerHTML
			break
		case "textcolor1MenuItem4" :
			iColor = "#A3EB31"
			break

		case "background1MenuItem1" :					//set background
			iBackground = smiBackground = "white"
			break
		case "background1MenuItem2" :
			iBackground = smiBackground = "#F6F4C0"
			break
		case "background1MenuItem3" :
			iBackground = smiBackground = "#CFCFCF"
			break
			
		case "transparencyMenuItem1" :					//set percent transparency
		case "transparencyMenuItem2" :
		case "transparencyMenuItem3" :
			opacity = selElement.innerHTML.substr(0, selElement.innerHTML.length-1)
			break

		case "font1MenuItem1" :						//set font
			iFont = "10pt verdana"
			hFont = "10pt verdana"
			break
		case "font1MenuItem2" :
			iFont = "12pt times new roman, times, nimbus mono L"
			hFont = "12pt times new roman, times, nimbus mono L"
			break
		case "font1MenuItem3" :
			iFont = "11pt comic sans ms"
			hFont = "11pt comic sans ms"
			break


		case "textcolor2MenuItem1" :					//set color of highlighted menu item text
		case "textcolor2MenuItem2" :
		case "textcolor2MenuItem3" :
			hColor = selElement.innerHTML
			break			

		case "background2MenuItem1" :					//etc.
			hBackground = smhBackground = "#016932"
			hIndent = '7px'
			break
		case "background2MenuItem2" :
			hBackground = smhBackground = "#5A8ED6"
			hIndent = '7px'
			break
		case "background2MenuItem3" :
			hBackground = smhBackground = "white url(\'menuitemmarker.gif\') 7px 7px no-repeat"
			hIndent = '30px'
			break
		case "background2MenuItem4" :
			hColor = "black"
			hBackground = smhBackground = "white url(\'redoval.gif\') no-repeat"
			hIndent = '7px'
			break

		case "font2MenuItem1" :
			hFont = "bold 10pt arial"
			break
		case "font2MenuItem2" :
			hFont = "12pt times new roman, times, nimbus mono L"
			break
		case "font2MenuItem3" :
			hFont = "italic 11pt times new roman"
			break
			
		
		case "ActMenuItem1" :						//display browser info
			alert("CodeName: " + navigator.appCodeName + "\r\n" +
				"MinorVersion: " + navigator.appMinorVersion + "\r\n" +
				"Name: " + navigator.appName + "\r\n" +
				"Version: " + navigator.appVersion + "\r\n" +
				"CookieEnabled: " + navigator.cookieEnabled + "\r\n" +
				"CPUClass: " + navigator.cpuClass + "\r\n" +
				"OnLine: " + navigator.onLine + "\r\n" +
				"Platform: " + navigator.platform + "\r\n" +
				"UA: " + navigator.userAgent + "\r\n" +
				"BrowserLanguage: " + navigator.browserLanguage + "\r\n" +
				"SystemLanguage: " + navigator.systemLanguage + "\r\n" +
				"UserLanguage: " + navigator.userLanguage)
			break
		case "ActMenuItem2" :						//pop up a Prompt box
			confirm("Please pick one of the following options:   \r\n")
			break
		case "ActMenuItem3" :						//etc.
			textElement = document.getElementById("funkyMenuHeader")
			textElement.innerHTML = "YO! Text changed using SurgeMenu"
			break
		case "ActMenuItem4" :
			picElement = document.getElementById("funkyMenu")
			picElement.style.background = "url(\'funky_menu2.jpg\') no-repeat"
			break
		case "ActMenuItem5" :
			location.href = "http://www.ars-informatica.ca"
			break
		
		default : alert("No action defined for this menu item")
	}
	
	//many of the code selections change the styles of menus and menu items. For this, we need to find and reference them
	
	allElements = document.all ? document.all : document.getElementsByTagName('*')	//reference all page elements
	menus = new Array();							//and if a menu or menu items, add the
	menuitems = new Array();							//element to the relevant array
	while (allElements[i]) {
		if (allElements[i].className == "cascading_menu") menus.push(allElements[i])
		else if (allElements[i].className == "cascading_item") menuitems.push(allElements[i])
		else if (allElements[i].className == "cascading_submenu") menuitems.push(allElements[i])
		i++
	}

	i = 0
	while (menus[i]) {								//if a menu
		if (opacity != "") {						//should be made transparent or opaque
			menus[i].style.opacity = opacity/100				//change the style: opacity for Mozilla
			menus[i].style.filter = "alpha(opacity=" + opacity + ")"	//and filter alpha(opacity) for IE
		}
		i++
	}

	i = 0									//for menu items - both cascading_item and cascading_submenu
	while (menuitems[i]) {
		if (iFont != "") {
			menuitems[i].style.font = iFont				//change font if required
			menuitems[i].style.lineHeight = iHeight			//fix the lineHeight reset
		}
		if (iColor != "") menuitems[i].style.color = iColor
		if (iBackground != "") menuitems[i].style.background = iBackground
		i++
	}
	
	selElement.style.font = hFont						//define new hover styles, beginning with font style,
	selElement.style.color = hColor						//color, etc. for current selection item. Because
	selElement.style.background = hBackground					//the cursor will be over this item, use hover
	selElement.style.textIndent = hIndent					//styles for same
	selElement.style.lineHeight = iHeight					//fix the lineHeight reset
}

</script>

<?php include 'SurgeMenu.php';

//END OF SURGEMENU CUSTOMIZATION CODE ?>

</HEAD>

<BODY>

<h3 ID="funkyMenuHeader">SurgeMenu Sample Menu: Funky/Complex</h3>

<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>

<div style="position:absolute;top:330px">The <a href="http://www.ars-informatica.ca/">SurgeMenu Dynamic Cascading Menu System</a> is free, modifiable software released under the GNU General Public License (GPL).

<p>Specifics on and source code for this SurgeMenu Sample Menu are provided on the <a href="http://www.ars-informatica.ca">Ars Informatica</a> web site, as is the SurgeMenu source code itself.</div>


<?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");

?>

</BODY>

This source code displayed in HTML format using the freeware source.php by Paul Postuma and Ars Informatica