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: a multi-platform PHP/Javascript Cascading Menu System

May 14, 2009

Updated: SurgeMenu is now in version 1.2

SurgeMenu has been tested and works with Internet Explorer 6, 7 and 8; Firefox 1.x, 2, and 3; Google Chrome 1.0; Netscape Navigator 9; Opera 8 and 9; Safari 3 and 4.

As of this writing, these account for over 98% of all browsers used.

October 22, 2007

The challenge: to create a flexible, easily customizable dynamic menu system that allows for very deeply nested, multi-tiered menus. One that maintains its speed, no matter how complex the menu. One that is created with minimal configuration time. One that works across browsers. And keep it lean and mean ...

I tried others, prior to building my own. Many of them. And even the best of the lot, XMenu, by Erik Arvidsson and Emil Eklund, doesn't deliver on all counts. It requires that a good many, code-heavy files be loaded, uses a larger amount of run-time code, and - most problematic - adds large numbers of prototyped methods and properties to the WebFX objects. As menus grow, menuing rapidly slows down, and on large menus, it chokes. It hangs.

Not so with SurgeMenu. Take my 'medical subjects' menu tree - demonstrated and discussed in more detail elsewhere - the top link launches a top-tier eleven-item menu, each with second-tier submenus containing from 6-10 items, twenty-five third-tier menus, and five fourth-tier menus. Grand total: 289 selectable menu items.

SurgeMenu deeply-nested menu example: 289-item menu of medical subjects

SurgeMenu was developed from the ground up as a leaner, faster, easier alternative. Heavily annotated! run-time Javascript weighs in at under 6K. I've built 471-item menus that loaded and ran as fast as a 4-item menu ...

The menus themselves execute using Javascript. SurgeMenu also uses and requires PHP, to automate and simplify the creation of the Javascript, CSS, and HTML menu code. Not that this can't be done manually, but it would take a lot more explaining, typing, testing. One mistyped character breaks the code.

These menus could be created without PHP, but coding the HTML by hand is quite a bit of work. If there's enough demand, I'll kick out a no-PHP, Javascript-only package, later.

The heavy use of CSS means that these menus are incredibly customizable. The following two screenshots are of the same menu; menu selections dynamically change the menu appearance using Javascript. Demo and particulars deserved their own page.

SurgeMenu funky menu example illustrating partially-transparent menu

SurgeMenu funky menu example shows dynamically changed menu styles, highlight styles and icons, background, etc.

Menu transparency - got it. Customizable size - check. Icons to highlight the item that currently has focus, or icons to indicate submenus - both are options. Highlighting items by text or background color, font, bold or italic - all are options.

Ah, yes. This is old code - some of my oldest, and coolest, and though I had it running well on Internet Explorer, it failed on other browsers. That has now, finally, been fixed.

Amazingly, this was the hardest part of the new SurgeMenu - it took a few months on-and-off coding to get it right. No browser is fully standards-compliant, and no browser implements CSS and Javascript in exactly the same. It even changes between releases of the same browser ...

SurgeMenu has been tested with Internet Explorer 6 and 7, Firefox 1.5 and 2.0, Netscape Navigator 9, Opera 9, and Safari 3. As of this writing, these account for 98% of all browsers used. And no, the code is not XHTML-compliant, or fully W3C Document Object Module-compliant. If it were, it would not work.

As new browsers come out, this code may need to be updated - what code doesn't? But since it's free software released to the public under the terms of the GNU General Public License (GPL), you or I or someone else can modify it to reflect those needs.


More SurgeMenu

Article continues on SurgeMenu Basics: Example and Code.
See also SurgeMenu and Positioning Code Variations.

Sample Menus

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

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.