teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問ハンバーガーメニューをクリックしたら閉じるようにしたい

編集履歴

質問編集履歴

3

list足すのを忘れていました

2020/03/21 04:28

投稿

wald
wald

スコア5

test CHANGED
File without changes
test CHANGED
@@ -40,6 +40,22 @@
40
40
 
41
41
  　　</div>
42
42
 
43
+ <nav class="nav" id="nav_f">
44
+
45
+ <ul>
46
+
47
+ <li><a href="#header">HOME</a></li>
48
+
49
+ <li><a href="#drink">DRINK</a></li>
50
+
51
+ <li><a href="#food">FOOD</a></li>
52
+
53
+ <li><a href="#access">ACCESS</a></li>
54
+
55
+ <li><a href="#contact">CONTACT</a></li>
56
+
57
+ </ul></nav>
58
+
43
59
  </div>
44
60
 
45
61
  ```

2

コードブロックを追加しました

2020/03/21 04:28

投稿

wald
wald

スコア5

test CHANGED
File without changes
test CHANGED
@@ -24,7 +24,9 @@
24
24
 
25
25
 
26
26
 
27
+
28
+
27
- ｈｔｍｌ------------------------------------------------------------
29
+ ```html
28
30
 
29
31
  <div id="target">
30
32
 
@@ -40,13 +42,13 @@
40
42
 
41
43
  </div>
42
44
 
43
-
45
+ ```
44
-
46
+
47
+
48
+
49
+
50
+
45
- /ｈｔｍｌ---------------------------------------------------------
51
+ ```css
46
-
47
-
48
-
49
- ｃｓｓ---------------------------------------------------------------------
50
52
 
51
53
  .target_inner{
52
54
 
@@ -110,7 +112,7 @@
110
112
 
111
113
 
112
114
 
113
- /* 動き */
115
+
114
116
 
115
117
  .fadein{
116
118
 
@@ -160,9 +162,11 @@
160
162
 
161
163
  }
162
164
 
163
-
164
-
165
- /ｃｓｓ----------------------------------------------------------
165
+ ```
166
+
167
+
168
+
169
+
166
170
 
167
171
 
168
172
 

1

ｈｔｍｌとｃｓｓの記述を追加しました。

2020/03/20 03:39

投稿

wald
wald

スコア5

test CHANGED
File without changes
test CHANGED
@@ -24,6 +24,148 @@
24
24
 
25
25
 
26
26
 
27
+ ｈｔｍｌ------------------------------------------------------------
28
+
29
+ <div id="target">
30
+
31
+ 　　<div class="target_inner">
32
+
33
+ 　　　　<span class="target_inner_line target_inner_1" id="line1"></span>
34
+
35
+ 　　　　<span class="target_inner_line target_inner_2" id="line2"></span>
36
+
37
+ 　　　　<span class="target_inner_line target_inner_3" id="line3"></span>
38
+
39
+ 　　</div>
40
+
41
+ </div>
42
+
43
+
44
+
45
+ /ｈｔｍｌ---------------------------------------------------------
46
+
47
+
48
+
49
+ ｃｓｓ---------------------------------------------------------------------
50
+
51
+ .target_inner{
52
+
53
+ width: 40px;
54
+
55
+ height: 30px;
56
+
57
+ position: relative;
58
+
59
+ z-index: 2;
60
+
61
+
62
+
63
+ }
64
+
65
+
66
+
67
+ .target_inner_line {
68
+
69
+ display: block;
70
+
71
+ width: 40px;
72
+
73
+ height: 5px;
74
+
75
+ background: #fff;
76
+
77
+ -webkit-transition: 1.5s;
78
+
79
+ transition: 1.5s;
80
+
81
+ border-radius: 50px;
82
+
83
+ position: absolute;
84
+
85
+ }
86
+
87
+
88
+
89
+ .target_inner_1 {
90
+
91
+ top: 0;
92
+
93
+ }
94
+
95
+
96
+
97
+ .target_inner_2 {
98
+
99
+ top: 13px;
100
+
101
+ }
102
+
103
+
104
+
105
+ .target_inner_3 {
106
+
107
+ top: 26px;
108
+
109
+ }
110
+
111
+
112
+
113
+ /* 動き */
114
+
115
+ .fadein{
116
+
117
+ -webkit-transform: translateX(100%);
118
+
119
+ transform: translateX(100%);
120
+
121
+ }
122
+
123
+
124
+
125
+ .linea,.lineb,.linec{
126
+
127
+ background: #ffffff;
128
+
129
+ }
130
+
131
+
132
+
133
+ .linea {
134
+
135
+ -webkit-transform: rotate(225deg);
136
+
137
+ transform: rotate(225deg);
138
+
139
+ top: 13px;
140
+
141
+ }
142
+
143
+
144
+
145
+ .lineb {
146
+
147
+ opacity: 0;
148
+
149
+ }
150
+
151
+
152
+
153
+ .linec {
154
+
155
+ -webkit-transform: rotate(-225deg);
156
+
157
+ transform: rotate(-225deg);
158
+
159
+ top: 13px;
160
+
161
+ }
162
+
163
+
164
+
165
+ /ｃｓｓ----------------------------------------------------------
166
+
167
+
168
+
27
169
  ```jquery
28
170
 
29
171
  function hamburger() {