moi65
2/15/2015 - 5:02 PM
Multi-Level Push Menu v2.1.4 Multi-Level Push Menu, jQuery plug-in // source http://jsbin.com/vubewi
Multi-Level Push Menu v2.1.4
Multi-Level Push Menu, jQuery plug-in
// source http://jsbin.com/vubewi
/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
* Known issue: no IE 6 support.
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/**
* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-size: 100%; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Address `font-family` inconsistency between `textarea` and other form
* elements.
*/
html,
button,
input,
select,
textarea {
font-family: sans-serif;
}
/**
* Address margins handled incorrectly in IE 6/7.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/**
* Address font sizes and margins set differently in IE 6/7.
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
* and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
font-size: 1em;
margin: 1.33em 0;
}
h5 {
font-size: 0.83em;
margin: 1.67em 0;
}
h6 {
font-size: 0.67em;
margin: 2.33em 0;
}
/**
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
blockquote {
margin: 1em 40px;
}
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address differences between Firefox and other browsers.
* Known issue: no IE 6/7 normalization.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Address styling not present in IE 6/7/8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address margins set differently in IE 6/7.
*/
p,
pre {
margin: 1em 0;
}
/**
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/**
* Address CSS quotes not supported in IE 6/7.
*/
q {
quotes: none;
}
/**
* Address `quotes` property not supported in Safari 4.
*/
q:before,
q:after {
content: '';
content: none;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Lists
========================================================================== */
/**
* Address margins set differently in IE 6/7.
*/
dl,
menu,
ol,
ul {
margin: 1em 0;
}
dd {
margin: 0 0 0 40px;
}
/**
* Address paddings set differently in IE 6/7.
*/
menu,
ol,
ul {
padding: 0 0 0 40px;
}
/**
* Correct list images handled incorrectly in IE 7.
*/
nav ul,
nav ol {
list-style: none;
list-style-image: none;
}
/* ==========================================================================
Embedded content
========================================================================== */
/**
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improve image quality when scaled in IE 7.
*/
img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
}
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/**
* Correct margin displayed oddly in IE 6/7.
*/
form {
margin: 0;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct color not being inherited in IE 6/7/8/9.
* 2. Correct text not wrapping in Firefox 3.
* 3. Correct alignment displayed oddly in IE 6/7.
*/
legend {
border: 0; /* 1 */
padding: 0;
white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */
}
/**
* 1. Correct font size not being inherited in all browsers.
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
* and Chrome.
* 3. Improve appearance and consistency in all browsers.
*/
button,
input,
select,
textarea {
font-size: 100%; /* 1 */
margin: 0; /* 2 */
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
}
/**
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
*overflow: visible; /* 4 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1. Address box sizing set to content-box in IE 8/9.
* 2. Remove excess padding in IE 8/9.
* 3. Remove excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
*height: 13px; /* 3 */
*width: 13px; /* 3 */
}
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Remove inner padding and border in Firefox 3+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
html {
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/
audio,
canvas,
img,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browse Happy prompt
========================================================================== */
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
body {
font-family: 'Open Sans Condensed', sans-serif !important;
font-size: 1.2em !important;
padding-top: 70px;
}
h1, h2, h3 {
font-family: inherit !important;
}
button, input, select, textarea {
font-family: inherit !important;
}
.dropdown-menu {
font-size: inherit !important;
}
.prettyprint {
font-size: .8em !important;
}
.twitter-share-button {
margin-top: 15px;
}
.video-js {
background-color: #fff;
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Multi-Level Push Menu v2.1.4</title>
<meta name="description" content="Multi-Level Push Menu, jQuery plug-in">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link href="http://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="http://oss.maxcdn.com/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="http://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<style id="jsbin-css">
/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
* Known issue: no IE 6 support.
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/**
* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-size: 100%; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Address `font-family` inconsistency between `textarea` and other form
* elements.
*/
html,
button,
input,
select,
textarea {
font-family: sans-serif;
}
/**
* Address margins handled incorrectly in IE 6/7.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/**
* Address font sizes and margins set differently in IE 6/7.
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
* and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
font-size: 1em;
margin: 1.33em 0;
}
h5 {
font-size: 0.83em;
margin: 1.67em 0;
}
h6 {
font-size: 0.67em;
margin: 2.33em 0;
}
/**
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
blockquote {
margin: 1em 40px;
}
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address differences between Firefox and other browsers.
* Known issue: no IE 6/7 normalization.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Address styling not present in IE 6/7/8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address margins set differently in IE 6/7.
*/
p,
pre {
margin: 1em 0;
}
/**
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/**
* Address CSS quotes not supported in IE 6/7.
*/
q {
quotes: none;
}
/**
* Address `quotes` property not supported in Safari 4.
*/
q:before,
q:after {
content: '';
content: none;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Lists
========================================================================== */
/**
* Address margins set differently in IE 6/7.
*/
dl,
menu,
ol,
ul {
margin: 1em 0;
}
dd {
margin: 0 0 0 40px;
}
/**
* Address paddings set differently in IE 6/7.
*/
menu,
ol,
ul {
padding: 0 0 0 40px;
}
/**
* Correct list images handled incorrectly in IE 7.
*/
nav ul,
nav ol {
list-style: none;
list-style-image: none;
}
/* ==========================================================================
Embedded content
========================================================================== */
/**
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improve image quality when scaled in IE 7.
*/
img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
}
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/**
* Correct margin displayed oddly in IE 6/7.
*/
form {
margin: 0;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct color not being inherited in IE 6/7/8/9.
* 2. Correct text not wrapping in Firefox 3.
* 3. Correct alignment displayed oddly in IE 6/7.
*/
legend {
border: 0; /* 1 */
padding: 0;
white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */
}
/**
* 1. Correct font size not being inherited in all browsers.
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
* and Chrome.
* 3. Improve appearance and consistency in all browsers.
*/
button,
input,
select,
textarea {
font-size: 100%; /* 1 */
margin: 0; /* 2 */
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
}
/**
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
*overflow: visible; /* 4 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1. Address box sizing set to content-box in IE 8/9.
* 2. Remove excess padding in IE 8/9.
* 3. Remove excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
*height: 13px; /* 3 */
*width: 13px; /* 3 */
}
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Remove inner padding and border in Firefox 3+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
html {
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/
audio,
canvas,
img,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browse Happy prompt
========================================================================== */
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
body {
font-family: 'Open Sans Condensed', sans-serif !important;
font-size: 1.2em !important;
padding-top: 70px;
}
h1, h2, h3 {
font-family: inherit !important;
}
button, input, select, textarea {
font-family: inherit !important;
}
.dropdown-menu {
font-size: inherit !important;
}
.prettyprint {
font-size: .8em !important;
}
.twitter-share-button {
margin-top: 15px;
}
.video-js {
background-color: #fff;
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand scroller" href="#home"><strong><i class="fa fa-home"></i></strong></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a class="scroller" href="#home">Home</a></li>
<li><a class="scroller" href="#features">Features</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Usage<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a class="scroller" href="#includecss">Include the CSS</a></li>
<li><a class="scroller" href="#includejs">Include the JS</a></li>
<li><a class="scroller" href="#htmlmarkup">HTML Markup</a></li>
<li class="divider"></li>
<li><a class="scroller" href="#jsmarkup">JS Array <small>(instead HTML markup)</small></a></li>
<li class="divider"></li>
<li><a class="scroller" href="#initialize">Initialize</a></li>
</ul>
</li>
<li><a class="scroller" href="#options">Options</a></li>
<li><a class="scroller" href="#methods">Methods</a></li>
<li><a class="scroller" href="#events">Events</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Examples<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a class="scroller" href="#examplebasichtml">Basic <small>(HTML Markup)</small></a></li>
<li><a class="scroller" href="#examplecovermode">Cover mode</a></li>
<li><a class="scroller" href="#examplefullexpandcollapse">Full menu collapse</a></li>
<li><a class="scroller" href="#exampleresponsive">Responsive menu</a></li>
<li><a class="scroller" href="#examplecollapsed">Initialize collapsed</a></li>
<li><a class="scroller" href="#examplertl">Right-to-left sliding</a></li>
<li><a class="scroller" href="#examplecustomsize">Custom size</a></li>
<li><a class="scroller" href="#examplepushmany">Push many containers</a></li>
<li class="divider"></li>
<li><a class="scroller" href="#exampleoptions">Get/Set options</a></li>
<li><a class="scroller" href="#exampleexpandcollapse">Expand/Collapse options</a></li>
<li class="divider"></li>
<li><a class="scroller" href="#exampleaddremove">Add/Remove items</a></li>
<li class="divider"></li>
<li><a class="scroller" href="#exampleevents">Events</a></li>
<li class="divider"></li>
<li><a class="scroller" href="#examplebasicjs">Basic <small>(JS Array)</small></a></li>
</ul>
</li>
<li><a class="scroller" href="#license">License</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a><iframe src="http://ghbtns.com/github-btn.html?user=adgsm&repo=multi-level-push-menu&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe></a></li>
<li><a><iframe src="http://ghbtns.com/github-btn.html?user=adgsm&repo=multi-level-push-menu&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="165" height="20"></iframe></a></li>
<li><a href="https://twitter.com/share" class="twitter-share-button" data-via="mdzunic" data-count="none" data-hashtags="multilevelpushmenu,jquery">Tweet</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container" id="home">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Multi-level push menu v2.1.4</h1>
<p>Multi-level push menu is cross-browser compatible jQuery plug-in allowing endless nesting of navigation elements.</p>
<p>Following basic, lightweight release v1, version v2 brings number of
exposed plug-in methods (<a class="scroller" href="#methods"><i>NEW! Redraw, Visible menus, Hidden menus, Propagate events</i></a>), options (<a class="scroller" href="#examplefullexpandcollapse"><i>NEW! Full menu collapse</i></a>) and events/callbacks (<a class="scroller" href="#events"><i>onMenuReady and onMenuSwipe added</i></a>). Release v2 now supports native mobile events. (<a class="scroller" href="#video"><i>NEW! Expand/Collapse navigation with a left/right swipe gesture</i></a>)</p>
<p>
<a class="btn btn-lg btn-primary" href="http://github.com/adgsm/multi-level-push-menu" role="button">Fork on GitHub <i class="fa fa-github"></i></a>
<a class="btn btn-lg btn-info" href="download/MultiLevelPushMenu_v2.1.4.zip" role="button">Download v2 <i class="fa fa-download"></i></a>
<a class="btn btn-lg btn-info" href="download/MultiLevelPushMenu_v1.0.0.zip" role="button">Download v1 <i class="fa fa-download"></i></a>
<div class="btn-group">
<button type="button" class="btn btn-lg btn-success">Watch Demo</button>
<button type="button" class="btn btn-lg btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a target="_blank" href="demo/basichtml/basichtml.html">Basic <small>(HTML Markup)</small></a></li>
<li><a target="_blank" href="demo/covermode/covermode.html">Cover mode</a></li>
<li><a target="_blank" href="demo/fullexpandcollapse/fullexpandcollapse.html">Full Collapse</a></li>
<li><a target="_blank" href="demo/responsive/responsive.html">Responsive menu</a></li>
<li><a target="_blank" href="demo/collapsed/collapsed.html">Initialize collapsed</a></li>
<li><a target="_blank" href="demo/rtl/rtl.html">Rigth-to-left sliding</a></li>
<li><a target="_blank" href="demo/customsize/customsize.html">Custom size</a></li>
<li><a target="_blank" href="demo/pushmany/pushmany.html">Push many containers</a></li>
<li class="divider"></li>
<li><a target="_blank" href="demo/options/options.html">Get/Set options</a></li>
<li><a target="_blank" href="demo/expandcollapse/expandcollapse.html">Expand/Collapse options</a></li>
<li class="divider"></li>
<li><a target="_blank" href="demo/addremove/addremove.html">Add/Remove items</a></li>
<li class="divider"></li>
<li><a target="_blank" href="demo/events/events.html">Events</a></li>
<li class="divider"></li>
<li><a target="_blank" href="demo/bootstrap/bootstrap_integration.html">Bootstrap integration</a></li>
<li><a target="_blank" href="demo/basicjs/basicjs.html">Basic <small>(JS Array)</small></a></li>
</ul>
</div>
</p>
</div>
<p>This jQuery plugin is inspired by <a href="http://tympanus.net/codrops/2013/08/13/multi-level-push-menu/" target="_blank">Codrops</a> MultiLevelPushMenu but unlike it not relaying on CSS 3D Transforms and therefore functional in older browsers too (i.e. IE 8).</p>
<hr />
<div id="features">
<div class="row featurette">
<div class="col-md-7">
<h2>Features</h2>
<ul>
<li>Multi-level menu support</li>
<li>Endless nesting of navigation elements</li>
<li>Expand/Collapse navigation with a left/right <a class="scroller" href="#video">swipe gesture</a></li>
<li>Push/Slide DOM elements of choice</li>
<li>Left-to-right and Right-to-left sliding directions</li>
<li>Flexible, simple markup</li>
<li>JS Array input, as HTML markup replacement</li>
<li>A number of exposed Options (<a class="scroller" href="#options"><i>1 NEW!</i> added</a>), Methods (<a class="scroller" href="#exampleaddremove"><i>3 NEW!</i> added</a>) and Events</li>
<li>Cross-browser compatibility
<ul>
<li>Chrome</li>
<li>Midori</li>
<li>Firefox</li>
<li>Safari</li>
<li>IE8+</li>
<li>Opera 12.16</li>
<li>Android Browser 4.1.2</li>
<li>iOS Safari 7.0.1</li>
</ul></li>
</ul>
</div>
<div class="col-md-5">
<a href="demo/basichtml/basichtml.html" target="_blank"><img class="featurette-image img-responsive" data-src="holder.js/407x541/auto" alt="example" src="img/menu.png"></a>
</div>
</div>
</div>
<hr />
<div id="video">
<h2>Video</h2>
<p>Swiping menus is also supported on desktops using mouse events, but it's more natural to be used on touch devices.
<br /><small>(video could be a bit choppy; for real experience open demo pages using your touch enabled device)</small></p>
<video id="multilevelpushmenu" class="video-js vjs-default-skin" controls preload="auto" width="758" height="494" poster="download/jQuery.multilevelpushmenu.png" data-setup='{}'>
<source src="download/jQuery.multilevelpushmenu.webm" type='video/webm' />
<source src="download/jQuery.multilevelpushmenu.mov" type='video/quicktime' />
<source src="download/jQuery.multilevelpushmenu.mp4" type='video/mp4' />
<source src="download/jQuery.multilevelpushmenu.ogv" type='video/ogg' />
</video>
</video>
</div>
<hr />
<div id="usage">
<h2>Usage</h2>
<h3 id="includecss">Include the CSS</h3>
<p>"multilevelpushmenu.css" can be modified to fit website design.</p>
<p>FontAvesome (icons)</p>
<pre class="prettyprint"><code><link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css"></code></pre>
<p>Font I like (use any other you like)</p>
<pre class="prettyprint"><code><link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'></code></pre>
<p>Multi-Level-Push-Menu</p>
<pre class="prettyprint"><code><link rel="stylesheet" href="multilevelpushmenu.css" /></code></pre>
<h3 id="includejs">Include the JS</h3>
<p>jQuery</p>
<pre class="prettyprint"><code><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script></code></pre>
<p>Modernizr (needed for IE8)</p>
<pre class="prettyprint"><code><script src="http://oss.maxcdn.com/libs/modernizr/2.6.2/modernizr.min.js"></script></code></pre>
<p>Multi-Level-Push-Menu</p>
<pre class="prettyprint"><code><script src="jquery.multilevelpushmenu.min.js></script></code></pre>
<h3 id="htmlmarkup">HTML Markup</h3>
<p>Copy HTML markup below to create menu with exacty the same items like shown in Demo.</p>
<pre class="prettyprint"><code><div id="menu">
<nav>
<h2><i class="fa fa-reorder"></i>All Categories</h2>
<ul>
<li>
<a href="#"><i class="fa fa-laptop"></i>Devices</a>
<h2><i class="fa fa-laptop"></i>Devices</h2>
<ul>
<li>
<a href="#"><i class="fa fa-phone"></i>Mobile Phones</a>
<h2><i class="fa fa-phone"></i>Mobile Phones</h2>
<ul>
<li>
<a href="#">Super Smart Phone</a>
</li>
<li>
<a href="#">Thin Magic Mobile</a>
</li>
<li>
<a href="#">Performance Crusher</a>
</li>
<li>
<a href="#">Futuristic Experience</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-desktop"></i>Televisions</a>
<h2><i class="fa fa-desktop"></i>Televisions</h2>
<ul>
<li>
<a href="#">Flat Super Screen</a>
</li>
<li>
<a href="#">Gigantic LED</a>
</li>
<li>
<a href="#">Power Eater</a>
</li>
<li>
<a href="#">3D Experience</a>
</li>
<li>
<a href="#">Classic Comfort</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-camera-retro"></i>Cameras</a>
<h2><i class="fa fa-camera-retro"></i>Cameras</h2>
<ul>
<li>
<a href="#">Smart Shot</a>
</li>
<li>
<a href="#">Power Shooter</a>
</li>
<li>
<a href="#">Easy Photo Maker</a>
</li>
<li>
<a href="#">Super Pixel</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-book"></i>Magazines</a>
<h2><i class="fa fa-book"></i>Magazines</h2>
<ul>
<li>
<a href="#">National Geographics</a>
</li>
<li>
<a href="#">The Spectator</a>
</li>
<li>
<a href="#">Rambler</a>
</li>
<li>
<a href="#">Physics World</a>
</li>
<li>
<a href="#">The New Scientist</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-shopping-cart"></i>Store</a>
<h2><i class="fa fa-shopping-cart"></i>Store</h2>
<ul>
<li>
<a href="#"><i class="fa fa-tags"></i>Clothes</a>
<h2><i class="fa fa-tags"></i>Clothes</h2>
<ul>
<li>
<a href="#"><i class="fa fa-female"></i>Women's Clothing</a>
<h2><i class="fa fa-female"></i>Women's Clothing</h2>
<ul>
<li>
<a href="#">Tops</a>
</li>
<li>
<a href="#">Dresses</a>
</li>
<li>
<a href="#">Trousers</a>
</li>
<li>
<a href="#">Shoes</a>
</li>
<li>
<a href="#">Sale</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-male"></i>Men's Clothing</a>
<h2><i class="fa fa-male"></i>Men's Clothing</h2>
<ul>
<li>
<a href="#">Shirts</a>
</li>
<li>
<a href="#">Trousers</a>
</li>
<li>
<a href="#">Shoes</a>
</li>
<li>
<a href="#">Sale</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Jewelry</a>
</li>
<li>
<a href="#">Music</a>
</li>
<li>
<a href="#">Grocery</a>
</li>
</ul>
</li>
<li>
<a href="#">Collections</a>
</li>
<li>
<a href="#">Credits</a>
</li>
</ul>
</nav>
</div></code></pre>
<h3 id="jsmarkup">JS Array <small>(instead HTML Markup)</small></h3>
<p>You can use JS Array instead of above HTML markup.</p>
<pre class="prettyprint"><code><script>
var arrMenu = [
{
title: 'All Categories',
id: 'menuID',
icon: 'fa fa-reorder',
items: [
{
name: 'Devices',
id: 'itemID',
icon: 'fa fa-laptop',
link: '#',
items: [
{
title: 'Devices',
icon: 'fa fa-laptop',
items: [
{
name: 'Mobile Phones',
icon: 'fa fa-phone',
link: '#',
items: [
{
title: 'Mobile Phones',
icon: 'fa fa-phone',
link: '#',
items: [
{
name: 'Super Smart Phone',
link: '#'
},
{
name: 'Thin Magic Mobile',
link: '#'
},
{
name: 'Performance Crusher',
link: '#'
},
{
name: 'Futuristic Experience',
link: '#'
}
]
}
]
},
{
name: 'Televisions',
icon: 'fa fa-desktop',
link: '#',
items: [
{
title: 'Televisions',
icon: 'fa fa-desktop',
link: '#',
items: [
{
name: 'Flat Super Screen',
link: '#'
},
{
name: 'Gigantic LED',
link: '#'
},
{
name: 'Power Eater',
link: '#'
},
{
name: '3D Experience',
link: '#'
},
{
name: 'Classic Comfort',
link: '#'
}
]
}
]
},
{
name: 'Cameras',
icon: 'fa fa-camera-retro',
link: '#',
items: [
{
title: 'Cameras',
icon: 'fa fa-camera-retro',
link: '#',
items: [
{
name: 'Smart Shot',
link: '#'
},
{
name: 'Power Shooter',
link: '#'
},
{
name: 'Easy Photo Maker',
link: '#'
},
{
name: 'Super Pixel',
link: '#'
}
]
}
]
}
]
}
]
},
{
name: 'Magazines',
icon: 'fa fa-book',
link: '#',
items: [
{
title: 'Magazines',
icon: 'fa fa-book',
items: [
{
name: 'National Geographics',
link: '#'
},
{
name: 'Scientific American',
link: '#'
},
{
name: 'The Spectator',
link: '#'
},
{
name: 'Rambler',
link: '#'
},
{
name: 'Physics World',
link: '#'
},
{
name: 'The New Scientist',
link: '#'
}
]
}
]
},
{
name: 'Store',
icon: 'fa fa-shopping-cart',
link: '#',
items: [
{
title: 'Store',
icon: 'fa fa-shopping-cart',
items: [
{
name: 'Clothes',
icon: 'fa fa-tags',
link: '#',
items: [
{
title: 'Clothes',
icon: 'fa fa-tags',
items: [
{
name: 'Women\'s Clothing',
icon: 'fa fa-female',
link: '#',
items: [
{
title: 'Women\'s Clothing',
icon: 'fa fa-female',
items: [
{
name: 'Tops',
link: '#'
},
{
name: 'Dresses',
link: '#'
},
{
name: 'Trousers',
link: '#'
},
{
name: 'Shoes',
link: '#'
},
{
name: 'Sale',
link: '#'
}
]
}
]
},
{
name: 'Men\'s Clothing',
icon: 'fa fa-male',
link: '#',
items: [
{
title: 'Men\'s Clothing',
icon: 'fa fa-male',
items: [
{
name: 'Shirts',
link: '#'
},
{
name: 'Trousers',
link: '#'
},
{
name: 'Shoes',
link: '#'
},
{
name: 'Sale',
link: '#'
}
]
}
]
}
]
}
]
},
{
name: 'Jewelry',
link: '#'
},
{
name: 'Music',
link: '#'
},
{
name: 'Grocery',
link: '#'
}
]
}
]
},
{
name: 'Collections',
link: '#'
},
{
name: 'Credits',
link: '#'
}
]
}
];
</script></code></pre>
</div>
<hr />
<div id="initialize">
<h2>Initialize</h2>
<p>With HTML markup.</p>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
$('#menu').multilevelpushmenu();
});
</script></code></pre>
<p>With JS Array.</p>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
$('#menu').multilevelpushmenu({
menu: arrMenu
});
});
</script></code></pre>
</div>
<hr />
<div id="options">
<h2>Options</h2>
<p>Full list of options is provided below.</p>
<pre class="prettyprint"><code>container: $( '#menu' ), // Holding container.
containersToPush: [ $( '#content1' ), $( '#content2' ) ], // Array of DOM elements to push/slide together with menu.
collapsed: false, // Initialize menu in collapsed/expanded mode
menuID: 'multilevelpushmenu', // ID of the <nav> element.
wrapperClass: 'multilevelpushmenu_wrapper', // Wrapper CSS class.
menuInactiveClass: 'multilevelpushmenu_inactive', // CSS class for inactive wrappers.
menu: arrMenu, // JS array of menu items (if markup not provided).
menuWidth: 0, // Wrapper width (integer, '%', 'px', 'em').
menuHeight: 0, // Menu height (integer, '%', 'px', 'em').
backText: 'Back', // Text for 'Back' menu item.
backItemClass: 'backItemClass', // CSS class for back menu item.
backItemIcon: 'fa fa-angle-right', // FontAvesome icon used for back menu item.
groupIcon: 'fa fa-angle-left', // FontAvesome icon used for menu items contaning sub-items.
mode: 'overlap', // Menu sliding mode: overlap/cover.
overlapWidth: 40, // Width in px of menu wrappers overlap
preventItemClick: true, // set to false if you do not need event callback functionality
preventGroupItemClick: true, // set to false if you do not need event callback functionality
direction: 'ltr', // set to 'rtl' for reverse sliding direction
fullCollapse: false, // set to true to fully hide base level holder when collapsed
swipe: 'both' // or 'touchscreen', or 'desktop'</code></pre>
</div>
<hr />
<div id="methods">
<h2>Methods</h2>
<p>Full list of exposed methods is provided below.</p>
<pre class="prettyprint"><code>/**
* Initialize menu
*/
$('#menu').multilevelpushmenu();
// or
$('#menu').multilevelpushmenu('init');
/**
* Collapse menu
*/
// Full collapse
$('#menu').multilevelpushmenu('collapse');
// Collapse menu down to level 1 (0 level represent root level expanded)
$('#menu').multilevelpushmenu('collapse', 1);
// Collapse menu down to the level of $menuLevelObject
$('#menu').multilevelpushmenu('collapse', $menuLevelObject);
// Collapse menu down to the level of menu level object with title 'Devices' (not really recommended since there could be many menu level objects with the same title; in such cases collasing will be unsuccessful)
$('#menu').multilevelpushmenu('collapse', 'Devices');
/**
* Expand menu
*/
// Menu expand from fully collapsed mode to level 0
$('#menu').multilevelpushmenu('expand');
// Expand menu up to the $menuLevelObject
$('#menu').multilevelpushmenu('expand', $menuLevelObject);
// Expand menu up to the menu level object with title 'Devices' (not recommended since there could be many menu level objects with the same title; in such cases expanding will be unsuccessful)
$('#menu').multilevelpushmenu('expand', 'Devices');
/**
* Menu Expanded?
* Check if menu level object is already expanded (returns true/false)
*/
$('#menu').multilevelpushmenu('menuexpanded', $menuLevelObject);
/**
* Active (last expanded) menu level
* Returns active menu level object, or false if menu is fully collapsed
*/
$('#menu').multilevelpushmenu('activemenu');
/**
* Find menu level(s) by title
* Provides collection of menu level objects matching provided menu title, or false if there is no match
*/
$('#menu').multilevelpushmenu('findmenusbytitle', 'Devices');
/**
* Find menu item(s) by name
* Provides collection of menu item objects matching provided name, or false if there is no match
*/
$( '#menu' ).multilevelpushmenu( 'finditemsbyname' , 'Devices' );
/**
* Find path to root of selected menu level object
* Provides chain collection of menu level objects (root menu level object to given menu level object), or false in case of error
*/
$('#menu').multilevelpushmenu('pathtoroot', $menuLevelObject);
/**
* Find shared path or path differences of two given menu level objects
* Provides collection of shared menu level objects of two menu level objects if bool parameter is set to true, or collection of menu level objects representing differences if bool is false; or false if there is no match
*/
$('#menu').multilevelpushmenu('comparepaths', $menuLevelObject1, $menuLevelObject2, bool);
// Shared path collection
$('#menu').multilevelpushmenu('comparepaths', $menuLevelObject1, $menuLevelObject2, true);
// Differences collection
$('#menu').multilevelpushmenu('comparepaths', $menuLevelObject1, $menuLevelObject2, false);
/**
* Get or Set plug-in options
* Get (if third parameter is not set) or Set selected plug-in option
*/
// Get
$('#menu').multilevelpushmenu('option', 'mode');
// Set
$('#menu').multilevelpushmenu('option', 'mode', 'cover');
/**
* Add/Remove menu item(s) with sub-menus
*
*/
// Add
$('#menu').multilevelpushmenu( 'additems' , itemsArray , $addToMenu , position );
// Remove
$('#menu').multilevelpushmenu( 'removeitems' , items );
/**
* Redraw menus
*
*/
$('#menu').multilevelpushmenu( 'redraw' );
/**
* Visible menus
*
*/
$('#menu').multilevelpushmenu( 'visiblemenus' );
/**
* Hidden menus
*
*/
$('#menu').multilevelpushmenu( 'hiddenmenus' );
/**
* Propagate event to underneath layer
*
*/
$( '#menu' ).multilevelpushmenu( 'propagateevent' , $( '#menu' ) , 'mousedown' );</code></pre>
<h3>Responsive menu example</h3>
<pre class="prettyprint"><code><script>
$( '#menu' ).multilevelpushmenu({
menuWidth: '20%',
menuHeight: '100%'
});
$( window ).resize(function() {
$( '#menu' ).multilevelpushmenu( 'redraw' );
});
</script></code></pre>
</div>
<hr />
<div id="events">
<h2>Events/Callbacks</h2>
<p>Full list of events/callbacks is provided below.</p>
<p>Each callback provides following arguments. <small>(use <code>console.log(arguments)</code> inside callback method to see)</small><br />
<small><code>onMenuReady:</code>, <code>onCollapseMenuStart:</code>, <code>onCollapseMenuEnd:</code>, <code>onExpandMenuStart:</code>, <code>onExpandMenuEnd:</code></small>: plug-in <span class="label label-info">options</span> object.<br />
<small><code>onTitleItemClick:</code>, <code>onBackItemClick:</code></small>: <span class="label label-info">event</span> object, <span class="label label-info">menu level</span> object, plug-in <span class="label label-info">options</span> object.<br />
<small><code>onGroupItemClick:</code>, <code>onItemClick:</code></small>: <span class="label label-info">event</span> object, <span class="label label-info">menu level</span> object, <span class="label label-info">clicked item</span> object, plug-in <span class="label label-info">options</span> object.</p>
<pre class="prettyprint"><code>onCollapseMenuStart: // Menu collapse started
onCollapseMenuEnd: // Menu collapse ended
onExpandMenuStart: // Menu expand started
onExpandMenuEnd: // Menu expand ended
onGroupItemClick: // Click/touchstart menu item containing sub-items
onItemClick: // Click/touchstart menu item which doesn't contain sub-items
onTitleItemClick: // Title icon click/touchstart
onBackItemClick: // Back item click/touchstart
onMenuReady: // Menu created and ready for use
onMenuSwipe: // Menu swipe initiated</code></pre>
<h3>An event callback example</h3>
<p>Each event triggers a callback; An example using onItemClick event callback functionality.</p>
<pre class="prettyprint"><code><script>
$( '#menu' ).multilevelpushmenu({
onItemClick: function() {
// First argument is original event object
var event = arguments[0],
// Second argument is menu level object containing clicked item (<div> element)
$menuLevelHolder = arguments[1],
// Third argument is clicked item (<li> element)
$item = arguments[2],
// Fourth argument is instance settings/options object
options = arguments[3];
// You can do some cool stuff here before
// redirecting to href location
// like logging the event or even
// adding some parameters to href, etc...
// Anchor href
var itemHref = $item.find( 'a:first' ).attr( 'href' );
// Redirecting the page
location.href = itemHref;
}
});
</script></code></pre>
<h3>Managing custom DOM object events when using swiping on desktops</h3>
<p>If you will use swiping menus on desktops, mousedown bubble will be canceled and therefore any DOM object placed within menu item won't get focus when clicked.
To overcome this you can use originally triggered event returned as onItemClick's first argument. Below is an example showing how to set focus on input element, <a href="http://jsfiddle.net/5rjg9/1/" target="_blank">http://jsfiddle.net/5rjg9/1/</a></p>
<pre class="prettyprint"><code><script>
$(document).ready(function () {
$('#menu').multilevelpushmenu({
onItemClick: function () {
var e = arguments[0];
if ($(e.target).prop('tagName').toLowerCase() == 'input') {
$(e.target).focus();
$(e.target).val('focused');
$(e.target).unbind('blur');
$(e.target).blur(function(){
$(e.target).val('blured');
});
}
}
});
});
</script></code></pre>
<p>or, <a href="http://jsfiddle.net/c5EA4/6/" target="_blank">http://jsfiddle.net/c5EA4/6/</a></p>
<pre class="prettyprint"><code><script>
$(document).ready(function () {
$('#menu').multilevelpushmenu({
onMenuSwipe: function () {
var e = arguments[0];
if ($(e.target).prop('tagName').toLowerCase() == 'input') return false;
}
});
});
</script></code></pre>
<p>Alternatively, you can set swipe option to 'touchscreen' and allow swiping menus only on touch-screen enabled devices.</p>
</div>
<hr />
<div id="examples">
<h2>Examples</h2>
<h3 id="examplebasichtml">Basic <small>(HTML Markup)</small></h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )]
});
});
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/basichtml/basichtml.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<h3 id="examplecovermode">Cover mode</h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, cover mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )],
mode: 'cover'
});
});
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/covermode/covermode.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<h3 id="examplefullexpandcollapse">Full menu collapse</h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )],
fullCollapse: true
});
});
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/fullexpandcollapse/fullexpandcollapse.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<h3 id="exampleresponsive">Responsive menu</h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )],
menuWidth: '25%',
menuHeight: '100%'
});
});
$(window).resize(function () {
$( '#menu' ).multilevelpushmenu( 'redraw' );
});
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/responsive/responsive.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<h3 id="examplecollapsed">Initialize collapsed</h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, overlap mode, initilaize collapsed
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )],
collapsed: true
});
});
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/collapsed/collapsed.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<h3 id="examplertl">Right-to-left sliding</h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, overlap mode, rigth-to-left sliding
$( '#menu' ).multilevelpushmenu({
direction: 'rtl',
backItemIcon: 'fa fa-angle-left',
groupIcon: 'fa fa-angle-right'
});
});
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/rtl/rtl.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<h3 id="examplecustomsize">Custom size</h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )],
menuWidth: 450, // '450px', '30em', '25%' will also work
menuHeight: 500
});
});
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/customsize/customsize.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<h3 id="examplepushmany">Push many containers</h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, overlap mode, push 3 DOM elements
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' ), $( '#pushthisobjalso' ), $( '#pushthisobjtoo' )]
});
});
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/pushmany/pushmany.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<h3 id="exampleoptions">Get/Set options</h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )]
});
// Get value for mode option
$( '#getMode' ).click(function(){
$( this ).find( 'span' ).text( $( '#menu' ).multilevelpushmenu( 'option', 'mode' ) );
});
// Set value for mode option
$( '#setMode' ).click(function(){
// Collapse menu first to ensure good functionality after mode change
$( '#menu' ).multilevelpushmenu( 'collapse', 0 );
// Toggle mode
$( '#menu' ).multilevelpushmenu( 'option', 'mode') == 'overlap' ?
$( this ).find( 'span' ).text( $( '#menu' ).multilevelpushmenu( 'option', 'mode', 'cover' ) ) : $( this ).find( 'span' ).text( $( '#menu' ).multilevelpushmenu( 'option', 'mode', 'overlap' ) );
// Update getMode button info
$( '#getMode' ).find( 'span' ).text( $( '#menu' ).multilevelpushmenu( 'option', 'mode' ) );
});
});
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/options/options.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<h3 id="exampleexpandcollapse">Expand/Collapse options</h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )]
});
// Full collapse
$( '#fullcollapse' ).click(function(){
$( '#menu' ).multilevelpushmenu( 'collapse' );
});
// Base expand
$( '#baseexpand' ).click(function(){
$( '#menu' ).multilevelpushmenu( 'expand' );
});
// Expand to Men's Clothing
$( '#expandmensclothing' ).click(function(){
// Use menu title for expanding just in case you know that there
// is only one menu item with such title. If there are more menus
// with same title, expand/collapse invoked with
// title name as parameter won't work.
$( '#menu' ).multilevelpushmenu( 'expand' , 'Men\'s Clothing' );
// More safe way is to use methods like
// $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' );
// and then invoke expand method with desired menu level object
// (e.g. if we have several menu objects with title 'Mobile Phones' but
// we want to expand the first one)
// var $phonemenu = $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' ).first();
// and then
// $( '#menu' ).multilevelpushmenu( 'expand' , $phonemenu );
});
// Expand to Mobile Phones
$( '#expandmobilephones' ).click(function(){
// Use menu title for expanding just in case you know that there
// is only one menu item with such title. If there are more menus
// with same title, expand/collapse invoked with
// title name as parameter won't work.
$( '#menu' ).multilevelpushmenu( 'expand' , 'Mobile Phones' );
// More safe way is to use methods like
// $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' );
// and then invoke expand method with desired menu level object
// (e.g. if we have several menu objects with title 'Mobile Phones' but
// we want to expand the first one)
// var $phonemenu = $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' ).first();
// and then
// $( '#menu' ).multilevelpushmenu( 'expand' , $phonemenu );
});
// Collapse to the level of 'Devices' menu
$( '#collapsedevices' ).click(function(){
// Have in mind that this will collapse to the level of 'Devices'
// menu (level 1 in our case). So even when open path is not containing
// 'Devices' menu it will collapse expanded menus to level 1; it's
// basically the same as
// $( '#menu' ).multilevelpushmenu( 'collapse' , 1 );
$( '#menu' ).multilevelpushmenu( 'collapse' , 'Devices' );
});
});
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/expandcollapse/expandcollapse.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<h3 id="exampleaddremove">Add/Remove items</h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )]
});
// Expand to Mobile Phones where we will add two
// additional menu items with sub-menus
$( '#menu' ).multilevelpushmenu( 'expand' , $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' ).first() );
// Add iPhone and Samsung items to Mobile Phones menu at position 0
$( '#additems' ).click(function(){
var $addTo = $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' ).first();
$( '#menu' ).multilevelpushmenu( 'additems' , addItems , $addTo , 0 );
})
// Remove Samsung item
$( '#removeitems' ).click(function(){
var item = $( '#menu' ).multilevelpushmenu( 'finditemsbyname' , 'Samsung' );
$( '#menu' ).multilevelpushmenu( 'removeitems' , item );
})
});
var addItems = [
{
name: 'iPhone',
id: 'iPhoneItem',
icon: 'fa fa-phone-square',
link: '#',
items: [
{
title: 'iPhones',
id: 'iPhonesMenu',
icon: 'fa fa-phone-square',
items: [
{
name: 'iPhone 4',
icon: 'fa fa-phone-square',
link: '#'
},
{
name: 'iPhone 5',
icon: 'fa fa-phone-square',
link: '#'
}
]
}
]
},
{
name: 'Samsung',
icon: 'fa fa-phone-square',
link: '#',
items: [
{
title: 'Samsung',
icon: 'fa fa-phone-square',
items: [
{
name: 'Samsung Galaxy S II',
icon: 'fa fa-phone-square',
link: '#'
},
{
name: 'Samsung Galaxy S III',
icon: 'fa fa-phone-square',
link: '#'
},
{
name: 'Samsung Galaxy S IV',
icon: 'fa fa-phone-square',
link: '#'
}
]
}
]
}
];
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/addremove/addremove.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<h3 id="exampleevents">Events</h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )],
onCollapseMenuStart: function() {
$( '#eventpanel' ).append( '<br />Started collapsing...' );
//console.log(arguments);
},
onCollapseMenuEnd: function() {
$( '#eventpanel' ).append( '<br />Collapsing ended!' );
//console.log(arguments);
},
onExpandMenuStart: function() {
$( '#eventpanel' ).append( '<br />Started expanding...' );
//console.log(arguments);
},
onExpandMenuEnd: function() {
$( '#eventpanel' ).append( '<br />Expanding ended!' );
//console.log(arguments);
},
onTitleItemClick: function() {
var event = arguments[0],
$menuLevelHolder = arguments[1],
options = arguments[2],
title = $menuLevelHolder.find( 'h2:first' ).text();
$( '#eventpanel' ).append( '<br />Title item <i>' + title + '</i> clicked!' );
//console.log(arguments);
},
onBackItemClick: function() {
var event = arguments[0],
$menuLevelHolder = arguments[1],
options = arguments[2],
title = $menuLevelHolder.find( 'h2:first' ).text();
$( '#eventpanel' ).append( '<br />Back item on <i>' + title + '</i> menu level clicked!' );
//console.log(arguments);
},
onGroupItemClick: function() {
var event = arguments[0],
$menuLevelHolder = arguments[1],
$item = arguments[2],
options = arguments[3],
title = $menuLevelHolder.find( 'h2:first' ).text(),
itemName = $item.find( 'a:first' ).text();
$( '#eventpanel' ).append( '<br />Group Item <i>' + itemName + '</i>' + ' on <i>' + title + '</i> menu level clicked!' );
//console.log(arguments);
},
onItemClick: function() {
var event = arguments[0],
$menuLevelHolder = arguments[1],
$item = arguments[2],
options = arguments[3],
title = $menuLevelHolder.find( 'h2:first' ).text(),
itemName = $item.find( 'a:first' ).text();
$( '#eventpanel' ).append( '<br />Item <i>' + itemName + '</i>' + ' on <i>' + title + '</i> menu level clicked!' );
//console.log(arguments);
}
});
});
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/events/events.html" role="button">Demo <i class="fa fa-external-link"></i></a>
</div>
<h3 id="examplebasicjs">Basic <small>(JS Array)</small></h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// JS Array implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
menu: arrMenu,
containersToPush: [$( '#pushobj' )]
});
});
// JS Aray instead HTML Markup
var arrMenu = [
{
title: 'All Categories',
icon: 'fa fa-reorder',
items: [
{
name: 'Devices',
icon: 'fa fa-laptop',
link: '#',
items: [
{
title: 'Devices',
icon: 'fa fa-laptop',
items: [
{
name: 'Mobile Phones',
icon: 'fa fa-phone',
link: '#',
items: [
{
title: 'Mobile Phones',
icon: 'fa fa-phone',
link: '#',
items: [
{
name: 'Super Smart Phone',
link: '#'
},
{
name: 'Thin Magic Mobile',
link: '#'
},
{
name: 'Performance Crusher',
link: '#'
},
{
name: 'Futuristic Experience',
link: '#'
}
]
}
]
},
{
name: 'Televisions',
icon: 'fa fa-desktop',
link: '#',
items: [
{
title: 'Televisions',
icon: 'fa fa-desktop',
link: '#',
items: [
{
name: 'Flat Super Screen',
link: '#'
},
{
name: 'Gigantic LED',
link: '#'
},
{
name: 'Power Eater',
link: '#'
},
{
name: '3D Experience',
link: '#'
},
{
name: 'Classic Comfort',
link: '#'
}
]
}
]
},
{
name: 'Cameras',
icon: 'fa fa-camera-retro',
link: '#',
items: [
{
title: 'Cameras',
icon: 'fa fa-camera-retro',
link: '#',
items: [
{
name: 'Smart Shot',
link: '#'
},
{
name: 'Power Shooter',
link: '#'
},
{
name: 'Easy Photo Maker',
link: '#'
},
{
name: 'Super Pixel',
link: '#'
}
]
}
]
}
]
}
]
},
{
name: 'Magazines',
icon: 'fa fa-book',
link: '#',
items: [
{
title: 'Magazines',
icon: 'fa fa-book',
items: [
{
name: 'National Geographics',
link: '#'
},
{
name: 'Scientific American',
link: '#'
},
{
name: 'The Spectator',
link: '#'
},
{
name: 'Rambler',
link: '#'
},
{
name: 'Physics World',
link: '#'
},
{
name: 'The New Scientist',
link: '#'
}
]
}
]
},
{
name: 'Store',
icon: 'fa fa-shopping-cart',
link: '#',
items: [
{
title: 'Store',
icon: 'fa fa-shopping-cart',
items: [
{
name: 'Clothes',
icon: 'fa fa-tags',
link: '#',
items: [
{
title: 'Clothes',
icon: 'fa fa-tags',
items: [
{
name: 'Women\'s Clothing',
icon: 'fa fa-female',
link: '#',
items: [
{
title: 'Women\'s Clothing',
icon: 'fa fa-female',
items: [
{
name: 'Tops',
link: '#'
},
{
name: 'Dresses',
link: '#'
},
{
name: 'Trousers',
link: '#'
},
{
name: 'Shoes',
link: '#'
},
{
name: 'Sale',
link: '#'
}
]
}
]
},
{
name: 'Men\'s Clothing',
icon: 'fa fa-male',
link: '#',
items: [
{
title: 'Men\'s Clothing',
icon: 'fa fa-male',
items: [
{
name: 'Shirts',
link: '#'
},
{
name: 'Trousers',
link: '#'
},
{
name: 'Shoes',
link: '#'
},
{
name: 'Sale',
link: '#'
}
]
}
]
}
]
}
]
},
{
name: 'Jewelry',
link: '#'
},
{
name: 'Music',
link: '#'
},
{
name: 'Grocery',
link: '#'
}
]
}
]
},
{
name: 'Collections',
link: '#'
},
{
name: 'Credits',
link: '#'
}
]
}
];
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/basicjs/basicjs.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<hr />
<div id="license">
<h2>License</h2>
<p>Licensed under the MIT license. <a href="http://www.opensource.org/licenses/mit-license.php">http://www.opensource.org/licenses/mit-license.php</a></p>
</div>
</div> <!-- /container -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="js/vendor/jquery.easing/jquery.easing.1.3.js"></script>
<script src="http://vjs.zencdn.net/4.2/video.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-45795667-3']);
_gaq.push(['_setDomainName', 'make.rs']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<\!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<\!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<\!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<\!--[if gt IE 8]><\!--> <html class="no-js"> <\!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Multi-Level Push Menu v2.1.4</title>
<meta name="description" content="Multi-Level Push Menu, jQuery plug-in">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='//fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link href="//vjs.zencdn.net/4.2/video-js.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="//oss.maxcdn.com/libs/modernizr/2.6.2/modernizr.min.js"><\/script>
<script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"><\/script>
</head>
<body>
<\!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<\!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand scroller" href="#home"><strong><i class="fa fa-home"></i></strong></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a class="scroller" href="#home">Home</a></li>
<li><a class="scroller" href="#features">Features</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Usage<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a class="scroller" href="#includecss">Include the CSS</a></li>
<li><a class="scroller" href="#includejs">Include the JS</a></li>
<li><a class="scroller" href="#htmlmarkup">HTML Markup</a></li>
<li class="divider"></li>
<li><a class="scroller" href="#jsmarkup">JS Array <small>(instead HTML markup)</small></a></li>
<li class="divider"></li>
<li><a class="scroller" href="#initialize">Initialize</a></li>
</ul>
</li>
<li><a class="scroller" href="#options">Options</a></li>
<li><a class="scroller" href="#methods">Methods</a></li>
<li><a class="scroller" href="#events">Events</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Examples<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a class="scroller" href="#examplebasichtml">Basic <small>(HTML Markup)</small></a></li>
<li><a class="scroller" href="#examplecovermode">Cover mode</a></li>
<li><a class="scroller" href="#examplefullexpandcollapse">Full menu collapse</a></li>
<li><a class="scroller" href="#exampleresponsive">Responsive menu</a></li>
<li><a class="scroller" href="#examplecollapsed">Initialize collapsed</a></li>
<li><a class="scroller" href="#examplertl">Right-to-left sliding</a></li>
<li><a class="scroller" href="#examplecustomsize">Custom size</a></li>
<li><a class="scroller" href="#examplepushmany">Push many containers</a></li>
<li class="divider"></li>
<li><a class="scroller" href="#exampleoptions">Get/Set options</a></li>
<li><a class="scroller" href="#exampleexpandcollapse">Expand/Collapse options</a></li>
<li class="divider"></li>
<li><a class="scroller" href="#exampleaddremove">Add/Remove items</a></li>
<li class="divider"></li>
<li><a class="scroller" href="#exampleevents">Events</a></li>
<li class="divider"></li>
<li><a class="scroller" href="#examplebasicjs">Basic <small>(JS Array)</small></a></li>
</ul>
</li>
<li><a class="scroller" href="#license">License</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a><iframe src="http://ghbtns.com/github-btn.html?user=adgsm&repo=multi-level-push-menu&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe></a></li>
<li><a><iframe src="http://ghbtns.com/github-btn.html?user=adgsm&repo=multi-level-push-menu&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="165" height="20"></iframe></a></li>
<li><a href="https://twitter.com/share" class="twitter-share-button" data-via="mdzunic" data-count="none" data-hashtags="multilevelpushmenu,jquery">Tweet</a></li>
</ul>
</div><\!--/.nav-collapse -->
</div>
</div>
<div class="container" id="home">
<\!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Multi-level push menu v2.1.4</h1>
<p>Multi-level push menu is cross-browser compatible jQuery plug-in allowing endless nesting of navigation elements.</p>
<p>Following basic, lightweight release v1, version v2 brings number of
exposed plug-in methods (<a class="scroller" href="#methods"><i>NEW! Redraw, Visible menus, Hidden menus, Propagate events</i></a>), options (<a class="scroller" href="#examplefullexpandcollapse"><i>NEW! Full menu collapse</i></a>) and events/callbacks (<a class="scroller" href="#events"><i>onMenuReady and onMenuSwipe added</i></a>). Release v2 now supports native mobile events. (<a class="scroller" href="#video"><i>NEW! Expand/Collapse navigation with a left/right swipe gesture</i></a>)</p>
<p>
<a class="btn btn-lg btn-primary" href="//github.com/adgsm/multi-level-push-menu" role="button">Fork on GitHub <i class="fa fa-github"></i></a>
<a class="btn btn-lg btn-info" href="download/MultiLevelPushMenu_v2.1.4.zip" role="button">Download v2 <i class="fa fa-download"></i></a>
<a class="btn btn-lg btn-info" href="download/MultiLevelPushMenu_v1.0.0.zip" role="button">Download v1 <i class="fa fa-download"></i></a>
<div class="btn-group">
<button type="button" class="btn btn-lg btn-success">Watch Demo</button>
<button type="button" class="btn btn-lg btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a target="_blank" href="demo/basichtml/basichtml.html">Basic <small>(HTML Markup)</small></a></li>
<li><a target="_blank" href="demo/covermode/covermode.html">Cover mode</a></li>
<li><a target="_blank" href="demo/fullexpandcollapse/fullexpandcollapse.html">Full Collapse</a></li>
<li><a target="_blank" href="demo/responsive/responsive.html">Responsive menu</a></li>
<li><a target="_blank" href="demo/collapsed/collapsed.html">Initialize collapsed</a></li>
<li><a target="_blank" href="demo/rtl/rtl.html">Rigth-to-left sliding</a></li>
<li><a target="_blank" href="demo/customsize/customsize.html">Custom size</a></li>
<li><a target="_blank" href="demo/pushmany/pushmany.html">Push many containers</a></li>
<li class="divider"></li>
<li><a target="_blank" href="demo/options/options.html">Get/Set options</a></li>
<li><a target="_blank" href="demo/expandcollapse/expandcollapse.html">Expand/Collapse options</a></li>
<li class="divider"></li>
<li><a target="_blank" href="demo/addremove/addremove.html">Add/Remove items</a></li>
<li class="divider"></li>
<li><a target="_blank" href="demo/events/events.html">Events</a></li>
<li class="divider"></li>
<li><a target="_blank" href="demo/bootstrap/bootstrap_integration.html">Bootstrap integration</a></li>
<li><a target="_blank" href="demo/basicjs/basicjs.html">Basic <small>(JS Array)</small></a></li>
</ul>
</div>
</p>
</div>
<p>This jQuery plugin is inspired by <a href="http://tympanus.net/codrops/2013/08/13/multi-level-push-menu/" target="_blank">Codrops</a> MultiLevelPushMenu but unlike it not relaying on CSS 3D Transforms and therefore functional in older browsers too (i.e. IE 8).</p>
<hr />
<div id="features">
<div class="row featurette">
<div class="col-md-7">
<h2>Features</h2>
<ul>
<li>Multi-level menu support</li>
<li>Endless nesting of navigation elements</li>
<li>Expand/Collapse navigation with a left/right <a class="scroller" href="#video">swipe gesture</a></li>
<li>Push/Slide DOM elements of choice</li>
<li>Left-to-right and Right-to-left sliding directions</li>
<li>Flexible, simple markup</li>
<li>JS Array input, as HTML markup replacement</li>
<li>A number of exposed Options (<a class="scroller" href="#options"><i>1 NEW!</i> added</a>), Methods (<a class="scroller" href="#exampleaddremove"><i>3 NEW!</i> added</a>) and Events</li>
<li>Cross-browser compatibility
<ul>
<li>Chrome</li>
<li>Midori</li>
<li>Firefox</li>
<li>Safari</li>
<li>IE8+</li>
<li>Opera 12.16</li>
<li>Android Browser 4.1.2</li>
<li>iOS Safari 7.0.1</li>
</ul></li>
</ul>
</div>
<div class="col-md-5">
<a href="demo/basichtml/basichtml.html" target="_blank"><img class="featurette-image img-responsive" data-src="holder.js/407x541/auto" alt="example" src="img/menu.png"></a>
</div>
</div>
</div>
<hr />
<div id="video">
<h2>Video</h2>
<p>Swiping menus is also supported on desktops using mouse events, but it's more natural to be used on touch devices.
<br /><small>(video could be a bit choppy; for real experience open demo pages using your touch enabled device)</small></p>
<video id="multilevelpushmenu" class="video-js vjs-default-skin" controls preload="auto" width="758" height="494" poster="download/jQuery.multilevelpushmenu.png" data-setup='{}'>
<source src="download/jQuery.multilevelpushmenu.webm" type='video/webm' />
<source src="download/jQuery.multilevelpushmenu.mov" type='video/quicktime' />
<source src="download/jQuery.multilevelpushmenu.mp4" type='video/mp4' />
<source src="download/jQuery.multilevelpushmenu.ogv" type='video/ogg' />
</video>
</video>
</div>
<hr />
<div id="usage">
<h2>Usage</h2>
<h3 id="includecss">Include the CSS</h3>
<p>"multilevelpushmenu.css" can be modified to fit website design.</p>
<p>FontAvesome (icons)</p>
<pre class="prettyprint"><code><link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css"></code></pre>
<p>Font I like (use any other you like)</p>
<pre class="prettyprint"><code><link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'></code></pre>
<p>Multi-Level-Push-Menu</p>
<pre class="prettyprint"><code><link rel="stylesheet" href="multilevelpushmenu.css" /></code></pre>
<h3 id="includejs">Include the JS</h3>
<p>jQuery</p>
<pre class="prettyprint"><code><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script></code></pre>
<p>Modernizr (needed for IE8)</p>
<pre class="prettyprint"><code><script src="//oss.maxcdn.com/libs/modernizr/2.6.2/modernizr.min.js"></script></code></pre>
<p>Multi-Level-Push-Menu</p>
<pre class="prettyprint"><code><script src="jquery.multilevelpushmenu.min.js></script></code></pre>
<h3 id="htmlmarkup">HTML Markup</h3>
<p>Copy HTML markup below to create menu with exacty the same items like shown in Demo.</p>
<pre class="prettyprint"><code><div id="menu">
<nav>
<h2><i class="fa fa-reorder"></i>All Categories</h2>
<ul>
<li>
<a href="#"><i class="fa fa-laptop"></i>Devices</a>
<h2><i class="fa fa-laptop"></i>Devices</h2>
<ul>
<li>
<a href="#"><i class="fa fa-phone"></i>Mobile Phones</a>
<h2><i class="fa fa-phone"></i>Mobile Phones</h2>
<ul>
<li>
<a href="#">Super Smart Phone</a>
</li>
<li>
<a href="#">Thin Magic Mobile</a>
</li>
<li>
<a href="#">Performance Crusher</a>
</li>
<li>
<a href="#">Futuristic Experience</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-desktop"></i>Televisions</a>
<h2><i class="fa fa-desktop"></i>Televisions</h2>
<ul>
<li>
<a href="#">Flat Super Screen</a>
</li>
<li>
<a href="#">Gigantic LED</a>
</li>
<li>
<a href="#">Power Eater</a>
</li>
<li>
<a href="#">3D Experience</a>
</li>
<li>
<a href="#">Classic Comfort</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-camera-retro"></i>Cameras</a>
<h2><i class="fa fa-camera-retro"></i>Cameras</h2>
<ul>
<li>
<a href="#">Smart Shot</a>
</li>
<li>
<a href="#">Power Shooter</a>
</li>
<li>
<a href="#">Easy Photo Maker</a>
</li>
<li>
<a href="#">Super Pixel</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-book"></i>Magazines</a>
<h2><i class="fa fa-book"></i>Magazines</h2>
<ul>
<li>
<a href="#">National Geographics</a>
</li>
<li>
<a href="#">The Spectator</a>
</li>
<li>
<a href="#">Rambler</a>
</li>
<li>
<a href="#">Physics World</a>
</li>
<li>
<a href="#">The New Scientist</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-shopping-cart"></i>Store</a>
<h2><i class="fa fa-shopping-cart"></i>Store</h2>
<ul>
<li>
<a href="#"><i class="fa fa-tags"></i>Clothes</a>
<h2><i class="fa fa-tags"></i>Clothes</h2>
<ul>
<li>
<a href="#"><i class="fa fa-female"></i>Women's Clothing</a>
<h2><i class="fa fa-female"></i>Women's Clothing</h2>
<ul>
<li>
<a href="#">Tops</a>
</li>
<li>
<a href="#">Dresses</a>
</li>
<li>
<a href="#">Trousers</a>
</li>
<li>
<a href="#">Shoes</a>
</li>
<li>
<a href="#">Sale</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-male"></i>Men's Clothing</a>
<h2><i class="fa fa-male"></i>Men's Clothing</h2>
<ul>
<li>
<a href="#">Shirts</a>
</li>
<li>
<a href="#">Trousers</a>
</li>
<li>
<a href="#">Shoes</a>
</li>
<li>
<a href="#">Sale</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Jewelry</a>
</li>
<li>
<a href="#">Music</a>
</li>
<li>
<a href="#">Grocery</a>
</li>
</ul>
</li>
<li>
<a href="#">Collections</a>
</li>
<li>
<a href="#">Credits</a>
</li>
</ul>
</nav>
</div></code></pre>
<h3 id="jsmarkup">JS Array <small>(instead HTML Markup)</small></h3>
<p>You can use JS Array instead of above HTML markup.</p>
<pre class="prettyprint"><code><script>
var arrMenu = [
{
title: 'All Categories',
id: 'menuID',
icon: 'fa fa-reorder',
items: [
{
name: 'Devices',
id: 'itemID',
icon: 'fa fa-laptop',
link: '#',
items: [
{
title: 'Devices',
icon: 'fa fa-laptop',
items: [
{
name: 'Mobile Phones',
icon: 'fa fa-phone',
link: '#',
items: [
{
title: 'Mobile Phones',
icon: 'fa fa-phone',
link: '#',
items: [
{
name: 'Super Smart Phone',
link: '#'
},
{
name: 'Thin Magic Mobile',
link: '#'
},
{
name: 'Performance Crusher',
link: '#'
},
{
name: 'Futuristic Experience',
link: '#'
}
]
}
]
},
{
name: 'Televisions',
icon: 'fa fa-desktop',
link: '#',
items: [
{
title: 'Televisions',
icon: 'fa fa-desktop',
link: '#',
items: [
{
name: 'Flat Super Screen',
link: '#'
},
{
name: 'Gigantic LED',
link: '#'
},
{
name: 'Power Eater',
link: '#'
},
{
name: '3D Experience',
link: '#'
},
{
name: 'Classic Comfort',
link: '#'
}
]
}
]
},
{
name: 'Cameras',
icon: 'fa fa-camera-retro',
link: '#',
items: [
{
title: 'Cameras',
icon: 'fa fa-camera-retro',
link: '#',
items: [
{
name: 'Smart Shot',
link: '#'
},
{
name: 'Power Shooter',
link: '#'
},
{
name: 'Easy Photo Maker',
link: '#'
},
{
name: 'Super Pixel',
link: '#'
}
]
}
]
}
]
}
]
},
{
name: 'Magazines',
icon: 'fa fa-book',
link: '#',
items: [
{
title: 'Magazines',
icon: 'fa fa-book',
items: [
{
name: 'National Geographics',
link: '#'
},
{
name: 'Scientific American',
link: '#'
},
{
name: 'The Spectator',
link: '#'
},
{
name: 'Rambler',
link: '#'
},
{
name: 'Physics World',
link: '#'
},
{
name: 'The New Scientist',
link: '#'
}
]
}
]
},
{
name: 'Store',
icon: 'fa fa-shopping-cart',
link: '#',
items: [
{
title: 'Store',
icon: 'fa fa-shopping-cart',
items: [
{
name: 'Clothes',
icon: 'fa fa-tags',
link: '#',
items: [
{
title: 'Clothes',
icon: 'fa fa-tags',
items: [
{
name: 'Women\'s Clothing',
icon: 'fa fa-female',
link: '#',
items: [
{
title: 'Women\'s Clothing',
icon: 'fa fa-female',
items: [
{
name: 'Tops',
link: '#'
},
{
name: 'Dresses',
link: '#'
},
{
name: 'Trousers',
link: '#'
},
{
name: 'Shoes',
link: '#'
},
{
name: 'Sale',
link: '#'
}
]
}
]
},
{
name: 'Men\'s Clothing',
icon: 'fa fa-male',
link: '#',
items: [
{
title: 'Men\'s Clothing',
icon: 'fa fa-male',
items: [
{
name: 'Shirts',
link: '#'
},
{
name: 'Trousers',
link: '#'
},
{
name: 'Shoes',
link: '#'
},
{
name: 'Sale',
link: '#'
}
]
}
]
}
]
}
]
},
{
name: 'Jewelry',
link: '#'
},
{
name: 'Music',
link: '#'
},
{
name: 'Grocery',
link: '#'
}
]
}
]
},
{
name: 'Collections',
link: '#'
},
{
name: 'Credits',
link: '#'
}
]
}
];
</script></code></pre>
</div>
<hr />
<div id="initialize">
<h2>Initialize</h2>
<p>With HTML markup.</p>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
$('#menu').multilevelpushmenu();
});
</script></code></pre>
<p>With JS Array.</p>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
$('#menu').multilevelpushmenu({
menu: arrMenu
});
});
</script></code></pre>
</div>
<hr />
<div id="options">
<h2>Options</h2>
<p>Full list of options is provided below.</p>
<pre class="prettyprint"><code>container: $( '#menu' ), // Holding container.
containersToPush: [ $( '#content1' ), $( '#content2' ) ], // Array of DOM elements to push/slide together with menu.
collapsed: false, // Initialize menu in collapsed/expanded mode
menuID: 'multilevelpushmenu', // ID of the <nav> element.
wrapperClass: 'multilevelpushmenu_wrapper', // Wrapper CSS class.
menuInactiveClass: 'multilevelpushmenu_inactive', // CSS class for inactive wrappers.
menu: arrMenu, // JS array of menu items (if markup not provided).
menuWidth: 0, // Wrapper width (integer, '%', 'px', 'em').
menuHeight: 0, // Menu height (integer, '%', 'px', 'em').
backText: 'Back', // Text for 'Back' menu item.
backItemClass: 'backItemClass', // CSS class for back menu item.
backItemIcon: 'fa fa-angle-right', // FontAvesome icon used for back menu item.
groupIcon: 'fa fa-angle-left', // FontAvesome icon used for menu items contaning sub-items.
mode: 'overlap', // Menu sliding mode: overlap/cover.
overlapWidth: 40, // Width in px of menu wrappers overlap
preventItemClick: true, // set to false if you do not need event callback functionality
preventGroupItemClick: true, // set to false if you do not need event callback functionality
direction: 'ltr', // set to 'rtl' for reverse sliding direction
fullCollapse: false, // set to true to fully hide base level holder when collapsed
swipe: 'both' // or 'touchscreen', or 'desktop'</code></pre>
</div>
<hr />
<div id="methods">
<h2>Methods</h2>
<p>Full list of exposed methods is provided below.</p>
<pre class="prettyprint"><code>/**
* Initialize menu
*/
$('#menu').multilevelpushmenu();
// or
$('#menu').multilevelpushmenu('init');
/**
* Collapse menu
*/
// Full collapse
$('#menu').multilevelpushmenu('collapse');
// Collapse menu down to level 1 (0 level represent root level expanded)
$('#menu').multilevelpushmenu('collapse', 1);
// Collapse menu down to the level of $menuLevelObject
$('#menu').multilevelpushmenu('collapse', $menuLevelObject);
// Collapse menu down to the level of menu level object with title 'Devices' (not really recommended since there could be many menu level objects with the same title; in such cases collasing will be unsuccessful)
$('#menu').multilevelpushmenu('collapse', 'Devices');
/**
* Expand menu
*/
// Menu expand from fully collapsed mode to level 0
$('#menu').multilevelpushmenu('expand');
// Expand menu up to the $menuLevelObject
$('#menu').multilevelpushmenu('expand', $menuLevelObject);
// Expand menu up to the menu level object with title 'Devices' (not recommended since there could be many menu level objects with the same title; in such cases expanding will be unsuccessful)
$('#menu').multilevelpushmenu('expand', 'Devices');
/**
* Menu Expanded?
* Check if menu level object is already expanded (returns true/false)
*/
$('#menu').multilevelpushmenu('menuexpanded', $menuLevelObject);
/**
* Active (last expanded) menu level
* Returns active menu level object, or false if menu is fully collapsed
*/
$('#menu').multilevelpushmenu('activemenu');
/**
* Find menu level(s) by title
* Provides collection of menu level objects matching provided menu title, or false if there is no match
*/
$('#menu').multilevelpushmenu('findmenusbytitle', 'Devices');
/**
* Find menu item(s) by name
* Provides collection of menu item objects matching provided name, or false if there is no match
*/
$( '#menu' ).multilevelpushmenu( 'finditemsbyname' , 'Devices' );
/**
* Find path to root of selected menu level object
* Provides chain collection of menu level objects (root menu level object to given menu level object), or false in case of error
*/
$('#menu').multilevelpushmenu('pathtoroot', $menuLevelObject);
/**
* Find shared path or path differences of two given menu level objects
* Provides collection of shared menu level objects of two menu level objects if bool parameter is set to true, or collection of menu level objects representing differences if bool is false; or false if there is no match
*/
$('#menu').multilevelpushmenu('comparepaths', $menuLevelObject1, $menuLevelObject2, bool);
// Shared path collection
$('#menu').multilevelpushmenu('comparepaths', $menuLevelObject1, $menuLevelObject2, true);
// Differences collection
$('#menu').multilevelpushmenu('comparepaths', $menuLevelObject1, $menuLevelObject2, false);
/**
* Get or Set plug-in options
* Get (if third parameter is not set) or Set selected plug-in option
*/
// Get
$('#menu').multilevelpushmenu('option', 'mode');
// Set
$('#menu').multilevelpushmenu('option', 'mode', 'cover');
/**
* Add/Remove menu item(s) with sub-menus
*
*/
// Add
$('#menu').multilevelpushmenu( 'additems' , itemsArray , $addToMenu , position );
// Remove
$('#menu').multilevelpushmenu( 'removeitems' , items );
/**
* Redraw menus
*
*/
$('#menu').multilevelpushmenu( 'redraw' );
/**
* Visible menus
*
*/
$('#menu').multilevelpushmenu( 'visiblemenus' );
/**
* Hidden menus
*
*/
$('#menu').multilevelpushmenu( 'hiddenmenus' );
/**
* Propagate event to underneath layer
*
*/
$( '#menu' ).multilevelpushmenu( 'propagateevent' , $( '#menu' ) , 'mousedown' );</code></pre>
<h3>Responsive menu example</h3>
<pre class="prettyprint"><code><script>
$( '#menu' ).multilevelpushmenu({
menuWidth: '20%',
menuHeight: '100%'
});
$( window ).resize(function() {
$( '#menu' ).multilevelpushmenu( 'redraw' );
});
</script></code></pre>
</div>
<hr />
<div id="events">
<h2>Events/Callbacks</h2>
<p>Full list of events/callbacks is provided below.</p>
<p>Each callback provides following arguments. <small>(use <code>console.log(arguments)</code> inside callback method to see)</small><br />
<small><code>onMenuReady:</code>, <code>onCollapseMenuStart:</code>, <code>onCollapseMenuEnd:</code>, <code>onExpandMenuStart:</code>, <code>onExpandMenuEnd:</code></small>: plug-in <span class="label label-info">options</span> object.<br />
<small><code>onTitleItemClick:</code>, <code>onBackItemClick:</code></small>: <span class="label label-info">event</span> object, <span class="label label-info">menu level</span> object, plug-in <span class="label label-info">options</span> object.<br />
<small><code>onGroupItemClick:</code>, <code>onItemClick:</code></small>: <span class="label label-info">event</span> object, <span class="label label-info">menu level</span> object, <span class="label label-info">clicked item</span> object, plug-in <span class="label label-info">options</span> object.</p>
<pre class="prettyprint"><code>onCollapseMenuStart: // Menu collapse started
onCollapseMenuEnd: // Menu collapse ended
onExpandMenuStart: // Menu expand started
onExpandMenuEnd: // Menu expand ended
onGroupItemClick: // Click/touchstart menu item containing sub-items
onItemClick: // Click/touchstart menu item which doesn't contain sub-items
onTitleItemClick: // Title icon click/touchstart
onBackItemClick: // Back item click/touchstart
onMenuReady: // Menu created and ready for use
onMenuSwipe: // Menu swipe initiated</code></pre>
<h3>An event callback example</h3>
<p>Each event triggers a callback; An example using onItemClick event callback functionality.</p>
<pre class="prettyprint"><code><script>
$( '#menu' ).multilevelpushmenu({
onItemClick: function() {
// First argument is original event object
var event = arguments[0],
// Second argument is menu level object containing clicked item (<div> element)
$menuLevelHolder = arguments[1],
// Third argument is clicked item (<li> element)
$item = arguments[2],
// Fourth argument is instance settings/options object
options = arguments[3];
// You can do some cool stuff here before
// redirecting to href location
// like logging the event or even
// adding some parameters to href, etc...
// Anchor href
var itemHref = $item.find( 'a:first' ).attr( 'href' );
// Redirecting the page
location.href = itemHref;
}
});
</script></code></pre>
<h3>Managing custom DOM object events when using swiping on desktops</h3>
<p>If you will use swiping menus on desktops, mousedown bubble will be canceled and therefore any DOM object placed within menu item won't get focus when clicked.
To overcome this you can use originally triggered event returned as onItemClick's first argument. Below is an example showing how to set focus on input element, <a href="http://jsfiddle.net/5rjg9/1/" target="_blank">http://jsfiddle.net/5rjg9/1/</a></p>
<pre class="prettyprint"><code><script>
$(document).ready(function () {
$('#menu').multilevelpushmenu({
onItemClick: function () {
var e = arguments[0];
if ($(e.target).prop('tagName').toLowerCase() == 'input') {
$(e.target).focus();
$(e.target).val('focused');
$(e.target).unbind('blur');
$(e.target).blur(function(){
$(e.target).val('blured');
});
}
}
});
});
</script></code></pre>
<p>or, <a href="http://jsfiddle.net/c5EA4/6/" target="_blank">http://jsfiddle.net/c5EA4/6/</a></p>
<pre class="prettyprint"><code><script>
$(document).ready(function () {
$('#menu').multilevelpushmenu({
onMenuSwipe: function () {
var e = arguments[0];
if ($(e.target).prop('tagName').toLowerCase() == 'input') return false;
}
});
});
</script></code></pre>
<p>Alternatively, you can set swipe option to 'touchscreen' and allow swiping menus only on touch-screen enabled devices.</p>
</div>
<hr />
<div id="examples">
<h2>Examples</h2>
<h3 id="examplebasichtml">Basic <small>(HTML Markup)</small></h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )]
});
});
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/basichtml/basichtml.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<h3 id="examplecovermode">Cover mode</h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, cover mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )],
mode: 'cover'
});
});
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/covermode/covermode.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<h3 id="examplefullexpandcollapse">Full menu collapse</h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )],
fullCollapse: true
});
});
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/fullexpandcollapse/fullexpandcollapse.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<h3 id="exampleresponsive">Responsive menu</h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )],
menuWidth: '25%',
menuHeight: '100%'
});
});
$(window).resize(function () {
$( '#menu' ).multilevelpushmenu( 'redraw' );
});
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/responsive/responsive.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<h3 id="examplecollapsed">Initialize collapsed</h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, overlap mode, initilaize collapsed
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )],
collapsed: true
});
});
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/collapsed/collapsed.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<h3 id="examplertl">Right-to-left sliding</h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, overlap mode, rigth-to-left sliding
$( '#menu' ).multilevelpushmenu({
direction: 'rtl',
backItemIcon: 'fa fa-angle-left',
groupIcon: 'fa fa-angle-right'
});
});
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/rtl/rtl.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<h3 id="examplecustomsize">Custom size</h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )],
menuWidth: 450, // '450px', '30em', '25%' will also work
menuHeight: 500
});
});
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/customsize/customsize.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<h3 id="examplepushmany">Push many containers</h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, overlap mode, push 3 DOM elements
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' ), $( '#pushthisobjalso' ), $( '#pushthisobjtoo' )]
});
});
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/pushmany/pushmany.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<h3 id="exampleoptions">Get/Set options</h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )]
});
// Get value for mode option
$( '#getMode' ).click(function(){
$( this ).find( 'span' ).text( $( '#menu' ).multilevelpushmenu( 'option', 'mode' ) );
});
// Set value for mode option
$( '#setMode' ).click(function(){
// Collapse menu first to ensure good functionality after mode change
$( '#menu' ).multilevelpushmenu( 'collapse', 0 );
// Toggle mode
$( '#menu' ).multilevelpushmenu( 'option', 'mode') == 'overlap' ?
$( this ).find( 'span' ).text( $( '#menu' ).multilevelpushmenu( 'option', 'mode', 'cover' ) ) : $( this ).find( 'span' ).text( $( '#menu' ).multilevelpushmenu( 'option', 'mode', 'overlap' ) );
// Update getMode button info
$( '#getMode' ).find( 'span' ).text( $( '#menu' ).multilevelpushmenu( 'option', 'mode' ) );
});
});
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/options/options.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<h3 id="exampleexpandcollapse">Expand/Collapse options</h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )]
});
// Full collapse
$( '#fullcollapse' ).click(function(){
$( '#menu' ).multilevelpushmenu( 'collapse' );
});
// Base expand
$( '#baseexpand' ).click(function(){
$( '#menu' ).multilevelpushmenu( 'expand' );
});
// Expand to Men's Clothing
$( '#expandmensclothing' ).click(function(){
// Use menu title for expanding just in case you know that there
// is only one menu item with such title. If there are more menus
// with same title, expand/collapse invoked with
// title name as parameter won't work.
$( '#menu' ).multilevelpushmenu( 'expand' , 'Men\'s Clothing' );
// More safe way is to use methods like
// $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' );
// and then invoke expand method with desired menu level object
// (e.g. if we have several menu objects with title 'Mobile Phones' but
// we want to expand the first one)
// var $phonemenu = $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' ).first();
// and then
// $( '#menu' ).multilevelpushmenu( 'expand' , $phonemenu );
});
// Expand to Mobile Phones
$( '#expandmobilephones' ).click(function(){
// Use menu title for expanding just in case you know that there
// is only one menu item with such title. If there are more menus
// with same title, expand/collapse invoked with
// title name as parameter won't work.
$( '#menu' ).multilevelpushmenu( 'expand' , 'Mobile Phones' );
// More safe way is to use methods like
// $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' );
// and then invoke expand method with desired menu level object
// (e.g. if we have several menu objects with title 'Mobile Phones' but
// we want to expand the first one)
// var $phonemenu = $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' ).first();
// and then
// $( '#menu' ).multilevelpushmenu( 'expand' , $phonemenu );
});
// Collapse to the level of 'Devices' menu
$( '#collapsedevices' ).click(function(){
// Have in mind that this will collapse to the level of 'Devices'
// menu (level 1 in our case). So even when open path is not containing
// 'Devices' menu it will collapse expanded menus to level 1; it's
// basically the same as
// $( '#menu' ).multilevelpushmenu( 'collapse' , 1 );
$( '#menu' ).multilevelpushmenu( 'collapse' , 'Devices' );
});
});
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/expandcollapse/expandcollapse.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<h3 id="exampleaddremove">Add/Remove items</h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )]
});
// Expand to Mobile Phones where we will add two
// additional menu items with sub-menus
$( '#menu' ).multilevelpushmenu( 'expand' , $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' ).first() );
// Add iPhone and Samsung items to Mobile Phones menu at position 0
$( '#additems' ).click(function(){
var $addTo = $( '#menu' ).multilevelpushmenu( 'findmenusbytitle' , 'Mobile Phones' ).first();
$( '#menu' ).multilevelpushmenu( 'additems' , addItems , $addTo , 0 );
})
// Remove Samsung item
$( '#removeitems' ).click(function(){
var item = $( '#menu' ).multilevelpushmenu( 'finditemsbyname' , 'Samsung' );
$( '#menu' ).multilevelpushmenu( 'removeitems' , item );
})
});
var addItems = [
{
name: 'iPhone',
id: 'iPhoneItem',
icon: 'fa fa-phone-square',
link: '#',
items: [
{
title: 'iPhones',
id: 'iPhonesMenu',
icon: 'fa fa-phone-square',
items: [
{
name: 'iPhone 4',
icon: 'fa fa-phone-square',
link: '#'
},
{
name: 'iPhone 5',
icon: 'fa fa-phone-square',
link: '#'
}
]
}
]
},
{
name: 'Samsung',
icon: 'fa fa-phone-square',
link: '#',
items: [
{
title: 'Samsung',
icon: 'fa fa-phone-square',
items: [
{
name: 'Samsung Galaxy S II',
icon: 'fa fa-phone-square',
link: '#'
},
{
name: 'Samsung Galaxy S III',
icon: 'fa fa-phone-square',
link: '#'
},
{
name: 'Samsung Galaxy S IV',
icon: 'fa fa-phone-square',
link: '#'
}
]
}
]
}
];
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/addremove/addremove.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<h3 id="exampleevents">Events</h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [$( '#pushobj' )],
onCollapseMenuStart: function() {
$( '#eventpanel' ).append( '<br />Started collapsing...' );
//console.log(arguments);
},
onCollapseMenuEnd: function() {
$( '#eventpanel' ).append( '<br />Collapsing ended!' );
//console.log(arguments);
},
onExpandMenuStart: function() {
$( '#eventpanel' ).append( '<br />Started expanding...' );
//console.log(arguments);
},
onExpandMenuEnd: function() {
$( '#eventpanel' ).append( '<br />Expanding ended!' );
//console.log(arguments);
},
onTitleItemClick: function() {
var event = arguments[0],
$menuLevelHolder = arguments[1],
options = arguments[2],
title = $menuLevelHolder.find( 'h2:first' ).text();
$( '#eventpanel' ).append( '<br />Title item <i>' + title + '</i> clicked!' );
//console.log(arguments);
},
onBackItemClick: function() {
var event = arguments[0],
$menuLevelHolder = arguments[1],
options = arguments[2],
title = $menuLevelHolder.find( 'h2:first' ).text();
$( '#eventpanel' ).append( '<br />Back item on <i>' + title + '</i> menu level clicked!' );
//console.log(arguments);
},
onGroupItemClick: function() {
var event = arguments[0],
$menuLevelHolder = arguments[1],
$item = arguments[2],
options = arguments[3],
title = $menuLevelHolder.find( 'h2:first' ).text(),
itemName = $item.find( 'a:first' ).text();
$( '#eventpanel' ).append( '<br />Group Item <i>' + itemName + '</i>' + ' on <i>' + title + '</i> menu level clicked!' );
//console.log(arguments);
},
onItemClick: function() {
var event = arguments[0],
$menuLevelHolder = arguments[1],
$item = arguments[2],
options = arguments[3],
title = $menuLevelHolder.find( 'h2:first' ).text(),
itemName = $item.find( 'a:first' ).text();
$( '#eventpanel' ).append( '<br />Item <i>' + itemName + '</i>' + ' on <i>' + title + '</i> menu level clicked!' );
//console.log(arguments);
}
});
});
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/events/events.html" role="button">Demo <i class="fa fa-external-link"></i></a>
</div>
<h3 id="examplebasicjs">Basic <small>(JS Array)</small></h3>
<pre class="prettyprint"><code><script>
$(document).ready(function(){
// JS Array implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
menu: arrMenu,
containersToPush: [$( '#pushobj' )]
});
});
// JS Aray instead HTML Markup
var arrMenu = [
{
title: 'All Categories',
icon: 'fa fa-reorder',
items: [
{
name: 'Devices',
icon: 'fa fa-laptop',
link: '#',
items: [
{
title: 'Devices',
icon: 'fa fa-laptop',
items: [
{
name: 'Mobile Phones',
icon: 'fa fa-phone',
link: '#',
items: [
{
title: 'Mobile Phones',
icon: 'fa fa-phone',
link: '#',
items: [
{
name: 'Super Smart Phone',
link: '#'
},
{
name: 'Thin Magic Mobile',
link: '#'
},
{
name: 'Performance Crusher',
link: '#'
},
{
name: 'Futuristic Experience',
link: '#'
}
]
}
]
},
{
name: 'Televisions',
icon: 'fa fa-desktop',
link: '#',
items: [
{
title: 'Televisions',
icon: 'fa fa-desktop',
link: '#',
items: [
{
name: 'Flat Super Screen',
link: '#'
},
{
name: 'Gigantic LED',
link: '#'
},
{
name: 'Power Eater',
link: '#'
},
{
name: '3D Experience',
link: '#'
},
{
name: 'Classic Comfort',
link: '#'
}
]
}
]
},
{
name: 'Cameras',
icon: 'fa fa-camera-retro',
link: '#',
items: [
{
title: 'Cameras',
icon: 'fa fa-camera-retro',
link: '#',
items: [
{
name: 'Smart Shot',
link: '#'
},
{
name: 'Power Shooter',
link: '#'
},
{
name: 'Easy Photo Maker',
link: '#'
},
{
name: 'Super Pixel',
link: '#'
}
]
}
]
}
]
}
]
},
{
name: 'Magazines',
icon: 'fa fa-book',
link: '#',
items: [
{
title: 'Magazines',
icon: 'fa fa-book',
items: [
{
name: 'National Geographics',
link: '#'
},
{
name: 'Scientific American',
link: '#'
},
{
name: 'The Spectator',
link: '#'
},
{
name: 'Rambler',
link: '#'
},
{
name: 'Physics World',
link: '#'
},
{
name: 'The New Scientist',
link: '#'
}
]
}
]
},
{
name: 'Store',
icon: 'fa fa-shopping-cart',
link: '#',
items: [
{
title: 'Store',
icon: 'fa fa-shopping-cart',
items: [
{
name: 'Clothes',
icon: 'fa fa-tags',
link: '#',
items: [
{
title: 'Clothes',
icon: 'fa fa-tags',
items: [
{
name: 'Women\'s Clothing',
icon: 'fa fa-female',
link: '#',
items: [
{
title: 'Women\'s Clothing',
icon: 'fa fa-female',
items: [
{
name: 'Tops',
link: '#'
},
{
name: 'Dresses',
link: '#'
},
{
name: 'Trousers',
link: '#'
},
{
name: 'Shoes',
link: '#'
},
{
name: 'Sale',
link: '#'
}
]
}
]
},
{
name: 'Men\'s Clothing',
icon: 'fa fa-male',
link: '#',
items: [
{
title: 'Men\'s Clothing',
icon: 'fa fa-male',
items: [
{
name: 'Shirts',
link: '#'
},
{
name: 'Trousers',
link: '#'
},
{
name: 'Shoes',
link: '#'
},
{
name: 'Sale',
link: '#'
}
]
}
]
}
]
}
]
},
{
name: 'Jewelry',
link: '#'
},
{
name: 'Music',
link: '#'
},
{
name: 'Grocery',
link: '#'
}
]
}
]
},
{
name: 'Collections',
link: '#'
},
{
name: 'Credits',
link: '#'
}
]
}
];
</script></code></pre>
<a target="_blank" class="btn btn-lg btn-success" href="demo/basicjs/basicjs.html" role="button">Demo <i class="fa fa-external-link"></i></a>
<hr />
<div id="license">
<h2>License</h2>
<p>Licensed under the MIT license. <a href="http://www.opensource.org/licenses/mit-license.php">http://www.opensource.org/licenses/mit-license.php</a></p>
</div>
</div> <\!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"><\/script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')<\/script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"><\/script>
<script src="js/vendor/jquery.easing/jquery.easing.1.3.js"><\/script>
<script src="//vjs.zencdn.net/4.2/video.js"><\/script>
<script src="js/plugins.js"><\/script>
<script src="js/main.js"><\/script>
<\!-- Google Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-45795667-3']);
_gaq.push(['_setDomainName', 'make.rs']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
<\/script>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
* Known issue: no IE 6 support.
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/**
* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-size: 100%; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Address `font-family` inconsistency between `textarea` and other form
* elements.
*/
html,
button,
input,
select,
textarea {
font-family: sans-serif;
}
/**
* Address margins handled incorrectly in IE 6/7.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/**
* Address font sizes and margins set differently in IE 6/7.
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
* and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
font-size: 1em;
margin: 1.33em 0;
}
h5 {
font-size: 0.83em;
margin: 1.67em 0;
}
h6 {
font-size: 0.67em;
margin: 2.33em 0;
}
/**
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
blockquote {
margin: 1em 40px;
}
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address differences between Firefox and other browsers.
* Known issue: no IE 6/7 normalization.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Address styling not present in IE 6/7/8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address margins set differently in IE 6/7.
*/
p,
pre {
margin: 1em 0;
}
/**
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/**
* Address CSS quotes not supported in IE 6/7.
*/
q {
quotes: none;
}
/**
* Address `quotes` property not supported in Safari 4.
*/
q:before,
q:after {
content: '';
content: none;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Lists
========================================================================== */
/**
* Address margins set differently in IE 6/7.
*/
dl,
menu,
ol,
ul {
margin: 1em 0;
}
dd {
margin: 0 0 0 40px;
}
/**
* Address paddings set differently in IE 6/7.
*/
menu,
ol,
ul {
padding: 0 0 0 40px;
}
/**
* Correct list images handled incorrectly in IE 7.
*/
nav ul,
nav ol {
list-style: none;
list-style-image: none;
}
/* ==========================================================================
Embedded content
========================================================================== */
/**
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improve image quality when scaled in IE 7.
*/
img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
}
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/**
* Correct margin displayed oddly in IE 6/7.
*/
form {
margin: 0;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct color not being inherited in IE 6/7/8/9.
* 2. Correct text not wrapping in Firefox 3.
* 3. Correct alignment displayed oddly in IE 6/7.
*/
legend {
border: 0; /* 1 */
padding: 0;
white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */
}
/**
* 1. Correct font size not being inherited in all browsers.
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
* and Chrome.
* 3. Improve appearance and consistency in all browsers.
*/
button,
input,
select,
textarea {
font-size: 100%; /* 1 */
margin: 0; /* 2 */
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
}
/**
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
*overflow: visible; /* 4 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1. Address box sizing set to content-box in IE 8/9.
* 2. Remove excess padding in IE 8/9.
* 3. Remove excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
*height: 13px; /* 3 */
*width: 13px; /* 3 */
}
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Remove inner padding and border in Firefox 3+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
html {
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/
audio,
canvas,
img,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browse Happy prompt
========================================================================== */
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
body {
font-family: 'Open Sans Condensed', sans-serif !important;
font-size: 1.2em !important;
padding-top: 70px;
}
h1, h2, h3 {
font-family: inherit !important;
}
button, input, select, textarea {
font-family: inherit !important;
}
.dropdown-menu {
font-size: inherit !important;
}
.prettyprint {
font-size: .8em !important;
}
.twitter-share-button {
margin-top: 15px;
}
.video-js {
background-color: #fff;
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}</script>
</body>
</html>