-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
128 lines (110 loc) · 5.18 KB
/
index.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pusha | Off-canvas Navigation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baseguide/3.2.1/css/baseguide.min.css" />
<link rel="stylesheet" href="dist/css/pusha-demo.min.css" />
</head>
<body class="page">
<div class="pusha-panel pusha-panel--left" aria-hidden="true">
<div class="pusha-panel__content">
<div class="pusha-panel__inner">
<nav>
<ul class="list-unstyled menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="pusha-panel pusha-panel--right" aria-hidden="true">
<div class="pusha-panel__content">
<div class="pusha-panel__inner">
<button class="btn pusha-panel__close" data-close>Close</button>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<header class="page__header pusha-push">
<div class="container">
<button class="btn pull-left js-open-left-menu" aria-expanded="false">Left Menu</button>
<button class="btn pull-right js-open-right-menu" aria-expanded="false">Right Menu</button>
</div>
</header>
<div class="pusha-wrapper">
<div class="page__content">
<div class="container">
<h1>Pusha</h1>
<p>Pusha is a lightweight but complete off-canvas solution.</p>
<p>
<a href="https://github.com/slavanga/pusha/archive/master.zip">Download</a> |
<a href="https://github.com/slavanga/pusha">View on GitHub</a>
</p>
<hr>
<h3>Highlights</h3>
<ul>
<li>Smooth transitions</li>
<li>No dependencies</li>
<li>Left, right, top and bottom positioning</li>
<li>Four modes: push, pull, overlay and fade</li>
<li>Custom styling using Sass variables and mixins</li>
<li>Support for fixed elements</li>
<li>iOS rubber band effect disabled by default</li>
</ul>
<h3>Browser Support</h3>
<ul>
<li>Chrome</li>
<li>Firefox</li>
<li>IE 10+</li>
<li>Edge</li>
<li>Safari (Mac)</li>
<li>Android 4+</li>
<li>iOS 8+</li>
</ul>
<h3>Inspired By…</h3>
<ul>
<li><a href="http://mmenu.frebsite.nl/">mmenu</a></li>
<li><a href="https://chrisyee.ca/pushy/">Pushy</a></li>
<li><a href="https://slideout.js.org/">Slideout.js</a></li>
</ul>
</div>
</div>
<div class="page__footer">
<div class="container">
<p class="small text-center">
<a href="https://github.com/slavanga/pusha/blob/master/README.md">Documentation</a> •
<a href="https://github.com/slavanga/pusha/issues">Issues</a><br>
Licensed under the <a href="https://github.com/slavanga/pusha/blob/master/LICENSE">MIT License</a>.
</p>
</div>
</div>
</div>
<script src="dist/js/pusha.min.js"></script>
<script>
var menuLeft = new Pusha('.pusha-panel--left', {
onOpen: function() {
console.log('Left panel opened.');
},
onClose: function() {
console.log('Left panel closed.');
}
});
var menuRight = new Pusha('.pusha-panel--right', {
onOpen: function() {
console.log('Reft panel opened.');
},
onClose: function() {
console.log('Right panel closed.');
}
});
document.querySelector('.js-open-left-menu').addEventListener('click', menuLeft.open);
document.querySelector('.js-open-right-menu').addEventListener('click', menuRight.open);
</script>
</body>
</html>