質問編集履歴

3

試したことを追加

2017/07/26 04:05

投稿

laki
laki

スコア16

test CHANGED
File without changes
test CHANGED
@@ -293,3 +293,25 @@
293
293
  });
294
294
 
295
295
  ```
296
+
297
+ ###試したこと
298
+
299
+ ナビ以外のところをタッチしたら、ドロップダウンが消えればいいと考えました。
300
+
301
+ 検索したコードに、ドロップダウンが消える処理を書きました。(その時どう書いたか忘れてしまいました)
302
+
303
+ しかし、消えた後ドロップダウンはメニューをタップしても出でこなくなりました。
304
+
305
+ ```ここに言語を入力
306
+
307
+ $(document).on('click touchend', function(event) {
308
+
309
+ if (!$(event.target).closest('#target').length) {
310
+
311
+ // ここに処理;
312
+
313
+ }
314
+
315
+ });
316
+
317
+ ```

2

タグ追加

2017/07/26 04:05

投稿

laki
laki

スコア16

test CHANGED
File without changes
test CHANGED
File without changes

1

コード追加

2017/07/26 00:38

投稿

laki
laki

スコア16

test CHANGED
File without changes
test CHANGED
@@ -8,12 +8,50 @@
8
8
 
9
9
 
10
10
 
11
- ###該当のソースコード
11
+ ```ここに言語を入力
12
+
12
-
13
+ jQuery(document).ready(function($){
14
+
15
+ function morphDropdown( element ) {
16
+
17
+ this.element = element;
18
+
19
+ this.mainNavigation = this.element.find('.main-nav');
20
+
21
+ this.mainNavigationItems = this.mainNavigation.find('.has-dropdown');
22
+
23
+ this.dropdownList = this.element.find('.dropdown-list');
24
+
25
+ this.dropdownWrappers = this.dropdownList.find('.dropdown');
26
+
27
+ this.dropdownItems = this.dropdownList.find('.content');
28
+
29
+ this.dropdownBg = this.dropdownList.find('.bg-layer');
30
+
31
+ this.mq = this.checkMq();
32
+
33
+ this.bindEvents();
34
+
35
+ }
36
+
37
+
38
+
13
- morphDropdown.prototype.bindEvents = function() {
39
+ morphDropdown.prototype.checkMq = function() {
40
+
41
+ //check screen size
14
42
 
15
43
  var self = this;
16
44
 
45
+ return window.getComputedStyle(self.element.get(0), '::before').getPropertyValue('content').replace(/'/g, "").replace(/"/g, "").split(', ');
46
+
47
+ };
48
+
49
+
50
+
51
+ morphDropdown.prototype.bindEvents = function() {
52
+
53
+ var self = this;
54
+
17
55
  //hover over an item in the main navigation
18
56
 
19
57
  this.mainNavigationItems.mouseenter(function(event){
@@ -67,3 +105,191 @@
67
105
  }
68
106
 
69
107
  });
108
+
109
+
110
+
111
+ //on small screens, open navigation clicking on the menu icon
112
+
113
+ this.element.on('click', '.nav-trigger', function(event){
114
+
115
+ event.preventDefault();
116
+
117
+ self.element.toggleClass('nav-open');
118
+
119
+ });
120
+
121
+ };
122
+
123
+
124
+
125
+ morphDropdown.prototype.showDropdown = function(item) {
126
+
127
+ this.mq = this.checkMq();
128
+
129
+ if( this.mq == 'desktop') {
130
+
131
+ var self = this;
132
+
133
+ var selectedDropdown = this.dropdownList.find('#'+item.data('content')),
134
+
135
+ selectedDropdownHeight = selectedDropdown.innerHeight(),
136
+
137
+ selectedDropdownWidth = selectedDropdown.children('.content').innerWidth(),
138
+
139
+ selectedDropdownLeft = item.offset().left + item.innerWidth()/2 - selectedDropdownWidth/2;
140
+
141
+
142
+
143
+ //update dropdown position and size
144
+
145
+ this.updateDropdown(selectedDropdown, parseInt(selectedDropdownHeight), selectedDropdownWidth, parseInt(selectedDropdownLeft));
146
+
147
+ //add active class to the proper dropdown item
148
+
149
+ this.element.find('.active').removeClass('active');
150
+
151
+ selectedDropdown.addClass('active').removeClass('move-left move-right').prevAll().addClass('move-left').end().nextAll().addClass('move-right');
152
+
153
+ item.addClass('active');
154
+
155
+ //show the dropdown wrapper if not visible yet
156
+
157
+ if( !this.element.hasClass('is-dropdown-visible') ) {
158
+
159
+ setTimeout(function(){
160
+
161
+ self.element.addClass('is-dropdown-visible');
162
+
163
+ }, 10);
164
+
165
+ }
166
+
167
+ }
168
+
169
+ };
170
+
171
+
172
+
173
+ morphDropdown.prototype.updateDropdown = function(dropdownItem, height, width, left) {
174
+
175
+ this.dropdownList.css({
176
+
177
+ '-moz-transform': 'translateX(' + left + 'px)',
178
+
179
+ '-webkit-transform': 'translateX(' + left + 'px)',
180
+
181
+ '-ms-transform': 'translateX(' + left + 'px)',
182
+
183
+ '-o-transform': 'translateX(' + left + 'px)',
184
+
185
+ 'transform': 'translateX(' + left + 'px)',
186
+
187
+ 'width': width+'px',
188
+
189
+ 'height': height+'px'
190
+
191
+ });
192
+
193
+
194
+
195
+ this.dropdownBg.css({
196
+
197
+ '-moz-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
198
+
199
+ '-webkit-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
200
+
201
+ '-ms-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
202
+
203
+ '-o-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
204
+
205
+ 'transform': 'scaleX(' + width + ') scaleY(' + height + ')'
206
+
207
+ });
208
+
209
+ };
210
+
211
+
212
+
213
+ morphDropdown.prototype.hideDropdown = function() {
214
+
215
+ this.mq = this.checkMq();
216
+
217
+ if( this.mq == 'desktop') {
218
+
219
+ this.element.removeClass('is-dropdown-visible').find('.active').removeClass('active').end().find('.move-left').removeClass('move-left').end().find('.move-right').removeClass('move-right');
220
+
221
+ }
222
+
223
+ };
224
+
225
+
226
+
227
+ morphDropdown.prototype.resetDropdown = function() {
228
+
229
+ this.mq = this.checkMq();
230
+
231
+ if( this.mq == 'mobile') {
232
+
233
+ this.dropdownList.removeAttr('style');
234
+
235
+ }
236
+
237
+ };
238
+
239
+
240
+
241
+ var morphDropdowns = [];
242
+
243
+ if( $('.cd-morph-dropdown').length > 0 ) {
244
+
245
+ $('.cd-morph-dropdown').each(function(){
246
+
247
+ //create a morphDropdown object for each .cd-morph-dropdown
248
+
249
+ morphDropdowns.push(new morphDropdown($(this)));
250
+
251
+ });
252
+
253
+
254
+
255
+ var resizing = false;
256
+
257
+
258
+
259
+ //on resize, reset dropdown style property
260
+
261
+ updateDropdownPosition();
262
+
263
+ $(window).on('resize', function(){
264
+
265
+ if( !resizing ) {
266
+
267
+ resizing = true;
268
+
269
+ (!window.requestAnimationFrame) ? setTimeout(updateDropdownPosition, 300) : window.requestAnimationFrame(updateDropdownPosition);
270
+
271
+ }
272
+
273
+ });
274
+
275
+
276
+
277
+ function updateDropdownPosition() {
278
+
279
+ morphDropdowns.forEach(function(element){
280
+
281
+ element.resetDropdown();
282
+
283
+ });
284
+
285
+
286
+
287
+ resizing = false;
288
+
289
+ };
290
+
291
+ }
292
+
293
+ });
294
+
295
+ ```