teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問バーガーメニューのページ内遷移で閉じたい

編集履歴

質問編集履歴

3

勘違いで先程記載したものは間違いでした。現在使っているものに書き直しました。

2017/12/13 18:13

投稿

KEJ
KEJ

スコア14

test CHANGED
File without changes
test CHANGED
@@ -6,206 +6,260 @@
6
6
 
7
7
 
8
8
 
9
- スクリプトは下記を使っています。
10
-
11
- [http://git.blivesta.com/drawer](http://git.blivesta.com/drawer)
12
-
13
-
14
-
15
- ```javascript
16
-
17
- ! function (e) {
18
-
19
- "use strict";
20
-
21
- "function" == typeof define && define.amd ? define(["jquery"], e) : "object" == typeof exports ? module.exports = e(require("jquery")) : e(jQuery)
22
-
23
- }(function (e) {
24
-
25
- "use strict";
26
-
27
- var t = "drawer",
28
-
29
- s = "undefined" != typeof document.ontouchstart,
30
-
31
- n = {
32
-
33
- init: function (s) {
34
-
35
- return s = e.extend({
36
-
37
- iscroll: {
38
-
39
- mouseWheel: !0,
40
-
41
- preventDefault: !1
42
-
43
- },
44
-
45
- showOverlay: !0
46
-
47
- }, s), n.settings = {
48
-
49
- state: !1,
50
-
51
- events: {
52
-
53
- opened: "drawer.opened",
54
-
55
- closed: "drawer.closed"
56
-
57
- },
58
-
59
- dropdownEvents: {
60
-
61
- opened: "shown.bs.dropdown",
62
-
63
- closed: "hidden.bs.dropdown"
64
-
65
- }
66
-
67
- }, n.settings["class"] = e.extend({
68
-
69
- nav: "drawer-nav",
70
-
71
- toggle: "drawer-toggle",
72
-
73
- overlay: "drawer-overlay",
74
-
75
- open: "drawer-open",
76
-
77
- close: "drawer-close",
78
-
79
- dropdown: "drawer-dropdown"
80
-
81
- }, s["class"]), this.each(function () {
82
-
83
- var o = this,
84
-
85
- r = e(this),
86
-
87
- i = r.data(t);
88
-
89
- i || (s = e.extend({}, s), r.data(t, {
90
-
91
- options: s
92
-
93
- }), n.refresh.call(o), s.showOverlay && n.addOverlay.call(o), e("." + n.settings["class"].toggle).on("click." + t, function () {
94
-
95
- return n.toggle.call(o), o.iScroll.refresh()
96
-
97
- }), e(window).on("resize." + t, function () {
98
-
99
- return n.close.call(o), o.iScroll.refresh()
100
-
101
- }), e("." + n.settings["class"].dropdown).on(n.settings.dropdownEvents.opened + " " + n.settings.dropdownEvents.closed, function () {
102
-
103
- return o.iScroll.refresh()
104
-
105
- }))
106
-
107
- })
108
-
109
- },
110
-
111
- refresh: function () {
112
-
113
- this.iScroll = new IScroll("." + n.settings["class"].nav, e(this).data(t).options.iscroll)
114
-
115
- },
116
-
117
- addOverlay: function () {
118
-
119
- var t = e(this),
120
-
121
- s = e("<div>").addClass(n.settings["class"].overlay + " " + n.settings["class"].toggle);
122
-
123
- return t.append(s)
124
-
125
- },
126
-
127
- toggle: function () {
128
-
129
- var e = this;
130
-
131
- return n.settings.state ? n.close.call(e) : n.open.call(e)
132
-
133
- },
134
-
135
- open: function () {
136
-
137
- var o = e(this);
138
-
139
- return s && o.on("touchmove." + t, function (e) {
140
-
141
- e.preventDefault()
142
-
143
- }), o.removeClass(n.settings["class"].close).addClass(n.settings["class"].open).css({
144
-
145
- overflow: "hidden"
146
-
147
- }).drawerCallback(function () {
148
-
149
- n.settings.state = !0, o.trigger(n.settings.events.opened)
150
-
151
- })
152
-
153
- },
154
-
155
- close: function () {
156
-
157
- var o = e(this);
158
-
159
- return s && o.off("touchmove." + t), o.removeClass(n.settings["class"].open).addClass(n.settings["class"].close).css({
160
-
161
- overflow: "auto"
162
-
163
- }).drawerCallback(function () {
164
-
165
- n.settings.state = !1, o.trigger(n.settings.events.closed)
166
-
167
- })
168
-
169
- },
170
-
171
- destroy: function () {
172
-
173
- return this.each(function () {
174
-
175
- var s = this,
176
-
177
- o = e(this);
178
-
179
- e("." + n.settings["class"].toggle).off("click." + t), e(window).off("resize." + t), e("." + n.settings["class"].dropdown).off(n.settings.dropdownEvents.opened + " " + n.settings.dropdownEvents.closed), s.iScroll.destroy(), o.removeData(t).find("." + n.settings["class"].overlay).remove()
180
-
181
- })
182
-
183
- }
184
-
185
- };
186
-
187
- e.fn.drawerCallback = function (t) {
188
-
189
- var s = "transitionend webkitTransitionEnd";
190
-
191
- return this.each(function () {
192
-
193
- var n = e(this);
194
-
195
- n.on(s, function () {
196
-
197
- return n.off(s), t.call(this)
198
-
199
- })
200
-
201
- })
202
-
203
- }, e.fn.drawer = function (s) {
204
-
205
- return n[s] ? n[s].apply(this, Array.prototype.slice.call(arguments, 1)) : "object" != typeof s && s ? void e.error("Method " + s + " does not exist on jQuery." + t) : n.init.apply(this, arguments)
206
-
207
- }
208
-
209
- });
9
+ ```html
10
+
11
+ <!doctype html>
12
+
13
+ <html>
14
+
15
+ <head>
16
+
17
+ <meta charset="UTF-8">
18
+
19
+ <title>無題ドキュメント</title>
20
+
21
+ <style>
22
+
23
+ .nav_container {
24
+
25
+ position: fixed;
26
+
27
+ top: 0;
28
+
29
+ width: 100%;
30
+
31
+ height: 50px;
32
+
33
+ z-index: 19;
34
+
35
+ background-color: #61a951;
36
+
37
+ }
38
+
39
+ .menu-trigger, .menu-trigger span {
40
+
41
+ display: inline-block;
42
+
43
+ transition: all .4s;
44
+
45
+ box-sizing: border-box;
46
+
47
+ cursor : pointer;
48
+
49
+ }
50
+
51
+ .menu-trigger {
52
+
53
+ position: fixed;
54
+
55
+ top: -5px;
56
+
57
+ right: 10px;
58
+
59
+ width: 35px;
60
+
61
+ height: 56px;
62
+
63
+ z-index: 20;
64
+
65
+ }
66
+
67
+ .menu-trigger span {
68
+
69
+ position: absolute;
70
+
71
+ background: #fff;
72
+
73
+ width: 35px;
74
+
75
+ height: 2px;
76
+
77
+ margin: auto;
78
+
79
+ }
80
+
81
+ .menu-trigger span:nth-of-type(1) {
82
+
83
+ top: 15px;
84
+
85
+ }
86
+
87
+ .menu-trigger span:nth-of-type(2) {
88
+
89
+ top: 0;
90
+
91
+ bottom: 0;
92
+
93
+ }
94
+
95
+ .menu-trigger span:nth-of-type(3) {
96
+
97
+ bottom: 15px;
98
+
99
+ }
100
+
101
+ .menu-trigger.active span:nth-of-type(1) {
102
+
103
+ -webkit-transform: translateY(12px) rotate(-45deg);
104
+
105
+ transform: translateY(12px) rotate(-45deg);
106
+
107
+ }
108
+
109
+ .menu-trigger.active span:nth-of-type(2) {
110
+
111
+ opacity: 0;
112
+
113
+ }
114
+
115
+ .menu-trigger.active span:nth-of-type(3) {
116
+
117
+ -webkit-transform: translateY(-12px) rotate(45deg);
118
+
119
+ transform: translateY(-12px) rotate(45deg);
120
+
121
+ }
122
+
123
+ .g-nav {
124
+
125
+ display: none;
126
+
127
+ position: fixed;
128
+
129
+ top: 0;
130
+
131
+ right: 0;
132
+
133
+ background:#ccc;
134
+
135
+ width: 100%;
136
+
137
+ height: 80%;
138
+
139
+ opacity: .98;
140
+
141
+ z-index: 10;
142
+
143
+ }
144
+
145
+ .list {
146
+
147
+ padding: 0px;
148
+
149
+ width: 80%;
150
+
151
+ margin: 10px auto;
152
+
153
+ margin-top: 10px;
154
+
155
+   list-style: none;
156
+
157
+ overflow-y: scroll;
158
+
159
+  -webkit-overflow-scrolling: touch;
160
+
161
+ }
162
+
163
+ .list .item {
164
+
165
+ border-bottom: 1px solid #000;
166
+
167
+ }
168
+
169
+ .item a {
170
+
171
+ display: block;
172
+
173
+ text-decoration: none;
174
+
175
+ color: #000;
176
+
177
+ padding: 25px 0 5px;
178
+
179
+ font-size: 1rem;
180
+
181
+ font-weight: 900;
182
+
183
+ }
184
+
185
+ .cont{
186
+
187
+ width:100vw;
188
+
189
+ height:1000px;
190
+
191
+ }
192
+
193
+ </style>
194
+
195
+
196
+
197
+
198
+
199
+ <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
200
+
201
+ <script>
202
+
203
+ $(function(){
204
+
205
+ $('.menu-trigger').on('click',function(){
206
+
207
+ $(this).toggleClass('active');
208
+
209
+ $('.g-nav').slideToggle();
210
+
211
+ });
212
+
213
+ });
214
+
215
+ </script>
216
+
217
+ </head>
218
+
219
+
220
+
221
+ <body>
222
+
223
+ <div class="nav_container">
224
+
225
+ <a class="menu-trigger"> <span></span> <span></span> <span></span> </a>
226
+
227
+ <nav class="g-nav">
228
+
229
+ <ul class="list">
230
+
231
+ <li class="item"><a href="#content_first">コンテンツ１</a></li>
232
+
233
+ <li class="item"><a href="#content_second">コンテンツ２</a></li>
234
+
235
+ <li class="item"><a href="#content_third">コンテンツ３</a></li>
236
+
237
+ <li class="item"><a href="#content_fourth">コンテンツ４</a></li>
238
+
239
+ </ul>
240
+
241
+ </nav>
242
+
243
+ </div>
244
+
245
+ <div id="content_first" class="cont">コンテンツ１
246
+
247
+ </div>
248
+
249
+ <div id="content_second" class="cont">コンテンツ2
250
+
251
+ </div>
252
+
253
+ <div id="content_third" class="cont">コンテンツ3
254
+
255
+ </div>
256
+
257
+ <div id="content_fourth" class="cont">コンテンツ4
258
+
259
+ </div>
260
+
261
+ </body>
262
+
263
+ </html>
210
264
 
211
265
  ```

2

URLにリンク追加

2017/12/13 18:13

投稿

KEJ
KEJ

スコア14

test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  スクリプトは下記を使っています。
10
10
 
11
- http://git.blivesta.com/drawer
11
+ [http://git.blivesta.com/drawer](http://git.blivesta.com/drawer)
12
12
 
13
13
 
14
14
 

1

プラグインの配布先を追記しました。

2017/12/13 17:23

投稿

KEJ
KEJ

スコア14

test CHANGED
File without changes
test CHANGED
@@ -8,6 +8,8 @@
8
8
 
9
9
  スクリプトは下記を使っています。
10
10
 
11
+ http://git.blivesta.com/drawer
12
+
11
13
 
12
14
 
13
15
  ```javascript