inputを使ったドロワーメニューに上下に動くようなfont awesomnoの矢印を付ける

現在、inputタグを使いドロワーメニューを作りました。MENUという文字の隣にドロワーが開いているときは上向き、閉まっているときは下向きの矢印が付くようにしたいのですが、どうすればよいでしょうか？

html
1<div id="drwr">
2    <label for="Panel1"><p>MENU</p></label>
3    <input type="checkbox" id="Panel1" class="on-off" />
4    <ul id="menu_drwr">
5      <li class="top"><a href="#top">TOP</a></li>
6      <li class="mimamori"><a href="#mimamori">みまもりナビ<br>とは</a></li>
7      <li class="func"><a href="#func">機能・特徴</a></li>
8      <li class="impl"><a href="#impl">導入事例</a></li>
9      <li class="inst"><a href="#inst">設置手順</a></li>
10      <li class="price"><a href="#price">価格<br>購入方法</a></li>
11      <li class="log_in"><a href="#log_in">ログイン<br>会員登録</a></li>
12    </ul>
13  </div>

css
1#drwr {
2  position: fixed;
3  z-index: 999;
4  display: block;
5  width: 100%;
6}
7label{
8    background: #E8648C;
9    height: 45px;
10    width: 100%;
11    color: #fff;
12    padding: 10px;
13    display: block;
14    margin: 0;
15}
16label p:before {
17  content: "\f13a";
18  font-family: FontAwesome;
19  padding-right:5px;
20  font-size: 25px;
21}
22
23label:hover {
24  background-color: #EF7D9F;
25}
26
27input[type="checkbox"].on-off{
28    display: none;
29}
30
31#drwr #menu_drwr {
32    -webkit-transition: all 0.5s;
33    -moz-transition: all 0.5s;
34    -ms-transition: all 0.5s;
35    -o-transition: all 0.5s;
36    transition: all 0.5s;
37    margin: 0;
38    padding: 0;
39    list-style: none;
40}
41
42#menu_drwr li {
43    padding: 5px;
44}
45
46input[type="checkbox"].on-off + ul{
47    height: 0;
48    overflow: hidden;
49}
50
51input[type="checkbox"].on-off:checked + ul{
52    height: 100vh;
53    background-color: #F4E5E4;
54}

行動規範の内容に同意します

回答1件

inputをlabelの前に持っていくと以下のコードで制御できます。

input:checked + label {...}
input:checked ~ ul {...}

html
1
2<div id="drwr">
3    <input type="checkbox" id="Panel1" class="on-off" />
4    <label for="Panel1"><p>MENU</p></label>
5    <ul id="menu_drwr">
6        ... 
7    </ul>
8</div>

css
1
2label p:before {
3
4  display: inline-block;
5  margin-right:5px; /* <-paddingではなくmarginにする */
6
7  content: "\f13a";
8  font-family: FontAwesome;
9  font-size: 25px;
10}
11
12input[type="checkbox"].on-off:checked + label p:before {
13  transform: rotate(180deg);
14}
15
16...
17
18input[type="checkbox"].on-off ~ ul{
19    height: 0;
20    overflow: hidden;
21}
22input[type="checkbox"].on-off:checked ~ ul{
23    height: 100vh;
24    background-color: #F4E5E4;
25}