forked from 352Media/flexMenu
/
demo.html
executable file
·104 lines (92 loc) · 3.54 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
<!doctype html>
<!--[if lt IE 8]> <html lang="en-us" class="no-js lt-ie8"> <![endif]-->
<!--[if gte IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>flexMenu!</title>
<meta name="description" content="flexMenu is a jQuery plugin that lets you create responsive menu bars that automatically collapse into a "more" drop-down when they run out of space.
">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="demo.css">
<script src="modernizr.custom.js"></script>
<link href='https://fonts.googleapis.com/css?family=Quantico:700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="header">
<h1>flexMenu</h1>
<p>flexMenu is a jQuery plugin that lets you create responsive menu bars. When there's only space to display some of the items in the menu, the rest of the items collapse into a "more" drop-down. When there's only space to display one or two items, all the items collapse into a "menu" drop-down. Try it out - just resize the page, or view it on a smartphone!</p>
</div>
<div role="main" class="main">
<ul class="menu flex">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
<li><a href="#">Six</a></li>
<li><a href="#">Seven</a></li>
<li><a href="#">Eight</a></li>
<li><a href="#">Nine</a></li>
<li><a href="#">Ten</a></li>
<li><a href="#">Eleven</a></li>
<li><a href="#">Twelve</a></li>
<li><a href="#">Thirteen</a></li>
</ul>
<h2>Ready to get started?</h2>
<p>A quick overview is available below. You can <a href="https://github.com/352Media/flexMenu">view flexMenu on GitHub</a> to get more details and grab a copy of the plugin.</p>
<h2>The Markup</h2>
<pre>
<ul class="flex menu">
<li><a href="page.html">Menu Item</a></li>
<!-- more list items... -->
</ul></pre>
<h2>The JavaScript</h2>
<pre>$('ul.menu.flex').flexMenu();</pre>
<h2>Multiple Menus</h2>
<p>This example has two menus. They can be opened on click, and opening one will close the other.</p>
<ul class="menu flex-multi">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
<li><a href="#">Six</a></li>
<li><a href="#">Seven</a></li>
<li><a href="#">Eight</a></li>
<li><a href="#">Nine</a></li>
<li><a href="#">Ten</a></li>
<li><a href="#">Eleven</a></li>
<li><a href="#">Twelve</a></li>
<li><a href="#">Thirteen</a></li>
</ul>
<ul class="menu flex-multi">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
<li><a href="#">Six</a></li>
<li><a href="#">Seven</a></li>
<li><a href="#">Eight</a></li>
<li><a href="#">Nine</a></li>
<li><a href="#">Ten</a></li>
<li><a href="#">Eleven</a></li>
<li><a href="#">Twelve</a></li>
<li><a href="#">Thirteen</a></li>
</ul>
<div class="clear"></div>
</div>
<div class="footer">
<p>A <a href="http://www.352media.com/">352 Inc.</a> shindig. Coded with love in Atlanta by <a href="http://www.ryandebeasi.com/">Ryan DeBeasi</a>.
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="flexmenu.min.js"></script>
<script>
$('ul.menu.flex').flexMenu();
$('ul.menu.flex-multi').flexMenu({
showOnHover: false
})
</script>
</body>
</html>