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

October 28, 2007

Borrowing a chunk of navigation menu from my Grow'Em Plant Propagation Database:

propagation techniques

Seed - General
Chipping Seed
Soaking and Pricking
Pre-sprouting Seed
Stratifying Seed
Cuttings - General
Stem Cuttings
Heel Cuttings
Root Cuttings
Leaf Cuttings
Rooting Hormone
Rooting with Vitamin B1
Rooting with Willow Extract
Dividing Plants
Dividing Orchid Pseudobulbs
Simple Layering
Air Layering
Tip or Trench Layering
Serpentine Layering
Bulbs - General
Bulb Chipping
Bulb Scaling
Twin Scaling
Grafting - General
Cleft or Wedge Grafting
Bud Grafting
Whip Grafting
Side-veneer Grafting
Plants of Home and Garden
Trees and Shrubs
Fruits and Vegetables
Grains and Grasses
Cacti and Succulents
Water Plants

It looks like a single menu, but this excerpt contains 7 discrete menus; the original navigation menu contains 14 discrete menus. Despite this, the Grow'Em page loads very quickly.

One very crucial element for a general-audience web site: if Javascript is not enabled, the page navigation menu still works. The fancy menus aren't there, but the page links that trigger them work either way. When a user clicks over to the new page, the related pages are presented as well. This isn't as quick, perhaps, but the site is still easily and logically navigated.

That's just good design.

Six to ten percent of users have Javascript disabled - a substantial part of your overall traffic. You need to accommodate them. And even for those users who use Javascript, well, good design mandates that we facilitate their browsing by giving them access to related content, where they might need it.

Anticipate your users, give them what they need ...

Style Definitions

Style definitions are simple:

$menuitem_height = 18;
$menuitem_style = array('font' => '9pt verdana', 'color' => 'black',
	'background' => 'white', 'indent' => '7px');
$menuitem_hover = array('font' => '9pt verdana', 'color' => 'white',
	'background' => #016932', 'indent' => '7px');
$menu_opacity = 100;
$menu_offset = array('x' => '45', 'y' => '-5');

I don't believe I need to explain these settings further, but you'll find more at SurgeMenu Basics: Example and Code.

Javascripted menuActions

The menuAction function is a simple one: take the user from one web page to the next. It needs to match the menu selection to the appropriate URL, then execute. Because most of the URL is identical for all pages, we begin by retrieving the unique part of the URL.

This could, of course, be accomplished through a switch statement and a series of case statements, i.e.

	switch(selElement.innerHTML) {
		case "Seed - General":
 			URL = "see0"
		case "Chipping Seed":
 			URL = "see1"
		"Soaking and Pricking":
 			URL = "see2"


But this is cumbersome, and I don't like clumsy code.

I prefer the use of an associative array:

menuActionArray = { "Seed - General": "see0", "Chipping Seed": "see1",
	"Soaking and Pricking": "see2", "Pre-sprouting Seed": "see3",
	"Stratifying Seed": "see4", "Cuttings - General": "cut0",
	"Stem Cuttings": "cut1", "Heel Cuttings": "cut2",
	"Root Cuttings": "cut3", "Leaf Cuttings": "cut5",
	"Rooting Hormone": "cut6", "Rooting with Vitamin B1": "cut7",
	"Rooting with Willow Extract": "cut8", "Dividing Plants": "div0",
	"Dividing Orchid Pseudobulbs": "div1", "Simple Layering": "lay0",
	"Air Layering": "lay1", "Tip or Trench Layering": "lay3",
	"Serpentine Layering": "lay5", "Bulbs - General": "bul0",
	"Bulb Chipping": "bul1", "Bulb Scaling": "bul2",
	"Twin Scaling": "bul3", "Grafting - General": "gra0",
	"Cleft or Wedge Grafting": "cut4", "Bud Grafting": "gra2",
	"Whip Grafting": "gra3", "Side-veneer Grafting": "gra4", 
	"Plants of Home and Garden": "pla0", "Trees and Shrubs": "tre0",
	"Fruits and Vegetables": "fru0", "Herbs": "her0",
	"Grains and Grasses": "grs0", "Cacti and Succulents": "cac0",
	"Water Plants": "wat1", "Bonsai": "tre1", "Orchids": "orc0" }

Sure, this is busy, but I can set up the associative array in some 18 lines (or 37 lines if I want 1 declaration per line) where the same functionality using case and switch statements would take 112 lines.

After declaring the array, I declare the function:

function menuAction (selection) {
	selElement = document.getElementById(selection)
	location.href = ""
		+ menuActionArray[selElement.innerHTML]

which directs the browser to load the page to the composite URL consisting of the common site URL plus the page-specific identifier.

Menu Calling Code

All menu calls have the same basic structure:

<a href="webpage.html" <?php callMenu('menu') ?>>Web Page</a>

Note that the menu is called by an active link that takes the user to another main page, which in turn links to other related pages. Even if Javascript is not enabled and the menus do not launch, the site still works. Of course, these menus greatly facilitate the rapid navigation of a complex site - but a site should be navigable without them.

Full menu calling code for this example:

<a href="" <?php 
callMenu('seed') ?>>Growing From Seed<br>
<a href="" <?php 
callMenu('cut') ?>>Cuttings</a><br>
<a href="" <?php 
callMenu('div') ?>>Division</a><br>
<a href="" <?php 
callMenu('lay') ?>>Layering</a><br>
<a href="" <?php 
callMenu('bulb') ?>>Bulb Techniques</a><br>
<a href="" <?php 
callMenu('grft') ?>>Grafting</a><br>
<a href="">Bare-root

<p><a href="" <?php 
callMenu('tech') ?>>Techniques by<br>Types of Plants</a>

Pretty clean and uncomplicated, wouldn't you say?

Menu Definitions

Similarly, all menu definitions have the same structure, and the whole chunk's short enough I provide it in its entirety:

createMenu (0, 200, "seed", "Seed - General", "Chipping Seed", "Soaking and
	Pricking","Pre-sprouting Seed", "Stratifying Seed");
createMenu (0, 200, "cut", "Cuttings - General", "Stem Cuttings", "Heel
	Cuttings", "Root Cuttings", "Leaf Cuttings","Rooting Hormone",
	"Rooting with Vitamin B1", "Rooting with Willow Extract");
createMenu (0, 200, "div", "Dividing Plants", "Dividing Orchid Pseudobulbs");
createMenu (0, 200, "lay", "Simple Layering", "Air Layering", "Tip or Trench
	Layering","Serpentine Layering");
createMenu (0, 200, "bulb", "Bulbs - General", "Bulb Chipping", "Bulb Scaling",
	"Twin  Scaling");
createMenu (0, 200, "grft", "Grafting - General", "Cleft or Wedge Grafting",
	"Bud Grafting", "Whip Grafting", "Side-veneer Grafting");

createMenu (0, 200, "tech", "Plants of Home and Garden", "Trees and Shrubs",
	"Fruits and Vegetables", "Herbs", "Grains and Grasses",
	"Cacti and Succulents", "Water Plants", "Bonsai", "Orchids");

To really get the feel for the underlying code for this menu, view all of the full SurgeMenu Simple Menu source code at once.

I truly believe SurgeMenu is one of the easiest - if not the easiest - dynamic menuing system available to the public. And as the various examples show, highly customizable in appearance and function.

More SurgeMenu

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

Source Code

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

Copyright © 2017 Ars Informatica. All Rights Reserved.