QuickMenu is based on a new menu concept which was conceived and developed by OpenCube. Originally menus were DHTML based and typically to complicated and heavy to be viable solutions for most web sites. Pure CSS menu concepts emerged with the advent of FireFox and other CSS2 browsers and offered a significantly streamlined approach, however design capabilities, true scalability, and IE6 support were lacking. While pure CSS menus are gaining popularity, their limitations have kept DHTML menus as the preferred menu type for most web sites.

QuickMenu is a Div-A Hybrid menu and represents the next evolutionary step in the web based menu system. Concepts unique to the menu include...

The biggest improvement over the UL / LI based pure CSS menus is scalability. With a CSS menu you must define either the width of the menu items or the width of the containers. With QuickMenu's Div-A, all widths are truly scaleable to the size of the text within the items and containers. The new Div-A structure is also lighter and easier to work with...

Above is a sample of QuickMenu's Div-A structure, it's an HTML structure for the menu items in the simplest form possible. Notice that the DIV's which define sub menu containers sit as siblings to the a tags, similar to an XML menu structure, in a pure CSS menu they would be UL tags nested within LI tags. The CSS UL / LI solution makes sense for running menus in IE7 and other CSS2 browsers without JavaScript, but in reality very few sites actually employ a no-script menu. The reason for this is that full customizability and user control enhancement via delay timers is just not possible with CSS alone, plus IE6 does not support the pure CSS solution.

With script support being required why deal with the scalability, user control, and typical clunkiness of pure CSS. QuickMenu's Div-A still supports fully customized main menus, hover styles, and linking with its JavaScript removed, plus it's truly scaleable, offers delay timers for user control, full cross-browser support, and a more friendly structure to work with.

Div-A Hybrid also works in an incredably small footprint, script size is 2K for the entire menu, this small size combined with minimal CSS and a streamlined structure puts the total menu weight right on par with Pure CSS. Like CSS, load speed is instantaneous and happens inline, while interactivity is faster than deeper nested Pure CSS solutions.

This evaluation download is fully functional, it's the complete product and may be tested on and in your web site. If you access the menu via http:// you will get a pop up purchase reminder message, click 'OK', and continue to test, customize, and use the menu.

If you decide to purchase the menu, an unlock code will be provided which must be added to the menus script file, the code will remove the purchase reminder. The unlock mechanism is 100% client side with no outside connections, it's a simple script based unlock with zero added overhead.

**NOTE: You will not have to re-do your menu after purchasing, this download will be activated by the unlock code.

Welcome to QuickMenu! This documentation will cover the basic principals of designing and working with QuickMenu. It's assumed that the reader already has basic CSS knowledge and understands how to work with typical style setting such as background-color, padding, margin values, etc. It's also assumed that the reader understands basic HTML tags and knows how to place or add tags to a document manually.

Open qm.html in a plain text editor to start customizing the menu. This file is a template menu and is what you will base your design on, all customizable options are contained within the source HTML. To view your changes, simultaneously open the file in your browser and use the refresh button to update the menu after changing styles and saving your work in the text editor.

To change the structure and items...

There are almost no limitations with QuickMenu, the structure may have any inline styles or class names you wish added to both the items and container to create a specific look for certain areas of the menu. Make sure your custom styles for individual items do not include position, display, or float settings, stick to formatting styles only. The A tags may also have any valid markup added to them as well as target or title attribute options.

To change the style and looks of the menu...

The QuickMenu code is in two sections, the first section is in the head and contains a reference to the script and your menus CSS styles. The second section appears in the body of the HTML page at the point were you wish the menu to appear and contains the structure and a JavaScript call to create the menu.

For full validation the script reference to qm.js and the CSS should appear in the head, however the menu will work if these are placed in the body above the structure.

The structure is positioned in your document body at the point you wish the menu to display. It should be placed in a DIV, TABLE, or similar block level element. Your containing element needs to have enough space to accommodate your menu or the main items may wrap to the next line. It may be helpful, depending on your layout, to add a fixed width large enough to accommodate the menu (style="width:Npx") to your containing element. The main container is a position relative div and display within your document as a block level element.

You can optimize your page by moving the JavaScript call which creates the menu "<script type="text/JavaScript">qm_create(0,false)</script>". If placed directly before your closing body tag the page will load first, and the menu will render last. If left directly after the structure, the menu will render inline with the structure. We recommend moving the call to the end of the body if you are using a very large menu structure. *Note: The JavaScript call will not work if positioned before the menu, it must appear after the menus structure.

