-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
154 lines (152 loc) · 9.37 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie ie6 lte9 lte8 lte7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="ie ie7 lte9 lte8 lte7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="ie ie8 lte9 lte8" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]> <html lang="en"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<head>
<title>MultipleLevelMenu</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link href="multiplelevelmenu.min.css" rel="stylesheet">
<link href="demo.min.css" rel="stylesheet">
</head>
<body>
<button class="multiple-level-menu_trigger">☰</button>
<div class="multiple-level-menu_wrapper">
<nav class="multiple-level-menu">
<ul class="multiple-level-menu_list">
<li class="multiple-level-menu_close">Close X</li>
<li><a href="#what-is-it">What is it?</a></li>
<li><a href="#example-markup">Example markup</a></li>
<li><a href="#initialisation">Initialisation</a></li>
<li><a href="#customisation">Customisation</a></li>
<li><a href="#questions-issues-enhacements-pull-requests">Questions, issues, enhancements, pull requests</a></li>
</ul>
</nav>
<header class="site-header">
<h1>MultipleLevelMenu</h1>
<h5>created by <a href="http://www.jtlr.co.uk" title="JTLR">JTLR</a> | view on <a href="https://github.com/JTLR/MultipleLevelMenu" title="GitHub">GitHub</a></h5>
</header>
<main class="site-main">
<div class="strip header" id="what-is-it">
<h2>What is it?</h2>
</div>
<div class="strip content">
<p>MultipleLevelMenu (MLM) is a style and markup agnostic <a href="http://jquery.com" title="jQuery">jQuery</a> plugin for controlling menus with multiple levels.</p>
<p>Unlike some other menu plugins, MLM won't inject inline CSS into your DOM elements, create extra markup post initialisation or require HTML duplication. It simply adds active classes to your menu and its lists as required.</p>
<p>All you need to do for MLM to function correctly is to provide an unordered list, or set of nested unordered lists.</p>
</div>
<div class="strip header" id="example-markup">
<h2>Example markup</h2>
</div>
<div class="strip row">
<div class="col">
<p>As mentioned above, MLM isn't overly strict on what HTML markup you use, or where you put it. All it requires is a list or set of nested lists within a wrapping element probably a <code class="language-markup"><nav></code> or <code class="language-markup"><div></code>, a wrapping element around the rest of the body and a button to trigger the menu's active state.</p>
<p>A very simple example can be seen <span class="break-show">to the right</span><span class="break-hide">below</span></p>
</div>
<div class="col">
<pre><code class="language-markup"><div class="multiple-level-menu_wrapper">
<button class="multiple-level-menu_trigger">MENU</button>
<nav class="multiple-level-menu">
<ul class="multiple-level-menu_list">
<li>Menu item</li>
<li>
Menu item +
<ul class="multiple-level-menu_list">
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
</ul>
</li>
<li>Menu item</li>
<li>Menu item</li>
</ul>
</nav>
<!-- MORE HTML -->
</div></code></pre>
</div>
</div>
<div class="strip header" id="initialisation">
<h2>Initialisation</h2>
</div>
<div class="strip row">
<div class="col">
<p>To initialise MLM at the most basic level, utilising all the default options, just include <a href="http://jquery.com" title="jQuery">jQuery</a> (1.9 or higher), jquery.multiplelevelmenu.min.js and call <code class="language-javascript">multipleLevelMenu()</code> on the containing element of your menu.</p>
<p>Without specifying any options MLM will assume that:</p>
<ul>
<li>The trigger element(s) for the menu have a class of <strong>multiple-level-menu_trigger</strong></li>
<li>The close element(s) for each list have a class of <strong>multiple-level-menu_close</strong></li>
<li>The main wrapper element for your site has a class of <strong>multiple-level-menu_wrapper</strong></li>
</ul>
<p>The snippet <span class="break-show">to the right</span><span class="break-hide">below</span> should be placed before the closing <code class="language-markup"></body></code> tag.</p>
</div>
<div class="col">
<pre><code class="language-markup"><script src="jquery-2.1.1.min.js"></script>
<script src="jquery.multiplelevelmenu.min.js"></script>
<script>
$('.multiple-level-menu').multipleLevelMenu();
</script></code></pre>
</div>
</div>
<div class="strip header" id="customisation">
<h2>Customisation</h2>
</div>
<div class="strip row">
<div class="col">
<p>MLM currently offers a few options for customisation:</p>
<ul>
<li><strong>triggerElement:</strong> The jQuery object used to trigger the entire menu.</li>
<li><strong>closeElement:</strong> The jQuery object used to close each individual list.</li>
<li><strong>activeClass:</strong> The string used as the active class for MLM and each list.</li>
<li><strong>disableAbove:</strong> The viewport width at which to disable MLM and remove all currently applied active classes above. If set to <strong>false</strong>, MLM won't be disabled above any screen width.</li>
<li><strong>disableBelow:</strong> The viewport width at which to disable MLM and remove all currently applied active classes below. If set to <strong>false</strong>, MLM won't be disabled below any screen width.</li>
<li><strong>preserveState:</strong> Boolean variable. If set to true child lists will retain their active states when the menu is closed.</li>
</ul>
<p><span class="break-show">To the right</span><span class="break-hide">Below</span> are some example initialisations of MLM.</p>
</div>
<div class="col">
<pre><code class="language-javascript">// Default initialisation options
$('.multiple-level-menu').multipleLevelMenu({
triggerElement: $('.multiple-level-menu_trigger'),
closeElement: $('.multiple-level-menu_close'),
wrapperElement: $('.multiple-level-menu_wrapper'),
activeClass: 'is-active',
disableAbove: false,
disableBelow: false,
preserveState: false
});
// Example ammended initialisation options
$('.menu').multipleLevelMenu({
triggerElement: $('.menu-trigger'),
closeElement: $('.list-close'),
wrapperElement: $('.wrapper'),
activeClass: 'open',
disableAbove: 768,
disableBelow: 320,
preserveState: true
});
</code></pre>
</div>
</div>
<div class="strip header" id="questions-issues-enhacements-pull-requests">
<h2>Questions, issues, enhancements, pull requests</h2>
</div>
<div class="strip content">
<p>If you have any questions about MLM feel free to <a href="https://twitter.com/_JTLR" title="tweet me">tweet me</a>.</p>
<p>For any issues, bugs or pull requests please go to the <a href="https://github.com/JTLR/MultipleLevelMenu" title="MLM repo on GitHub">MLM repo on GitHub</a>.</p>
</div>
</main>
<footer class="site-footer">
<p>Created by <a href="http://www.jtlr.co.uk" title="JTLR">JTLR</a> | Licensed under <a href="https://github.com/JTLR/MultipleLevelMenu/blob/master/LICENSE" title="MIT">MIT</a> | View on <a href="https://github.com/JTLR/MultipleLevelMenu" title="GitHub">GitHub</a> | Landing page design inspiration from <a href="http://codeguide.co/" title="Code Guide">Code Guide</a> by <a href="https://github.com/mdo" title="@mdo">@mdo</a>
</footer>
</div>
<script src="prism.js"></script>
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery.multiplelevelmenu.min.js"></script>
<script>
$('.multiple-level-menu').multipleLevelMenu();
</script>
</body>