質問編集履歴
1
修正
title
CHANGED
File without changes
|
body
CHANGED
@@ -8,7 +8,7 @@
|
|
8
8
|
|
9
9
|
```ここに言語を入力
|
10
10
|
|
11
|
-
ul class="menu">
|
11
|
+
<ul class="menu">
|
12
12
|
<li class="menu__item">
|
13
13
|
<a class="menu__item__link js-menu__item__link" href="#">メールBOX</a>
|
14
14
|
<ul class="submenu">
|
@@ -17,11 +17,10 @@
|
|
17
17
|
</li>
|
18
18
|
<li class="submenu__item">
|
19
19
|
<a href="">受信メール</a>
|
20
|
-
|
21
|
-
|
20
|
+
</li>
|
22
21
|
</ul>
|
23
22
|
</li>
|
24
|
-
|
23
|
+
</ul>
|
25
24
|
<script>
|
26
25
|
$(function(){
|
27
26
|
$('.js-menu__item__link').each(function(){
|
@@ -38,4 +37,58 @@
|
|
38
37
|
</script>
|
39
38
|
|
40
39
|
```
|
40
|
+
ここからcssです
|
41
|
+
|
42
|
+
```ここに言語を入力
|
43
|
+
.menu {
|
44
|
+
width:100%;
|
45
|
+
padding-left:0px;
|
46
|
+
margin-top:3px;
|
47
|
+
}
|
48
|
+
.menu__item {
|
49
|
+
background:#009FFF;
|
50
|
+
color: #fff;
|
51
|
+
cursor: pointer;
|
52
|
+
display: block;
|
53
|
+
margin-bottom: 3px;
|
54
|
+
}
|
55
|
+
.menu__item a{
|
56
|
+
text-decoration: none;
|
57
|
+
}
|
58
|
+
.menu__item li{
|
59
|
+
list-style:none;
|
60
|
+
}
|
61
|
+
.menu__item__link {
|
62
|
+
color:#000;
|
63
|
+
display: block;
|
64
|
+
line-height: 60px;
|
65
|
+
padding: 0 1rem;
|
66
|
+
position: relative;
|
67
|
+
}
|
68
|
+
.menu__item__link:after {
|
69
|
+
background:#009FFF;
|
70
|
+
content: '\f067';
|
71
|
+
font-weight: 900;
|
72
|
+
display: block;
|
73
|
+
font-family: "Font Awesome 5 Free";
|
74
|
+
line-height: 60px;
|
75
|
+
position: absolute;
|
76
|
+
right: 0;
|
77
|
+
text-align: center;
|
78
|
+
top: 0;
|
79
|
+
width: 60px;
|
80
|
+
}
|
81
|
+
.menu__item__link.on:after {
|
82
|
+
content: '\f068';
|
83
|
+
}
|
84
|
+
|
85
|
+
.submenu {
|
86
|
+
background: #fff;
|
87
|
+
display: none;
|
88
|
+
}
|
89
|
+
.submenu__item {
|
90
|
+
border-bottom: 1px solid #009FFF;
|
91
|
+
color:#000;
|
92
|
+
padding: 1rem;
|
93
|
+
}
|
41
94
|
```
|