Responsive QuickMenu Documentation

If you do not find an answer to your question below, please contact support for additional help.


Responsive QuickMenu is a manually customizable widget. Any word / text editor that can save plain unformatted text can be used to customize your menu.

  • Windows: Use Nodepad (bundled with Windows) or a 3rd party app of your choosing.
  • Mac: Use SimpleText or TextEdit (bundled with Mac) or a 3rd party app of your choosing. If using TextEdit switch to plain text under 'Format' --> 'Make Plain Text'.

The Menu structure is customizable within each templates 'menu.html' file. The structure is built using a standard HTML unordered list wrapped in a NAV tag.

<nav class="qm qm_pure qm_drop">
	<ul class="qm_main">
		<li><a href="">Main Item 1</a></li>
		<li><a href="">Main Item 2</a>
			<ul class="qm_sub">
				<li><a href="">Sub Item 1</a></li>
				<li><a href="">Sub Item 2</a></li>
		<li><a href="">Main Item 3</div>

The sample structure above produces a simple menu with 3 main items and 1 sub menu attached to "Main Item 2". Create any combination of menu items and subs to suit your needs. Sub menus can be nested to any depth.

Required Class Names

The following class names must be applied for the menu to work correctly...

  • class="qm qm_pure qm_drop" - Add to the menus NAV tag.
  • class="qm_main" - Add to the main menus UL tag.
  • class="qm_sub" - Add to each sub menus UL tag.
Menu Items

Each menu items LI tag must contain one child tag of your choosing which will hold your custom content. Typically this is an anchor or div tag, but can be any valid tag you choose.

    <li><a href="">Menu Item Content</a></li>
    <li><div>Menu Item Content</div></li>
    <li>Menu Item Content</li>
Tip: Menu items can contain any custom HTML content and class names. Quickly create re-usable titles, headers, or dividers by referencing custom class names.

The look of the menu is styled from within each templates 'qm_customize.css' file. The CSS rules are grouped into three basic sections...

  1. 1 Global - Global rules apply to all menu modes (drop / fill).
  2. 2 Drop Down - Rules are applied when in desktop / drop down mode.
  3. 3 Fill - Rules are applied when in mobile fill / drill down mode.

The default rules apply to all menus on the page.

Targeting Specific Menus

To apply styles to a specific menu add a custom ID to the menus nav tag in the HTML...

<nav id="my_id">

Then target the ID by adding the menu id to the beginning of any css rule...

/* Drop Down Style - All Menu Items */
#my_id.qm_drop .qm_item>*:first-child {background-color:red}

In the above example only the menu with id=my_id will have red menu items, other menus on the page will recieve the default styling.

Vertically Oriented Main Menu

By default the drop down menus main items are horizontal... to stack them veritcally first add a custom ID to your menus nav tag...

<nav id="my_id">

Then add the following CSS rules to your menus css file and change the ids to match the id you added to your nav tag...

/* Vertically Stack Main Items */
#my_id.qm_drop .qm_main>li {float:none;} 
#my_id.qm_drop .qm_main>li>.qm_sub {left:100%;top:0px;}
/* Menu Width */
#my_id.qm_drop .qm_main {width:180px;}

Menu settings are applied as attributes on the NAV tag and other tags that makeup the menu structure. Open a templates 'menu.html' file to edit the menu settings.

Fill / Drill Down Settings

The 'fillOptions' property is an object of properties that define settings for the fill / drill down menu mode and is applied to the menus NAV tag...

<nav data-qm="{fillOptions:{visibleRows:8, fitFont:true}}">
'fillOptions' properties...
  • visibleRows - int (max number of visible rows, menus with more than max will be scrollable)
  • fitFont - true or false (when true font sizes will be maximized to fit the avaialble space on all devices)
Menu Structure Settings

The following settings can be applied to the root UL tag of a menu structure...

<ul data-qm="{interaction:{type:'web', show:'hover', hide:'hover'}, delay:{show:250, hide:250}}">
'interaction' Properties...
  • type - Set to 'web', 'system', or 'context'.
    • 'web' - Interaction functions as as a standard drop down menu for the web.
    • 'system' - Interaction functions similar to an applications file system menu.
    • 'context' - Interaction functions similar to a right click context menu.
  • show - Set to 'hover' or 'click'.
  • hide - Set to 'hover' or 'click'.
'delay' Properties...
  • show - Time in milliseconds (1/1000 second) before menus show.
  • hide - Time in milliseconds (1/1000 second) before menus hide.