The main menu may be switched from vertical to horizontal by changing the false statement in the create menu call to true.

<script type="text/JavaScript">qm_create(0,false)</script>

There is also a section which should be uncommented at the top of the CSS styles. Its the first option in the style section, and if uncommented will allow the mains to be vertically oriented in browsers without their JavaScript turned on.

You can add multiple menus to a single page. To do this add a second structure to your page, change the id in the opening div of the structure to "qm1".

Next add a new JavaScript menu create function below the new structure, change the id in the create menu call to match the id above.



You can individually style the second menu by adding additional CSS to the menu styles section. Change the id on each new style section to match the new menu.



You can optionaly force all menus on the page to use the same styles by changing the "#qm0" id references for any of the style options to the global class reference ".qmmc".

• IE6 will not allow the sub menus to appear on top of drop down lists (select tags). A select tag fix add-on is included in this download. IE7 fixes this issue.
• Second level sub menu containers will not stretch to surround the items in Netscape 7, unless you define a width for the container. To define a width, add a style="width:10em" statement to the DIV tag for the sub menu container in the menus structure.
• Because QuickMenu is truly scaleable, it does not use dimensions to define widths, depending on your layout this may cause the main menu or sub menus to crunch up. This is true for any scaleable content and typically happens if the menu hits a dimensional boundary in your HTML page, to overcome this you must add fixed widths to the containers within the structure, or alter your HTML pages containing elements to accommodate the width of the menu.
• Placing a horizontal menu in a table without dimensions in Safari 1.x will cause the main menu items to wrap. Safari 2.x works correctly. To fix the issue for Safari 1.x, give your table or menu a 100%, or fixed width.

• IE 5*,6,7
• FireFox 1, 2
• Mozilla 1.x
• Netscape 6, 7, 8
• Opera 7, 8, 9
• Safari 1, 2
• Konqueror 3
• K-Melon (All)

• The main container is a position relative div and will stretch to the width of its containing element in your page. To make the container fit the width of the menu items, place your menu in a table with no dimensions or set a fixed width for the menu that matches the width of your items plus container padding and borders. *Note: Quarks in Safari 1.x will make horizontal menus wrap when in a dimensionless container. Safari 2.x works as expected.
• You can offset the main menu container by settings a top and left style property in the main container style settings section.
• To customize the look of an individual menu item or container, add an inline style to the items tag. (style="font-size:2em")
• The menus structure may be dynamically server side or client side generated in any way you see fit.
• You can optionally call the qm_create function with the document body's onload event, this may be useful if you are dynamically changing the menu structure in the DOM.
• The qm_create function may be optionally called from your scripts, if you use the DOM to change the menu structure, calling qm_create after the modifications will refresh the menu.
• To gain true scalability in IE6 and IE7, use 'em' units to define the size of your text. This will allow the text size to adjust if the user changes the default font size for their browser.
• You can add custom events and JavaScript to any item in the structure. QuickMenu does hog the onmouseover event for all A tags, however you can still use AddEventListner and AttachEvent.

• font-size:1em;  (use px, em, ex, etc...)
• font-weight:normal;  (normal, bold, lighter, bolder)
• font-family:Arial;  (any valid system font)
• text-decoration:underline; (none, underline, overline, line-through, blink)
• text-align:left; (left, center, right)
• line-height:1em; (use px, em, ex, etc...)
• color:#ff0000; (hex value or color name [red,blue,etc.])
• background-color:#ff0000; (hex value or color name [red,blue,etc.])
• border-style:solid; (dotted,dashed,solid,double,groove,ridge,inset)
• border-width:1px 1px 1px 1px; (top, right, bottom, left)
• border-color:#000000; (hex value or color name [red,blue,etc.])
• margin-width:#5px 5px 5px 5px; (top, right, bottom, left)
• padding-width:#5px 5px 5px 5px; (top, right, bottom, left)
• background-image:url(myimage.gif);
• background-position:center center; (combine: center left right - or use units, e.g. 95%)
• background-repeat:no-repeate; (repeat, no-repeat)
• height:20px; (use px, em, ex, etc...)
• width:20px; (use px, em, ex, etc...)