質問編集履歴
1
jsとhtmlの追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -12,6 +12,21 @@
|
|
|
12
12
|
よろしくお願いいたします。
|
|
13
13
|
|
|
14
14
|
```html
|
|
15
|
+
|
|
16
|
+
<body class="drawer drawer--right">
|
|
17
|
+
<header role="banner">
|
|
18
|
+
<button type="button" class="drawer-toggle drawer-hamburger">
|
|
19
|
+
<span class="sr-only">toggle navigation</span>
|
|
20
|
+
<span class="drawer-hamburger-icon"></span>
|
|
21
|
+
</button>
|
|
22
|
+
<nav class="drawer-nav" role="navigation">
|
|
23
|
+
<ul class="drawer-menu">
|
|
24
|
+
<li><a class="drawer-menu-item" href="/"><i class="fa fa-home" aria-hidden="true"></i>Home</a></li>
|
|
25
|
+
<li><a class="drawer-menu-item" href=""><i class="fa fa-sign-in" aria-hidden="true"></i>お問合わせ</a></li>
|
|
26
|
+
</ul>
|
|
27
|
+
</nav>
|
|
28
|
+
</header>
|
|
29
|
+
|
|
15
30
|
<div class="search">
|
|
16
31
|
<div class="container">
|
|
17
32
|
<div class="row">
|
|
@@ -63,4 +78,205 @@
|
|
|
63
78
|
</div>
|
|
64
79
|
</div>
|
|
65
80
|
|
|
81
|
+
|
|
82
|
+
<script type="text/javascript">
|
|
83
|
+
$(document).ready(function() {
|
|
84
|
+
$('.drawer').drawer({
|
|
85
|
+
class: {
|
|
86
|
+
navClass: 'drawer-nav',
|
|
87
|
+
toggle: 'drawer-toggle',
|
|
88
|
+
overlay: 'drawer-overlay',
|
|
89
|
+
open: 'drawer-open',
|
|
90
|
+
close: 'drawer-close',
|
|
91
|
+
dropdown: 'drawer-dropdown'
|
|
92
|
+
}});
|
|
93
|
+
|
|
94
|
+
});
|
|
95
|
+
</script>
|
|
96
|
+
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
```javascript
|
|
100
|
+
/*!
|
|
101
|
+
* jquery-drawer v3.2.2
|
|
102
|
+
* Flexible drawer menu using jQuery, iScroll and CSS.
|
|
103
|
+
* http://git.blivesta.com/drawer
|
|
104
|
+
* License : MIT
|
|
105
|
+
* Author : blivesta <design@blivesta.com> (http://blivesta.com/)
|
|
106
|
+
*/
|
|
107
|
+
|
|
108
|
+
;(function umd(factory) {
|
|
109
|
+
'use strict';
|
|
110
|
+
if (typeof define === 'function' && define.amd) {
|
|
111
|
+
define(['jquery'], factory);
|
|
112
|
+
} else if (typeof exports === 'object') {
|
|
113
|
+
module.exports = factory(require('jquery'));
|
|
114
|
+
} else {
|
|
115
|
+
factory(jQuery);
|
|
116
|
+
}
|
|
117
|
+
}(function Drawer($) {
|
|
118
|
+
'use strict';
|
|
119
|
+
var namespace = 'drawer';
|
|
120
|
+
var touches = typeof document.ontouchstart != 'undefined';
|
|
121
|
+
var __ = {
|
|
122
|
+
init: function init(options) {
|
|
123
|
+
options = $.extend({
|
|
124
|
+
iscroll: {
|
|
125
|
+
mouseWheel: true,
|
|
126
|
+
preventDefault: false
|
|
127
|
+
},
|
|
128
|
+
showOverlay: true
|
|
129
|
+
}, options);
|
|
130
|
+
|
|
131
|
+
__.settings = {
|
|
132
|
+
state: false,
|
|
133
|
+
events: {
|
|
134
|
+
opened: 'drawer.opened',
|
|
135
|
+
closed: 'drawer.closed'
|
|
136
|
+
},
|
|
137
|
+
dropdownEvents: {
|
|
138
|
+
opened: 'shown.bs.dropdown',
|
|
139
|
+
closed: 'hidden.bs.dropdown'
|
|
140
|
+
}
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
__.settings.class = $.extend({
|
|
144
|
+
nav: 'drawer-nav',
|
|
145
|
+
toggle: 'drawer-toggle',
|
|
146
|
+
overlay: 'drawer-overlay',
|
|
147
|
+
open: 'drawer-open',
|
|
148
|
+
close: 'drawer-close',
|
|
149
|
+
dropdown: 'drawer-dropdown'
|
|
150
|
+
}, options.class);
|
|
151
|
+
|
|
152
|
+
return this.each(function instantiateDrawer() {
|
|
153
|
+
var _this = this;
|
|
154
|
+
var $this = $(this);
|
|
155
|
+
var data = $this.data(namespace);
|
|
156
|
+
|
|
157
|
+
if (!data) {
|
|
158
|
+
options = $.extend({}, options);
|
|
159
|
+
$this.data(namespace, { options: options });
|
|
160
|
+
|
|
161
|
+
__.refresh.call(_this);
|
|
162
|
+
|
|
163
|
+
if (options.showOverlay) {
|
|
164
|
+
__.addOverlay.call(_this);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
$('.' + __.settings.class.toggle).on('click.' + namespace, function toggle() {
|
|
168
|
+
__.toggle.call(_this);
|
|
169
|
+
return _this.iScroll.refresh();
|
|
170
|
+
});
|
|
171
|
+
|
|
172
|
+
$(window).on('resize.' + namespace, function close() {
|
|
173
|
+
__.close.call(_this);
|
|
174
|
+
return _this.iScroll.refresh();
|
|
175
|
+
});
|
|
176
|
+
|
|
177
|
+
$('.' + __.settings.class.dropdown)
|
|
178
|
+
.on(__.settings.dropdownEvents.opened + ' ' + __.settings.dropdownEvents.closed, function onOpenedOrClosed() {
|
|
179
|
+
return _this.iScroll.refresh();
|
|
180
|
+
});
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
}); // end each
|
|
184
|
+
},
|
|
185
|
+
|
|
186
|
+
refresh: function refresh() {
|
|
187
|
+
this.iScroll = new IScroll(
|
|
188
|
+
'.' + __.settings.class.nav,
|
|
189
|
+
$(this).data(namespace).options.iscroll
|
|
190
|
+
);
|
|
191
|
+
},
|
|
192
|
+
|
|
193
|
+
addOverlay: function addOverlay() {
|
|
194
|
+
var $this = $(this);
|
|
195
|
+
var $overlay = $('<div>').addClass(__.settings.class.overlay + ' ' + __.settings.class.toggle);
|
|
196
|
+
|
|
197
|
+
return $this.append($overlay);
|
|
198
|
+
},
|
|
199
|
+
|
|
200
|
+
toggle: function toggle() {
|
|
201
|
+
var _this = this;
|
|
202
|
+
|
|
203
|
+
if (__.settings.state) {
|
|
204
|
+
return __.close.call(_this);
|
|
205
|
+
} else {
|
|
206
|
+
return __.open.call(_this);
|
|
207
|
+
}
|
|
208
|
+
},
|
|
209
|
+
|
|
210
|
+
open: function open() {
|
|
211
|
+
var $this = $(this);
|
|
212
|
+
|
|
213
|
+
if (touches) {
|
|
214
|
+
$this.on('touchmove.' + namespace, function disableTouch(event) {
|
|
215
|
+
event.preventDefault();
|
|
216
|
+
});
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
return $this
|
|
220
|
+
.removeClass(__.settings.class.close)
|
|
221
|
+
.addClass(__.settings.class.open)
|
|
222
|
+
.drawerCallback(function triggerOpenedListeners() {
|
|
223
|
+
__.settings.state = true;
|
|
224
|
+
$this.trigger(__.settings.events.opened);
|
|
225
|
+
});
|
|
226
|
+
},
|
|
227
|
+
|
|
228
|
+
close: function close() {
|
|
229
|
+
var $this = $(this);
|
|
230
|
+
|
|
231
|
+
if (touches) $this.off('touchmove.' + namespace);
|
|
232
|
+
|
|
233
|
+
return $this
|
|
234
|
+
.removeClass(__.settings.class.open)
|
|
235
|
+
.addClass(__.settings.class.close)
|
|
236
|
+
.drawerCallback(function triggerClosedListeners() {
|
|
237
|
+
__.settings.state = false;
|
|
238
|
+
$this.trigger(__.settings.events.closed);
|
|
239
|
+
});
|
|
240
|
+
},
|
|
241
|
+
|
|
242
|
+
destroy: function destroy() {
|
|
243
|
+
return this.each(function destroyEach() {
|
|
244
|
+
var _this = this;
|
|
245
|
+
var $this = $(this);
|
|
246
|
+
$('.' + __.settings.class.toggle).off('click.' + namespace);
|
|
247
|
+
$(window).off('resize.' + namespace);
|
|
248
|
+
$('.' + __.settings.class.dropdown).off(__.settings.dropdownEvents.opened + ' ' + __.settings.dropdownEvents.closed);
|
|
249
|
+
_this.iScroll.destroy();
|
|
250
|
+
$this
|
|
251
|
+
.removeData(namespace)
|
|
252
|
+
.find('.' + __.settings.class.overlay)
|
|
253
|
+
.remove();
|
|
254
|
+
});
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
};
|
|
258
|
+
|
|
259
|
+
$.fn.drawerCallback = function drawerCallback(callback) {
|
|
260
|
+
var end = 'transitionend webkitTransitionEnd';
|
|
261
|
+
return this.each(function setAnimationEndHandler() {
|
|
262
|
+
var $this = $(this);
|
|
263
|
+
$this.on(end, function invokeCallbackOnAnimationEnd() {
|
|
264
|
+
$this.off(end);
|
|
265
|
+
return callback.call(this);
|
|
266
|
+
});
|
|
267
|
+
});
|
|
268
|
+
};
|
|
269
|
+
|
|
270
|
+
$.fn.drawer = function drawer(method) {
|
|
271
|
+
if (__[method]) {
|
|
272
|
+
return __[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
|
273
|
+
} else if (typeof method === 'object' || !method) {
|
|
274
|
+
return __.init.apply(this, arguments);
|
|
275
|
+
} else {
|
|
276
|
+
$.error('Method ' + method + ' does not exist on jQuery.' + namespace);
|
|
277
|
+
}
|
|
278
|
+
};
|
|
279
|
+
|
|
280
|
+
}));
|
|
281
|
+
|
|
66
282
|
```
|