| June 23, 2017 | ||
|
|
SurgeMenu Sample Menu: Deeply-Nested and ComplexOctober 31, 2007 This particular menu has a four-year legacy; it and others of its type led to SurgeMenu as it exists today. The medical subjects menu has 289 selectable menu items, functioned then as it does now, and looks the same. Here it is. Search for Medical Presentations: Though the menu is old, it took years to bring to the public. At one point, it contained a 471-item menu that loaded and ran as fast as a 4-item menu. It looked and worked as it does today. So why the delay? Two reasons: 1. What works in one browser may be impossible in another. 2. I wanted easily-implemented and highly customizable code. Obviously, this code works in multiple browsers; I've tested it in recent versions of Internet Explorer, Mozilla/Firefox, Netscape Navigator, Opera and Safari. Not because the original code worked in all browsers. Far from it. There is no consistent Javascript or Cascading Style Sheet implementation across browsers. There a coding standards: a W3C Document Object Model for CSS, XHTML, and others. And none of them consistently implemented. The SurgeMenu source code accommodates multiple browser Javascript and CSS interpretations. It is non-standard code. And for people who dislike (or loathe) non-standard code: I am with you. Standards-compliant browsers would make code such as this obsolete, and the alternatives so much easier to create. Let the day come soon! Until then, however, I will strive to create functional code. Additionally, since this code is released as free, modifiable software under the GNU General Public License (GPL). If it doesn't work for you, if I haven't updated it for your browser, or for the most recent iteration of one of the ones I've tested it on - as lately as today - change it as you wish. (For a small taste of my pain, see the article on SurgeMenu and Positioning Code Variations. And in Building a Multi-Browser Web Page Testing Suite you'll find links to all commonly-used browsers for the Windows PC, Mac and linux platforms.)
Style DefinitionsThis menu differs from some of the others in its use of images to indicate submenus. We specify a background image for this; SurgeMenu ensures that it's right-aligned. Syntax is: $submenu_flag = 'right-arrow.gif'; Note that this functionality requires that background images aren't already used within the menu, i.e., within the $menuitem_style('background') or $menuitem_hover('background') definitions. If this is something you require - an image to indicate submenus as well as background image(s) for all menu items or for highlighted menu items - well, the code will need to be updated. I couldn't find an easy fix, and didn't need it. If the demand arises, I may do so later - or you could, yourself. The code is yours ... The full SurgeMenu style definitions for this menu: $menuitem_height = 17;
$menuitem_style = array('font' => '11px arial',
'color' => 'black',
'background' => 'white',
'indent' => '7px');
$menuitem_hover = array('font' => '11px arial',
'color' => 'white',
'background' => '#316ac5',
'indent' => '7px');
$submenu_flag = 'right-arrow.gif';
$menu_opacity = 100;
$menu_offset = array('x' => '5', 'y' => '22');Alternate Menu Calling CodeThe main diagnosis menu here is called as elsewhere: <input type="button" value="add" style="width:40px" class="menu_input"
<?php callMenu('EducSubj') ?>>
The Boolean menu (with selections of 'AND', 'OR', and 'NOT'), however, requires an alternate calling mechanism. The reason: this menu is re-used several times on the Search form. The menu requires a unique ID for each form element that calls it, to produce it in the right location on the page, and to have its resultant menu action correctly implemented. The PHP callMenu function produces this ID from the menu name. Hence, the problem: same menu call, same non-unique ID. The solution: don't use the callMenu function. The following alternate calling code is the actual original code I developed four years ago: <input name="bool3" ID="inpBool1" class=width40 value="AND"
onMouseOver="collapseSubs(1);showMenu(event,'bool',0)"
onMouseout="menuFocus=false;setTimeout('hideMenu()',250)">
A unique ID is required, as are the onMouseOver and onMouseout javascript event definitions ... which, incidentally, is the code that the PHP callMenu function produces. Specifically, the <?php callMenu('EducSubj') ?> call from above inserts the following into the INPUT element: ID="EducSubj" onMouseOver="collapseSubs(1);showMenu(event,'EducSubj',0)"
onMouseout="menuFocus=false;setTimeout('hideMenu()',250)"
Menu Creation Code, and Handling Submenus with Identical TitlesThe actual menu creation code is understandably very lengthy: a top-tier eleven-item menu, each with variable-length second-tier submenus of six to ten items apiece. Twenty-five third-tier menus, and five fourth-tier menus. A grand total of 289 selectable menu items. As such, I won't reproduce it here; the source code is only a click away. A small snippet easily represents the whole: createMenu (0,115,"EducSubj","+cardiovascular","+EENT","+gastrointestinal", "+genitourinary","+neurologic","+OB-GYN","+orthopedic","+pediatric", "+respiratory","+trauma","+miscellaneous_0"); createMenu (1,190,"cardiovascular","acute coronary syndromes","Advanced Cardiac Life Support","+arrhythmias","cardiac arrest","chest pain", "congestive heart failure","myocardial infarction","syncope", "+vascular","+miscellaneous"); createMenu (2,165,"arrhythmias","asystole","atrial fibrillation", "bradyarrhytmias","prolonged QT","pulseless electrical activity", "pulseless VT/VF","supraventricular tachycardia","tachyarrhythmias", "torsades de pointes","ventricular tachycardia"); createMenu (2,160,"vascular","aortic aneurysm, abdominal","aortic aneurysm, thoracic","deep venous thrombosis","ischemic extremity", "mesenteric ischemia","peripheral vascular disease","pulmonary embolus","spinal cord infarct"); createMenu (2,150,"miscellaneous","anaphylactic shock","cardiac transplant patient","cardiogenic shock","endocarditis", "hypertension","hypertensive crisis","myocardial disease", "pacemaker malfunction","pericarditis","valvular problems"); I will not belabour the handling of unique submenus with identical titles. As with the SurgeMenu Funky/Complex menu example, an underscore and number uniquely identifies each unique submenu, i.e. +miscellaneous_1, +miscellaneous_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 there. More SurgeMenuSurgeMenu Dynamic Cascading Menu System Source Code
The SurgeMenu Dynamic Cascading Menu System is free, modifiable software released under the GNU General Public License (GPL).
| |