QuickMenu can respond to devices with unique CSS styles, menu structures, menu items, and menu modes (drop down or fill style drill down). The response types define the device viewing your menu based on a standard CSS media query.

The default response definitions are shown below, these can be customized in any way to suit your specific site requirements. The response type script should be added to your document head directly after the calls to the QuickMenu supporting files.

<script type="text/javascript">
//custom response types, add as many as you need.
OC.navManager.responses.types = {
	small_device:{menuStyle:'fill', matchMedia:"(max-device-width:767px) or (-webkit-min-device-pixel-ratio:1.3) or (-o-min-device-pixel-ratio:13/10) or (min-resolution:120dpi)"},
	large_device:{menuStyle:'drop', matchMedia:"all"}

Add any number of response types you require (the names are up to you, the default names are large_device and small_device). The first type that matches is applied.

NOTE: Make sure to add a comma at the end of each response type line except for the last one. If commas are not seperating each response type line, JavaScript errors will occur and the menu will not function.

Response Type Properties...

  • menuStyle - Set to 'drop' or 'fill' (drop = standard drop down menu, fill = fill style drill down menu)
  • matchMedia - Set to any standard media query string as used in CSS. Below are some common settings for the matchMedia property...
    • all - Match all media. - Example: "all"
    • min-width - The minimum width of the browsers viewport. - Example: "(min-width: 500px)"
    • max-width - The maximum width of the browsers viewport. - Example: "(max-width: 499px)"
    • min-device-width - The minimum width of the devices display. - Example: "(min-device-width: 768px)"
    • max-device-width - The maximum width of the devices display. - Example: "(max-device-width: 767px)"
    • orientation - The orientation of the device, set to 'landscape' or 'portrait'. - Example: "(orientation: portrait)"
    • -webkit-min-device-pixel-ratio - Numeric pixel density for chrome, safari, winows mobile, and more. A device pixel density of 1.3 or greater is used on most mobile devices. - Example: "(-webkit-min-device-pixel-ratio: 1.3)"
    • -webkit-min-device-pixel-ratio - Pixel density expressed as a fraction for opera, a device pixel density of 13/10 or greater is used on most mobile devices. - Example: "(-o-min-device-pixel-ratio: 13/10)"
    • min-resolution - Numeric pixel density expressed in dpi. A device dpi of 120 or greater is used on most mobile devices. - Example: "(-min-resolution: 120dpi)"
CSS Style Responses

The response type names that match the device are applied to the menus NAV tag and prefixed with 'qmr_' as class names. Apply specific styles to a response type by adding the class to the beginning of any CSS rule.

Example of a uniqe sub menu color applied to all large_device response types...

/* large_device Sub Menu Items */
.qmr_large_device .qm_sub>li>*:first-child {color:#333;}

Example that hides all title menu items (a custom class you may have created) on small_device response types...

/* small_device Sub Menu Items */
.qmr_small_device .my_title {display:none;}
Menu Structure Responses

Within a menus NAV tag multiple menu structures can be defined and targeted to specific response types. To target a menu structure edit the 'respondTo' property on the structures root UL tag.

The default respondTo setting is 'all' and will apply to all response types.

<ul id="my_menu1" class="qm_main" data-qm="{respondTo:'all'}">

To target a specific response type such as 'large_device' set it accordingly...

<ul id="my_menu1" class="qm_main" data-qm="{respondTo:'large_device'}">

Targeting multiple response types...

<ul id="my_menu1" class="qm_main" data-qm="{respondTo:'large_device portrait_view'}">
'respondTo' Property Settings...
  • 'all' - Structure will be used with all response type matches.
  • 'custom_name' - Structure will be used when the custom type matches (separate multiple types with a space).
  • 'none'- Structure will only be used when none of the response types match.
Menu Item Responses

Individual menu items can be set too only display on specific menu types (drop down or fill style drill down). To target an item to a specific menu type add one of the following class names to the menu items LI tag.

  • class="qm_drop_only" - Only show the item when the menu is in drop down mode.
  • class="qm_fill_only" - Only show the item when the menu is in fill / drill down mode.

Example of how to show a menu item when in drop down mode only...

<li class="qm_drop_only"><a href="">My Menu Item Content</a></li>
NodeFire Animator
Create interactive CSS animation effects and widgets (banners, slideshows, drop down menus, text effects, 3D animations, layouts, and more).
New Responsive QuickMenu!
8/29/2015 - One menu, any device! Auto switches from drop down to drill down. (more...)
Follow us:
Copyright (c) 2015 - OpenCube Inc., All Right Reserved.