teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

4

CSSの追記

2018/11/19 09:01

投稿

sanasa2
sanasa2

スコア15

title CHANGED
File without changes
body CHANGED
@@ -12,12 +12,7 @@
12
12
  どんな指示を書いていいか分からずにいます。
13
13
  追加指示文等を教えて頂ければ助かります。
14
14
 
15
- ### 発生している問題・エラーメッセージ
16
15
 
17
- ```
18
- エラーメッセージ
19
- ```
20
-
21
16
  ### 該当のソースコード
22
17
 
23
18
  ```HTML
@@ -39,6 +34,59 @@
39
34
  </nav>
40
35
  </header>
41
36
  ```
37
+ ```CSS
38
+ /*menu*/
39
+ .menu{
40
+ height: 20px;
41
+ position: absolute;
42
+ right: 20px;
43
+ top: 20px;
44
+ width: 30px;
45
+ z-index: 99;
46
+ }
47
+ .menu__line{
48
+ background: #fff;
49
+ display: block;
50
+ height: 2px;
51
+ position: absolute;
52
+ transition:transform .3s;
53
+ width: 100%;
54
+ }
55
+ .menu__line--center{
56
+ top: 9px;
57
+ }
58
+ .menu__line--bottom{
59
+ bottom: 0;
60
+ }
61
+ .menu__line--top.active{
62
+ top: 8px;
63
+ transform: rotate(45deg);
64
+ }
65
+ .menu__line--center.active{
66
+ transform:scaleX(0);
67
+ }
68
+ .menu__line--bottom.active{
69
+ bottom: 10px;
70
+ transform: rotate(135deg);
71
+ }
72
+ /*gnav*/
73
+ .gnav{
74
+ background: rgba(0,0,0,0.8);
75
+ display: none;
76
+ height: 100%;
77
+ position: fixed;
78
+ width: 100%;
79
+ z-index: 98;
80
+ }
81
+ .gnav__wrap{
82
+ align-items:center;
83
+ display: flex;
84
+ height: 100%;
85
+ justify-content: center;
86
+ position: absolute;
87
+ width: 100%;
88
+ }
89
+ ```
42
90
  ```JQuery
43
91
  <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
44
92
 
@@ -56,10 +104,6 @@
56
104
  });
57
105
  </script>
58
106
  ```
59
- ### 試したこと
60
-
61
- ここに問題に対して試したことを記載してください。
62
-
63
107
  ### 補足情報(FW/ツールのバージョンなど)
64
108
  このサイトを参考にしています。
65
109
  https://webdesignday.jp/inspiration/technique/html/4746/

3

誤字

2018/11/19 09:01

投稿

sanasa2
sanasa2

スコア15

title CHANGED
File without changes
body CHANGED
File without changes

2

誤字

2018/11/19 08:00

投稿

sanasa2
sanasa2

スコア15

title CHANGED
File without changes
body CHANGED
File without changes

1

誤字

2018/11/19 07:50

投稿

sanasa2
sanasa2

スコア15

title CHANGED
@@ -1,1 +1,1 @@
1
- 開いたままのページ内リンクのハンバーガーメニューを閉じたい
1
+ 開いたままのハンバーガーメニュー(ページ内リンク)を閉じたい
body CHANGED
@@ -39,7 +39,7 @@
39
39
  </nav>
40
40
  </header>
41
41
  ```
42
- ```JS
42
+ ```JQuery
43
43
  <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
44
44
 
45
45
  <script>