質問編集履歴
5
CSS追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -60,4 +60,51 @@
|
|
|
60
60
|
ちなみに、hamburger-nav-listを、display: block;やdisplay: none;
|
|
61
61
|
では、対処できませんでした。。。
|
|
62
62
|
|
|
63
|
-
Bootstrapは使用しておりません。
|
|
63
|
+
Bootstrapは使用しておりません。
|
|
64
|
+
|
|
65
|
+
CSSは以下です。
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
```ここに言語を入力
|
|
69
|
+
/*---------------------------------------------
|
|
70
|
+
Hamburger Navigation
|
|
71
|
+
---------------------------------------------*/
|
|
72
|
+
@media screen and (max-width: 480px) {
|
|
73
|
+
button {
|
|
74
|
+
display: block;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
nav i {
|
|
78
|
+
font-size: 30px;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.hamburger-nav-toggle-btn {
|
|
82
|
+
margin: 1em;
|
|
83
|
+
}
|
|
84
|
+
.hamburger-nav-toggle-btn.close::before, .hamburger-nav-toggle-btn.open::before {
|
|
85
|
+
font-family: 'FontAwesome';
|
|
86
|
+
}
|
|
87
|
+
/* .hamburger-nav-toggle-btn.open::before {
|
|
88
|
+
content: '\f00d';
|
|
89
|
+
}
|
|
90
|
+
.hamburger-nav-toggle-btn.close::before {
|
|
91
|
+
content: '\f0c9';
|
|
92
|
+
} */
|
|
93
|
+
|
|
94
|
+
.hamburger-nav-list {
|
|
95
|
+
display: none;
|
|
96
|
+
list-style: none;
|
|
97
|
+
margin: 0;
|
|
98
|
+
padding: 0;
|
|
99
|
+
background: #543f32;
|
|
100
|
+
}
|
|
101
|
+
.hamburger-nav-list > li {
|
|
102
|
+
border-bottom: 1px solid #eeeeee;
|
|
103
|
+
}
|
|
104
|
+
.hamburger-nav-list > li a {
|
|
105
|
+
display: block;
|
|
106
|
+
padding: 10px 1em;
|
|
107
|
+
text-decoration: none;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
```
|
4
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -58,4 +58,6 @@
|
|
|
58
58
|
どう書き換えれば対処できますでしょうか？
|
|
59
59
|
|
|
60
60
|
ちなみに、hamburger-nav-listを、display: block;やdisplay: none;
|
|
61
|
-
では、対処できませんでした。。。
|
|
61
|
+
では、対処できませんでした。。。
|
|
62
|
+
|
|
63
|
+
Bootstrapは使用しておりません。
|
3
分かりやすく修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
|
-
以下のハンバーガーメニューのjQueryをホームページに搭載すると、jQueryがPC表示とタブレット表示の時まで動作してしまいます。
|
|
1
|
+
以下のハンバーガーメニューのjQueryをホームページに搭載すると、jQueryがPC表示とタブレット表示の時まで動作して閉じてしまいます。
|
|
2
|
+
```ここに言語を入力
|
|
3
|
+
/* 開いている必要はないので、ハンバーガーメニューを収束 */
|
|
4
|
+
$('.hamburger-nav-list').slideUp(function() {**__この部分です。__**
|
|
5
|
+
```
|
|
2
6
|
|
|
3
7
|
スマホ表示の時にだけ効かせたい場合はどうすればよろしいでしょうか？
|
|
4
8
|
|
|
5
9
|
|
|
6
|
-
ハンバーガーメニューの
|
|
10
|
+
ハンバーガーメニュー全部のjQueryは以下です。
|
|
7
11
|
|
|
8
12
|
/* Hamburger Navigation */
|
|
9
13
|
```ここに言語を入力
|
2
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
ハンバーガーメニューを搭載すると、jQueryがPC表示とタブレット表示の時まで
|
|
1
|
+
以下のハンバーガーメニューのjQueryをホームページに搭載すると、jQueryがPC表示とタブレット表示の時まで動作してしまいます。
|
|
2
2
|
|
|
3
|
-
スマホ表示の時は
|
|
3
|
+
スマホ表示の時にだけ効かせたい場合はどうすればよろしいでしょうか？
|
|
4
4
|
|
|
5
|
+
|
|
5
6
|
ハンバーガーメニューのjQery が以下です。
|
|
6
7
|
|
|
7
8
|
/* Hamburger Navigation */
|
|
@@ -52,5 +53,5 @@
|
|
|
52
53
|
|
|
53
54
|
どう書き換えれば対処できますでしょうか？
|
|
54
55
|
|
|
55
|
-
ちなみに、hamburger-nav-listを、display: block;
|
|
56
|
+
ちなみに、hamburger-nav-listを、display: block;やdisplay: none;
|
|
56
|
-
で
|
|
57
|
+
では、対処できませんでした。。。
|
1
codeの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
ハンバーガーメニューのjQery が以下です。
|
|
6
6
|
|
|
7
7
|
/* Hamburger Navigation */
|
|
8
|
+
```ここに言語を入力
|
|
8
9
|
$(function() {
|
|
9
10
|
|
|
10
11
|
/* 開閉ボタンをクリックしたら以下の関数を実行 */
|
|
@@ -47,6 +48,7 @@
|
|
|
47
48
|
// $('.hamburger-nav-list a').smoothScroll();
|
|
48
49
|
|
|
49
50
|
});
|
|
51
|
+
```
|
|
50
52
|
|
|
51
53
|
どう書き換えれば対処できますでしょうか？
|
|
52
54
|
|