DynarchMenu is probably the best Web-based menu system in the world. This page should describe why, by listing its features. Move the mouse over each item for a description of it.
|
» Cross browser and cross platform
DynarchMenu is built upon Web standards and therefore it works on a wide range of browsers and platforms.
DynarchMenu is developed in Mozilla FireFox and tested with Internet Explorer for Windows (versions 5.0, 5.5, 6.0), Opera 7.x for both Windows and Linux, Konqueror for Linux. The menu is known to work with Apple Safari too, as well as with any Gecko-based browser such as Netscape 7.x, Galeon, Camino and of course, Mozilla, most probably any version.
» Keyboard navigation (unique)
DynarchMenu provides outstanding keyboard navigation features. Currently, keyboard support is fully functional with Internet Explorer (all versions) and any Gecko-based browser (Mozilla, FireFox, Netscape 7+, etc.). There is a slight limitation in Internet Explorer (any version): our menu can not completely override keys that open the browser menus (such as ALT-F). If your DynarchMenu installation has menus that should open at ALT-F, then they will work in IE, but the browser's menu will also open. We have found no workaround for this browser problem. Keyboard shortcuts are extremely easy to specify: just prefix the letter which you want to be the shortcut with an underscore character (“_”). The menu will understand that that letter is the shortcut and will take care to underline it and to include it in the menu's keymap. Additionally, underlined keys from the toplevel menu bar will respond to ALT-key shortcut which will open the submenu associated for that item (or trigger other action).
» Write semantic HTML—no JS needed (unique)
The menu is generated from pure HTML code. That is, you don't have to mess with JavaScript code and internals. You simply write your menu as an HTML list (which may contain nested lists—those are submenus) and only have to call one JavaScript function, upon the <body> “onload” event. This way to set things up has far more advantages than just being easy:
» Protection for “Windowed controls in IE”
Our menu contains code to protect against the “z-index”
bug of windowed controls in Internet Explorer. A windowed
control is for instance a The bug is simple: no element can be layered on top of a windowed control in Internet Explorer. The windowed control normally appears on top of “unprotected” elements, no matter what “z-index” setting may they have in CSS. Dynarch.com implemented code to protect against this IE bug, using an idea emitted by Joe King.
» Support for cross frame menus
DynarchMenu can be displayed across frames. That is, you can show the main menu in one frame, and make the popups appear in another frame. This is probably the easiest and most portable way to make the menu stay fixed in page, and it's a rare feature in DHTML menus. Support for this has been added in version 2.8 and it is considered beta, although our tests look quite good.
» Context menus on a “per-element” basis
Using our menu you can easily setup context menus for the whole document object, or for certain specified elements; you can even have different context menus for different elements—after all, that's what the word “context” is all about, right? This is done extremely easy: just specify the ID of the element which you would like to assign a context menu to in a special class attribute at the <LI> tag that surrounds the menu. More information is available in our context menus sample. There is an alternate way. You can provide a menu that is also a part of the horizontal menu bar. You don't even need to write it twice. :-) If you have a supported browser and you right-click in this page, you will see the same popup that appears in the “Preferences” menu (and notice that “Preferences” gets hovered while you're in the “context menu”). Note: this feature works in Gecko (Mozilla, Netscape 7+, Galeon, Chimera, etc.) or Internet Explorer 5.0+ for Windows. It also works in Opera, assuming the end-user has configured the browser to pass right clicks to JavaScript code.
» Can be dynamically generated
As stated already, the menu is described through nested HTML lists. This makes it easy for one to generate a menu based, for instance, on database queries. You just output HTML code. Aside for this, one can also change menu proprieties dynamically—they apply instantly, without requiring a page refresh. This is good for true Web-based applications, where page reloads should be practically inexistent (or better put, invisible).
» Smooth menu shadows (unique)
Popup menus can (optionally and “on” by default) have shadows. Most Web-based menus provide it, but what it's unique to our menu are the smooth—blured, semi-transparent and with rounded corners—shadows. This makes high quality graphics that you usually find only in desktop-based menu systems. As far as we know, our menu is the first that provides this feature. Note: this feature is not available in Internet Explorer 5.0 for Windows—it will show plain opaque shadows. But any other browser can do it.
» Timeouts: relaxed navigation
DynarchMenu allows one to set customizable timeouts for popups. That is, the popup will not appear instantly when you hover an item that has a submenu, but rather after a timeout. Also, the popups will not close immediately after the mouse hovers another element or leaves them, but after the same timeout. The “timeout idea” has been used for years in all desktop-based menu systems, and newer even in Web menus. It's good because it provides the end-user a short time (“timeout”) to change his mind about a menu: if he accidentaly leaved the submenu and chosed another item, he can still turn back (during this timeout) and the submenu will be “reactivated” (that is, it won't close at all). Of course, this behavior is totally customizable—if you want instant popups, then you can set the timeout to zero.
» Icons (in PNG too) (unique)
As you might have already noticed, our menu supports icons. Icons are entered as plain <img> tags (see our section about how easy is it to setup) so you don't have to know any JavaScript code for this either. Using an additional helper script (“PieNG.js”) you can use PNG icons and rest assured that they will work fine with Internet Explorer too (5.5+). “PieNG.js” is included in our menu distribution, for your convenience. This feature is unique to our menu system—no other that we know of supports PNG icons. One more word about “PieNG.js”—it is a free script, also developed by us, totally independent of DynarchMenu. Using it you can safely include PNG graphics all over your pages and we recommend this. PNG-s can be cool, while GIF or JPEG can't.
» Arbitrary HTML in menus (unique)
Our menu supports inclusion of arbitrary HTML in menu items or menu popups. This is also extremely easy to do, since our menu is defined in HTML.
The above image shows a popup menu that contains both normal items—that respond to keyboard events and get “hover” and “active” states—and a more complex HTML form. You can see it live in our samples, in html-popups.html. OK, we know that more Web-based menu systems have such facilities; however, what is unique to our menu—to the best of our knowledge—is the ability to mix normal menu items with arbitrary HTML sections.
» Toplevel menu can be vertical too
Though this demo shows it in its horizontal form, the main menu can also be vertical. This can easily be changed and does not invlove you to relayout your menu—in other words, the menu is defined in the exact same way; you just need to pass “vertical: true” to the setup function.
» Optimal positioning and dimensioning
While you have absolute control on where the main menu bar appears, when opened, submenus will be automatically displayed at the most intuitive position. They won't get off the screen and they won't produce horizontal scroll-bars. This makes things easy for development of menu-based applications as you don't have to care and test where they will be—our algorithm does its best to show submenus at the right position, period. Also, dimensions of submenus are dynamically computed based on the submenu content, just like in any high quality menu system. You don't have to care about this and you don't have to instruct DynarchMenu to give a certain width/height to popups—it gives them the optimal dimensions.
» Aligned submenus (unique)
Submenus are perfectly aligned with the item that opened them. See the following image: items “DynarchMenu” and “Documentation” are perfecly aligned, as well as are “Documentation” and “Files”.
This is done in a stylesheet independent manner—you can use any padding you want; DynarchMenu will compute positions so that items remain aligned.
» Help strings
DynarchMenu supports help strings for menu items. These are actually the “title” attributes that you pass along <li> or <a> elements, so they will work even with browsers that don't understand JavaScript. The help strings are displayed in the window status bar and, optionally, as a tooltip. Tooltip activation can be done very easily by passing a certain parameter to the single JavaScript function that you need to call—DynarchMenu.setup.
» Check boxes and radio buttons (unique)
With a bit of external JavaScript coding, DynarchMenu can support check boxes and/or radio buttons. See our preferences for a real example.
The above picture shows our preferences menu. The submenu on the left contains some “check boxes” (they are unrelated to each other), while the one on the right only contain “radio buttons” (only one can be selected at a time). Of course, you can also mix them if appropriate.
You have complete control on how the menu behaves when a
check box or a radio button is clicked, or even on how the
small image (be it check box Additionally, changing of features that require a menu redraw—like “shadows” preference or the skin— will always close the popup (but this is also dictated by outside scripts).
» Disabled/enabled menu items (unique)
OK, we know that any menu supports enabled items. They are normal menu items, after all. But what about disabled items? DynarchMenu is the first Web-based menu system that we know of to support disabled items. That is, one is—programatically—able to disable/enable items without even requesting a page reload. Of course, menu items can be disabled initially and enabled after the page loads. The very menu in this page is using this feature in order to disable the menu item that points to the current documentation page. Also, in the “Preferences” submenu you can see certain items that are only enabled if the feature that they are related to is checked (such as “Timeout”—enabled only if “Electric” mode is on).
» Optional electric mode
All Web-based menu systems that we know of only work in what we call “electric” mode. That is, submenus are opened on “mouseover” event (when the cursor is over an item), without waiting for a click. Our menu also can work like a desktop-based menu: in order to open a submenu one has to click on the item. In order to close all menus, one has to click somewhere outside them in the document (or to press ESC). We believe that this approach is the nicest and less confusing one, because there are far more people accustomed to this behavior than to the “electric” one. However, by just passing one parameter to the setup function, our menu can work in “electric” mode too. The timeout to close submenus is also configurable. You can dynamically enable/disable “electric” mode or set the timeout from our “Preferences” menu. Check it out, it's cool. ;-)
» Carefully crafted skins
Of course—do we have to even say it? ;-)—our menu supports “skins”. Skins are ordinary CSS files that define how the menu looks like. In the distribution ZIP you can find 7 fine tuned color schemes that resemble the look of well known menus such as the ones from Windows 98, 2000 and XP, Mozilla Modern colors and of course, Aqua theme from Apple Mac OS X. See our “Preferences” menu.
(we spent tens of hours for working on them and we are positive that you won't find better looking menus all over the Web). There also exists a “system” theme which will always use the colors of the system where the browser runs on, therefore making the difference between the application in browser and other desktop applications transparent. If you want to use a customized skin, it's very easy for you to write your own. We made things simple—the most complex skin that we created so far, Aqua, only has 16 lines of CSS code.
» Documentation
OK, you'll say, the documentation is part of any product and we agree. But our documentation is more than just documentation. It's a complex, advanced example on what you can do with our menu. It's almost a site in itself—simple, indeed, but it shows a lot of techniques that you would probably like to know of, such as using IFRAME-s for loading and displaying files without a full page refresh, or dynamically changing stylesheets. The menu documentation is perhaps the best menu sample in itself. Use it, read it, understand it and look through its sources, and you'll learn a lot more than you could do from a printed PDF file. Of course, our product also contains simple, commented, step-by-step tutorials helpful for a proper understanding of how the menu is configured. These can be found in the “examples” subdirectory from the ZIP file.
» Is it perfect?
Perfect? Certainly not. First of all, perfection is unachievable: browsers contain mistakes that we can't workaround. They are evolving, certainly in the right direction, but they (all of them) are far from being perfect. Given this condition, our menu can't be perfect. But we did our best, and we believe that it's the closest one to perfection. Currently, the known problems are:
We believe that none of the above problems make a show stopper for any Web application. Also, we are positive that any Web-based menu will have the above limitations, as they are generated by browser problems. If we can't workaround them, then most probably no one can. |
or radio
button 
) looks like. You can even say when to
close the submenu and when not. For instance, we chosen
to close the “Preferences” popup if a check box is
clicked and the menu is in “electric” mode, and to leave
it open in “normal” mode.
