質問編集履歴
2
書式の改善
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -12,12 +12,26 @@
|
|
|
12
12
|
|
|
13
13
|
---------------------------------------------------------------------------------------------------------------
|
|
14
14
|
```HTML
|
|
15
|
+
<!doctype html>
|
|
16
|
+
<html lang="ja">
|
|
17
|
+
<head>
|
|
18
|
+
<meta charset="utf-8">
|
|
19
|
+
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
|
|
20
|
+
<title></title>
|
|
21
|
+
<meta name="description" content="" />
|
|
22
|
+
<meta name="Keywords" content="" />
|
|
23
|
+
<meta name="author" content="">
|
|
24
|
+
<meta name="copyright" content="">
|
|
25
|
+
<link rel="stylesheet" href="css/style.css" />
|
|
26
|
+
</head>
|
|
27
|
+
<body>
|
|
28
|
+
<header>
|
|
29
|
+
<h1><a href="index.html"></a></h1>
|
|
15
30
|
<a class="menu_btn">
|
|
16
31
|
<span class="top"></span>
|
|
17
32
|
<span class="middle"></span>
|
|
18
33
|
<span class="bottom"></span>
|
|
19
34
|
</a>
|
|
20
|
-
|
|
21
35
|
<nav id="g_navi">
|
|
22
36
|
<ul>
|
|
23
37
|
<li><a href="index.html">HOME</a></li>
|
|
@@ -26,10 +40,58 @@
|
|
|
26
40
|
<li><a href="#003">003</a></li>
|
|
27
41
|
</ul>
|
|
28
42
|
</nav>
|
|
43
|
+
</header>
|
|
44
|
+
|
|
45
|
+
<a id="001"></a>
|
|
46
|
+
<br>
|
|
47
|
+
<br>
|
|
48
|
+
<br>
|
|
49
|
+
aaaaaaaa
|
|
50
|
+
<br>
|
|
51
|
+
<br>
|
|
52
|
+
<a id="002"></a>
|
|
53
|
+
<br>
|
|
54
|
+
<br>
|
|
55
|
+
<br>
|
|
56
|
+
bbbbbbb
|
|
57
|
+
<br>
|
|
58
|
+
<br>
|
|
59
|
+
<a id="003"></a>
|
|
60
|
+
<br>
|
|
61
|
+
<br>
|
|
62
|
+
<br>
|
|
63
|
+
ccccccc
|
|
64
|
+
<br>
|
|
65
|
+
<br>
|
|
66
|
+
<footer></footer>
|
|
67
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
|
68
|
+
<script src="js/script.js"></script>
|
|
69
|
+
</body>
|
|
70
|
+
</html>
|
|
71
|
+
|
|
29
72
|
```
|
|
30
73
|
|
|
31
74
|
```CSS
|
|
75
|
+
@charset "utf-8";
|
|
32
76
|
|
|
77
|
+
* {
|
|
78
|
+
padding: 0;
|
|
79
|
+
margin: 0;
|
|
80
|
+
-webkit-box-sizing: border-box;
|
|
81
|
+
-moz-box-sizing: border-box;
|
|
82
|
+
box-sizing: border-box;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
html { height: 100%;}
|
|
86
|
+
|
|
87
|
+
body {
|
|
88
|
+
color: #111;
|
|
89
|
+
background-color: #F6F6F6;
|
|
90
|
+
font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ ゴシック", "MS Gothic", sans-serif;
|
|
91
|
+
word-wrap: break-word;
|
|
92
|
+
height: 100%;
|
|
93
|
+
line-height: 2.2;
|
|
94
|
+
}
|
|
33
95
|
/*
|
|
34
96
|
メニューボタン
|
|
35
97
|
-------------------------------------------*/
|
|
@@ -171,6 +233,56 @@
|
|
|
171
233
|
```
|
|
172
234
|
|
|
173
235
|
```JS
|
|
236
|
+
$('.effect').on('inview', function() {
|
|
237
|
+
var $item = $(this);
|
|
238
|
+
$item.addClass('start');
|
|
239
|
+
});
|
|
240
|
+
|
|
241
|
+
var $header = $('header');
|
|
242
|
+
|
|
243
|
+
var w_h = $(window).height();
|
|
244
|
+
var topBtn = $('.to_top');
|
|
245
|
+
|
|
246
|
+
|
|
247
|
+
|
|
248
|
+
$(window).scroll(function () {
|
|
249
|
+
var w_h = $(window).height();
|
|
250
|
+
var s_top = $(this).scrollTop(); //スクロールの値を取得
|
|
251
|
+
var l_top = w_h / 2;
|
|
252
|
+
var ml_top = l_top + s_top / 2;
|
|
253
|
+
|
|
254
|
+
if ($(this).scrollTop() > 100 && menuOpen == false) {
|
|
255
|
+
topBtn.fadeIn();
|
|
256
|
+
} else {
|
|
257
|
+
topBtn.fadeOut();
|
|
258
|
+
}
|
|
259
|
+
if ($(window).scrollTop() > 100) {
|
|
260
|
+
$header.addClass('fixed');
|
|
261
|
+
} else {
|
|
262
|
+
$header.removeClass('fixed');
|
|
263
|
+
}
|
|
264
|
+
});
|
|
265
|
+
|
|
266
|
+
|
|
267
|
+
$(function(){
|
|
268
|
+
|
|
269
|
+
topBtn.hide();
|
|
270
|
+
|
|
271
|
+
$('a[href^=#]').click(function(){
|
|
272
|
+
var speed = 500;
|
|
273
|
+
var href= $(this).attr("href");
|
|
274
|
+
var target = $(href == "#" || href == "" ? 'html' : href);
|
|
275
|
+
var position = target.offset().top;
|
|
276
|
+
$("html, body").animate({scrollTop:position}, speed, "swing");
|
|
277
|
+
return false;
|
|
278
|
+
|
|
279
|
+
});
|
|
280
|
+
|
|
281
|
+
|
|
282
|
+
});
|
|
283
|
+
|
|
284
|
+
|
|
285
|
+
//スマホメニュー
|
|
174
286
|
var bnrBtn = $('#g_navi');
|
|
175
287
|
var menuOpen = false;
|
|
176
288
|
var scrollpos;
|
|
@@ -179,6 +291,7 @@
|
|
|
179
291
|
|
|
180
292
|
var ttt = false;
|
|
181
293
|
|
|
294
|
+
|
|
182
295
|
$(function(){
|
|
183
296
|
$(".menu_btn").on("click", function() {
|
|
184
297
|
if(ttt == false) {
|
|
@@ -222,8 +335,11 @@
|
|
|
222
335
|
|
|
223
336
|
});
|
|
224
337
|
|
|
338
|
+
|
|
225
339
|
$(window).fadeThis();
|
|
226
340
|
|
|
227
341
|
|
|
228
342
|
|
|
343
|
+
|
|
344
|
+
|
|
229
345
|
```
|
1
書式の改善
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
似たような質問を見たり調べたりして、様々なコードを試してみましたが、ハンバーガーメニューを閉じることができません。
|
|
11
11
|
JS初心者です。助けてください。よろしくお願いいたします。
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
---------------------------------------------------------------------------------------------------------------
|
|
14
|
-
|
|
14
|
+
```HTML
|
|
15
15
|
<a class="menu_btn">
|
|
16
16
|
<span class="top"></span>
|
|
17
17
|
<span class="middle"></span>
|
|
@@ -26,13 +26,13 @@
|
|
|
26
26
|
<li><a href="#003">003</a></li>
|
|
27
27
|
</ul>
|
|
28
28
|
</nav>
|
|
29
|
+
```
|
|
29
30
|
|
|
31
|
+
```CSS
|
|
30
32
|
|
|
31
|
-
- CSS
|
|
32
33
|
/*
|
|
33
34
|
メニューボタン
|
|
34
35
|
-------------------------------------------*/
|
|
35
|
-
|
|
36
36
|
.menu_btn {
|
|
37
37
|
display: block;
|
|
38
38
|
height: 40px;
|
|
@@ -168,9 +168,9 @@
|
|
|
168
168
|
#g_navi ul li.contact a:hover {
|
|
169
169
|
background-color: #FFF;
|
|
170
170
|
color: #111;
|
|
171
|
+
```
|
|
171
172
|
|
|
172
|
-
|
|
173
|
+
```JS
|
|
173
|
-
//スマホメニュー
|
|
174
174
|
var bnrBtn = $('#g_navi');
|
|
175
175
|
var menuOpen = false;
|
|
176
176
|
var scrollpos;
|
|
@@ -225,3 +225,5 @@
|
|
|
225
225
|
$(window).fadeThis();
|
|
226
226
|
|
|
227
227
|
|
|
228
|
+
|
|
229
|
+
```
|