Responsive QuickMenu Documentation

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


Responsive QuickMenu can be published to any HTML document without conflict. The following types of hosted sites are supported...

  • Self Hosted - You have direct or FTP access to the server and can upload files and modify documents.
  • Online Service - Any hosting service that allows for the insertion of custom HTML. Most online web builders like WIX and shopping carts include such features.
Note: Use caution during the publishing process and follow all steps carefully. Missing files or incorrectly pasted code will likely break the menu or cause abnormal behavior.

Supporting Files

The following supporting files must be uploaded to your server and referenced correctly in the HEAD section of your HTML page for the menu to function...

  • qm_core.css - Contains the core CSS required for the menu to render and function. (DO NOT edit this file!)
  • qm_customize.css - Includes all your custom CSS styles which define the look of your menu.
  • qm.js - Contains the JavaScript required for advanced menu functionality. (DO NOT edit this file!)

Copy and pase the supporting file references below to your documents HEAD (between the opening and closing HEAD tags).

<!-- CSS & JavaScript -->
<link rel='stylesheet' type='text/css' href='qm_core.css' >
<link rel='stylesheet' type='text/css' href='qm_customize.css'>
<script type="text/javascript" src='qm.js'></script>

Change the file references as needed to match the location of the file on your server. For example, if you put 'qm.js' in a folder called 'scripts' and your document is in the root folder, you would change it to...

<script type="text/javascript" src='scripts/qm.js'></script>
Handling No Seperate File Support or Access

If you can't access or publish seperate files to your site you can alternatively include the code for the menu directly within your HTML.

Use the template below and paste the contents of the seperate files to each section. Paste the entire template to your documents HEAD or before the menu structure within the BODY.

<style type="text/css">
/* paste the contents of 'qm_core.css' here */

<style type="text/css">
/* paste the contents of 'qm_customize.css' here */

<script type="text/javascript">
/* paste the contents of 'qm.js' here */
Note: If you can't paste the code directly to your HEAD you can instead include the code above in your BODY HTML. Make sure the code is included before the menu structure!

Content / Menu Structure

The menu structure (the menus NAV tag and it's contents) needs to be included within your HTML at the location where you wish the menu to display. By default the menu is a relatively positioned element (similar to adding a DIV or Paragraph tag).

Copy the entire nav tag and contents from the template you are working with and paste it within HTML BODY tag at the desired location...

		<!--  Paste the menus NAV tag to the desired location within your HTML body. -->
Menu Width

The width of the menu will expand to fit it's container by default. To set a specific width, add a width style to the main container in the 'qm_customize.css' file.

/* Main Container */
.qm_main {width:600px;}
Menu Height

The height of most template menus is dictated by the main items font sizing or other content you include. You can set a fixed height for the items in the'qm_customize.css' file.

/* Main Items */
.qm_main>li>*:first-child {height:80px;}
Centering The Menu

To horizontally center the menu, add the menu to a DIV with a fixed width and the margins set to auto...

<div style="position:relative;margin:auto;width:600px;">
	<!--  Your Menu Here -->

Responsive Settings

The responsive settings only need to be published if they were modified. The responsive settings are published as a JavaScript tag directly to the HEAD, or you can optionally add them to a seperate .js file.

Add the response type settings directly after the menus supporting file references...

<!-- CSS & JavaScript -->
<link rel='stylesheet' type='text/css' href='qm_core.css' >
<link rel='stylesheet' type='text/css' href='qm_customize.css'>
<script type="text/javascript" src='qm.js'></script>

<!-- Response Types -->
<script type="text/javascript">
	OC.navManager.responses.types = {
		large_device:{menuStyle:'drop', matchMedia:"(min-width:768px)"},
		small_device:{menuStyle:'fill', matchMedia:"(max-width:767px)"},
		portrait_view:{menuStyle:'fill', matchMedia:"(orientation:portrait)"}

Mobile Viewport

The mobile viewport corrects display and interaction bugs on older android devices. Optionally add the META tag to your document HEAD if you experience issues with older android devices...

<meta name="viewport" content="width=device-width, initial-scale=1">
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.