質問編集履歴
1
編集
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
```ここに言語を入力
|
|
9
|
+
|
|
9
10
|
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
|
|
10
11
|
<label for="openSidebarMenu" class="sidebarIconToggle">
|
|
11
12
|
<div class="spinner diagonal part-1"></div>
|
|
@@ -14,34 +15,38 @@
|
|
|
14
15
|
</label>
|
|
15
16
|
<div id="sidebarMenu">
|
|
16
17
|
<ul class="sidebarMenuInner">
|
|
17
|
-
<li><a href=""></a></li>
|
|
18
|
+
<li><a href="">メニュー</a></li>
|
|
18
|
-
<li><a href=""></a></li>
|
|
19
|
+
<li><a href="">メニュー</a></li>
|
|
19
20
|
</ul>
|
|
20
21
|
</div><!--sidebarMenu-->
|
|
21
22
|
|
|
22
23
|
|
|
23
24
|
|
|
24
|
-
↓クリックしたときに暗くなる要素
|
|
25
|
+
<!--↓クリックしたときに暗くなる要素-->
|
|
25
26
|
<div class="black-bg" id="js-black-bg"></div>
|
|
27
|
+
|
|
26
28
|
```
|
|
27
29
|
ここからcssです
|
|
28
30
|
```ここに言語を入力
|
|
31
|
+
@charset "utf-8";
|
|
32
|
+
/* CSS Document */
|
|
33
|
+
|
|
29
34
|
#sidebarMenu {
|
|
30
35
|
height: 100%;
|
|
31
36
|
position: fixed;
|
|
32
|
-
|
|
37
|
+
z-index: 20;
|
|
33
38
|
width:25%;
|
|
34
|
-
|
|
39
|
+
background-color:#FFF;
|
|
35
40
|
transform: translateX(-110%);
|
|
36
41
|
transition: transform 250ms ease-in-out;
|
|
37
|
-
|
|
42
|
+
box-shadow: 3px 3px 3px 3px rgba(0, 0, 30, .2);
|
|
38
|
-
|
|
43
|
+
|
|
39
44
|
}
|
|
40
45
|
.sidebarMenuInner{
|
|
41
|
-
|
|
46
|
+
width:80%;
|
|
42
|
-
|
|
47
|
+
height:auto;
|
|
43
48
|
margin:10px auto 0;
|
|
44
|
-
|
|
49
|
+
padding:0;
|
|
45
50
|
}
|
|
46
51
|
input[type="checkbox"]:checked ~ #sidebarMenu {
|
|
47
52
|
transform: translateX(0);
|
|
@@ -64,7 +69,7 @@
|
|
|
64
69
|
left: 15px;
|
|
65
70
|
height: 22px;
|
|
66
71
|
width: 22px;
|
|
67
|
-
|
|
72
|
+
position:fixed;
|
|
68
73
|
}
|
|
69
74
|
.spinner {
|
|
70
75
|
transition: all 0.3s;
|
|
@@ -111,8 +116,10 @@
|
|
|
111
116
|
transform: rotate(-135deg);
|
|
112
117
|
margin-top: -9px;
|
|
113
118
|
}
|
|
114
|
-
|
|
119
|
+
.sidebarMenuInner{
|
|
120
|
+
margin-top:60px;
|
|
121
|
+
}
|
|
115
|
-
↓暗くなる要素
|
|
122
|
+
/*↓暗くなる要素*/
|
|
116
123
|
.black-bg {
|
|
117
124
|
display: block;
|
|
118
125
|
position: fixed;
|