QuickMenuQuickMenu add-ons are conditionally loaded JavaScript modules which provide
extended functionality and animation effects. Add-On's may be applied to any existing menu by pasting a simple script section in the head of your document.
Each add-on in this download is within its own folder and includes sample implementations of the add-on in action. View the source of these samples to directly view how the add-on's are implemented, or base your implementation on the sample itself.
Each add-on in this download is within its own folder and includes sample implementations of the add-on in action. View the source of these samples to directly view how the add-on's are implemented, or base your implementation on the sample itself.
Tree Menu
Converts standard QuickMenu drop downs to animated trees. Includes a self collapsing option, auto indenting, and more.
Includes support for all browsers except: Netscape 6 & 7.0 (limited functionality)
- Full Functionality for 7.1 & up, Safari 1.x (mains only), IE 5 Mac (mains only)
Noscript Support
This add-on allows for hierarchical access to all menu items in browsers with their JavaScript turned off.
Includes support for all browsers
Slide Animation Effect
Sub menus slide into view from the top or the left. Subs can optionally drop off screen on hide with custom accelerator settings giving a gravity effect. Includes support for all browsers except: Safari 1.x, Netscape 7.0 & down (7.1 & Up are supported), IE 5.x on Mac.
Merge Animation Effect
Two copies of each sub menu appear side by side or top to bottom with a custom transparency. The subs then move together to create a merge effect. Includes support for all browsers except: Safari 1.x, IE 5.x on Mac.
Zoom Animation Effect
Sub menu item text zooms from a start point to a mid point and to an end point. With a large mid point setting a pulse effect is achieved. Includes support for all browsers except: IE 5.x on Mac.
Gap Animation Effect
The gap effect reduces and increases the spacing between sub menu items to create a multi item animation transition. A range of settings allow for varied effect. Includes support for all browsers except: Safari 1.x, Netscape 7.0 & down (7.1 & Up are supported), IE 5.x on Mac.
- Items flying into position from above the menu.
- Items stretching down with a custom background image reveal.
- Items stretching up.
- Items expanding down and stretching the container.
- Items flying up when sub menus hide.
Breadcrumbs
Highlight settings mark the current pages location in the menu. Optional text paths with a home page option may be added anywhere within the document and are automatically updated by the add-on. Includes support for all browsers except: IE 5.x on Mac.
Image Based Menu Items
Create image based menu items with optional rollover and active states.
Over Select Tag Fix for IE 5 and 6
Bugs in pre IE7 do not allow for dynamic content to appear on top of select tags, this works around the issue allowing for sub menus to appear on top as intended.
Drop Shadow Effect
This add-on creates a drop shadow
effect under the sub menu containers. All aspects of the shadow are customizable, including offsets, colors, and opacity.
Item Shift Animations
Add shifting animation effects to
both the main and sub menu items. Shifts occur on mouse-over and may move in any direction. A reverse shift is applied on mouse-out. Includes support for all browsers except: Safari, Netscape 7.0 & down (7.1 & Up are supported), IE 5.x on Mac.
Tabs - Image Based
Create tabs of varied styles with a custom dividing image. Includes support for all browsers except: Netscape 7.0 & down (7.1 & Up are supported).
Tabs - CSS Based
Create tabs of varied styles without images. Includes support for all browsers except: Netscape 7.0 & down (7.1 & Up are supported).
Rounded Corners
Apply rounded corners to the sub menu containers. Corners are
CSS styled and do not use any images, all colors, sizing, styles, and corners are customizable. Includes support for all browsers.
Match Widths
Automatically match sub menu widths to the subs parent main menu items width.
Includes support for all browsers except: Netscape 6.
Item Enhancer
Fully CSS customizable content appears next to each item on hover. The content may include background images, colors, border, etc. All positioning is fully customizable.
Includes support for all browsers except: Netscape 6., IE 5 Mac, and Safari 1.x
Keyboard Access
Add full keyboard access to the menu. The structure may be navigated using the tab key or arrow keys.
Includes support for all browsers except: Netscape 6 (limited support) and Safari 1.x
Item Bullets
Add custom bullets to the left or right of the main menu and sub menu items. Specify all, parent, or non-parent placement. Includes rollover, and active image support.
Includes support for all browsers except: Netscape 6
Keep Subs In Window
This add-on keeps the sub menus within the windows dimensions. Supports all browsers.
There is a single section of code which needs to be added to the head of your document to apply an Add-On to an
existing menu. This code must appear directly after the call to the menus core JavaScript file (qm.js). First locate this section in your HTML document which contains the menu. Note: Some add-ons like image based items, do not require JavaScript and contain CSS settings only.
<!-- Core Menu Code -->
<script type="text/JavaScript" src="qm.js"></script>
...Paste Add-On Code Here
<script type="text/JavaScript" src="qm.js"></script>
...Paste Add-On Code Here
To paste the add-on code, view the source HTML of the sample document which shows the add-on in action. Copy the portion in red (do not copy from this document, use the actual HTML source in the add-on sample file you wish to use) and paste it as outlined above. The sample add-on code below is from the slide effect.
<!--%%%%%%%%%%%% QuickMenu JavaScript %%%%%%%%%%%*-->
<!-- Core Menu Code -->
<script type="text/JavaScript" src="qm.js"></script>
<!-- Add-On Core Code (Remove when not using any add-on's) -->
<style type="text/css">.qmfv{visibility:visible !important;}</style><script type="text/JavaScript">var qmad = new Object();qmad.bvis="";qmad.bhide="";</script>
<!-- Add-On Settings -->
<script type="text/JavaScript">
/*Menu 0 Settings*/
var a = qmad.qm0 = new Object();
a.slide_animation_frames = 20;
a.slide_accelerator = 1;
a.slide_left_right = false;
a.slide_sub_subs_left_right = true;
a.slide_offx = 0;
a.slide_offy = 1;
a.slide_drop_subs = true;
a.slide_drop_subs_height = 300;
a.slide_drop_subs_disappear = false;
</script>
<!-- Optional Add-On's (Must appear after core menu code) -->
<script type="text/JavaScript" src="qm_slide_effect.js"></script>
<!-- Core Menu Code -->
<script type="text/JavaScript" src="qm.js"></script>
<!-- Add-On Core Code (Remove when not using any add-on's) -->
<style type="text/css">.qmfv{visibility:visible !important;}</style><script type="text/JavaScript">var qmad = new Object();qmad.bvis="";qmad.bhide="";</script>
<!-- Add-On Settings -->
<script type="text/JavaScript">
/*Menu 0 Settings*/
var a = qmad.qm0 = new Object();
a.slide_animation_frames = 20;
a.slide_accelerator = 1;
a.slide_left_right = false;
a.slide_sub_subs_left_right = true;
a.slide_offx = 0;
a.slide_offy = 1;
a.slide_drop_subs = true;
a.slide_drop_subs_height = 300;
a.slide_drop_subs_disappear = false;
</script>
<!-- Optional Add-On's (Must appear after core menu code) -->
<script type="text/JavaScript" src="qm_slide_effect.js"></script>
Now copy the add-on's supporting JavaScript file (in this example the file is called qm_slide_effect.js) to a folder of your choosing within your website (typically the same folder as the qm.js file or the root). The third section of the code you pasted is the call to this file, if the file is not in the same folder as the html page you will need to adjust the file reference so the the browser can find the add-on JavaScript.
<!-- Optional Add-On's (Must appear after core menu code) -->
<script type="text/JavaScript" src="qm_slide_effect.js"></script>
<script type="text/JavaScript" src="qm_slide_effect.js"></script>
If you place the file in a sub folder called "scripts", you would change this reference to scripts/qm_slide_effect.js. After correctly referencing the JavaScript file the add-on will be applied to your menu.
You can add multiple add-on's to a single menu by appending additional add-on settings and JavaScript file
references to your HTML documents head. When applying multiple add-on's it is not necessary to duplicate the Add-On core code section. Below is a sample of how multiple add-on code should appear. This sample adds a slide effect to a merge effect, the added slide effect code is in red...
<!-- Add-On Core Code (Remove when not using any add-on's) -->
<style type="text/css">.qmfv{visibility:visible !important;}</style><script type="text/JavaScript">var qmad = new Object();qmad.bvis="";qmad.bhide="";</script>
<!-- Add-On Settings -->
<script type="text/JavaScript">
/*Menu 0 Settings*/
var a = qmad.qm0 = new Object();
a.merge_frames = 20;
a.merge_updown = false;
a.merge_sub_subs_updown = false;
a.slide_animation_frames = 20;
a.slide_accelerator = 1;
a.slide_left_right = false;
a.slide_sub_subs_left_right = false;
a.slide_offx = 0;
a.slide_offy = 1;
a.slide_drop_subs = true;
a.slide_drop_subs_height = 300;
a.slide_drop_subs_disappear = false;
</script>
<!-- Optional Add-On's (Must appear after core menu code) -->
<script type="text/JavaScript" src="qm_merge_effect.js"></script>
<script type="text/JavaScript" src="qm_slide_effect.js"></script>
<style type="text/css">.qmfv{visibility:visible !important;}</style><script type="text/JavaScript">var qmad = new Object();qmad.bvis="";qmad.bhide="";</script>
<!-- Add-On Settings -->
<script type="text/JavaScript">
/*Menu 0 Settings*/
var a = qmad.qm0 = new Object();
a.merge_frames = 20;
a.merge_updown = false;
a.merge_sub_subs_updown = false;
a.slide_animation_frames = 20;
a.slide_accelerator = 1;
a.slide_left_right = false;
a.slide_sub_subs_left_right = false;
a.slide_offx = 0;
a.slide_offy = 1;
a.slide_drop_subs = true;
a.slide_drop_subs_height = 300;
a.slide_drop_subs_disappear = false;
</script>
<!-- Optional Add-On's (Must appear after core menu code) -->
<script type="text/JavaScript" src="qm_merge_effect.js"></script>
<script type="text/JavaScript" src="qm_slide_effect.js"></script>
You can view this combined effect directly in add-ons/multiple add-ons, or click
here.
If your document contains multiple menus you can apply different add-ons to each menu or a single add-on to multiple menus with varied or similar settings. In the settings section for your add-on is a statement which identifies which menu or menus the add-on should be applied to. View the add-on code in the head of the following samples to see first-hand how to set up for multiple menus.
- Different add-on's for each menu.
- Single add-on with the same settings for each menu.
- Single add-on with different settings for each menu.