ドロワーメニューが出てこない。FontAwesomeの指定が効かない。

実現したいこと・試したこと・発生している問題

・ドロワーメニューのボタン用に、FontAwesomeのアイコンをボタンとして二つ(横並びに配置)指定し表示させたいが、一つしか表示されない。
しかし表示されないもう一つのアイコンを指定した位置にカーソルを当てるとポインターが指マークに反応するので、画像の下に隠れているのかと思いz-index(数値は小さい数字から大きい数字まで試しました)を指定したが、やはりアイコンは現れず。

・上記のアイコンもしくはその隣のボタンを押すと上からドロワーメニューを実現させるため、:chekedや:before:afterを使って動きを繋げたがメニューは出てこない。

以上２点を解決したいです。よろしくお願いいたします。

該当のソースコード

	<style>
　　　　　/* ++++ 開閉ボタン ++++ */
		#navTgl {
			display: none;
		}

		.label-wrap{
			position:relative;
		}

		.label-wrap label {
			cursor: pointer;
			display: flex;
	    	flex-direction:row;
	    	z-index:100;
		}

		.icon{
			content:'\ユニコード';
			width:25px;
			height:25px;
			position:absolute;
			top:15px;
			left:30px;
		}

		.btn {
			z-index: 1000;
			transition: background .5s, transform .5s cubic-bezier(0.76, 0.52, 0.29, 1.25);
			color: #fff;
			position:absolute;
			top:15px;
			left:50px;
			transform:translate();
		}

		.btn li i {
	    position: absolute;
	    top: 16px;
	    left: 12px;
	    font-size: 18px;
	    color: #595959;
	    -webkit-transition: all 0.4s ease;
	    -o-transition: all 0.4s ease;
	    transition: all 0.4s ease;
		}

		.icon,
		.btn:before,
		.btn:after{
			display:inline-block;
			margin-right:.5em;
			font-family:'Font Awesome 5 Free';
			font-weight:900;
		}


		#navTgl:checked ~ .icon:after{
			color:#0e898f;
		}

		.btn:before{
			content:"\f078";
		}

		.btn:after{
			content:"\f077";
		}

		.btn {
		    -webkit-transform: rotate(-180deg);
		    -ms-transform: rotate(-180deg);
		    -o-transform: rotate(-180deg);
		    transform: rotate(-180deg);
		    color:#fff;
		}

		#navTgl ~ .btn:before{
			display:block;
		}
		
		#navTgl ~ .btn:after{
			display:none;
		}
		
		#navTgl:checked ~ .btn:before{
			display:none;
		}

		#navTgl:checked ~ .btn:after{
			display:block;
			color:#0e898f;
		}

		
		 
		/* ++++ ドロワーメニュー ++++ */
		.content {
			z-index: 1000;
			position: fixed;
			overflow: auto;
			top: -200px;
			left: 0;
			width: 100%;
			height: 100%;
			padding: 6%;
			margin: 0;
			box-sizing: border-box;
			transform: translateY(-100%);
			transition: transform .5s cubic-bezier(0.33, 1.01, 0.33, 0.97);
			background-color:#fff;
		}

		.btn:checked + .content{
			top:200px;
		}

		#navTgl ~ .content{
			transform:translate(0, 100px);
			transition:transform 0.3s ease-in-out;
		}

		#navTgl:checked ~ .content{
			transform:none;
		}

		#main .mainimg{
			background-image:url(images/photo1.jpg);
			background-size:cover;
			box-shadow:0 -90px 25px 30px rgba(0,0,0,.3) inset;
			height:240px;
			margin-top:0;
		}
	</style>
</head>


<body>
	<div class="label-wrap">
		<input type="checkbox" id="navTgl"><!--ボタンのスイッチ----->
		<label for="navTgl" class="icon"></label><!---アイコンボタン(.btnと同じ開閉ボタン)--->
		<label for="navTgl" class="btn"><!---ドロワーメニュー開閉ボタン--->
		</label>
	</div>

	<nav class="content">
		<ul>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
        </ul>
	</nav>

	<div id="main">
		<div class="mainimg"></div>
    </div>
</body>

主に参考にさせていただいたサイト

(https://tadtadya.com/html-css-how-to-drawer-menu/#home-step-1)
(https://lopan.jp/css-animation-drawer/)

m.ts10806

2020/04/27 03:18

>ドロワーメニューが出てこない。FontAwesomeの指定が効かない。全く別問題かと思います。１つずつ解決しましょう。編集してどちらか１つにしてください。

nkira

2020/04/27 04:00

ご指摘いただきありがとうございます。確認にきた時にはすでに他の回答者様からご回答をいただいておりましたので、今回はこのままにさせていただきます。以後気をつけます。

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

回答1件

ベストアンサー

・ドロワーメニューのボタン用に、FontAwesomeのアイコンを二つ(横並びに配置)指定し表示させたいが、一つしか表示されない。

.icon ではなく .icon::before ではないでしょうか (動作確認用リンク)。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4  <head>
5    <meta charset="UTF-8">
6    <title>タイトル</title>
7    <style>
8      /* ++++ 開閉ボタン ++++ */
9      #navTgl {
10        display: none;
11      }
12
13      .label-wrap {
14        position: relative;
15      }
16
17      .label-wrap label {
18        cursor: pointer;
19        display: flex;
20        flex-direction: row;
21        z-index: 100;
22      }
23
24      .icon::before {
25        content: '\ユニコード';
26        width: 25px;
27        height: 25px;
28        position: absolute;
29        top: 15px;
30        left: 30px;
31      }
32
33      .btn {
34        z-index: 1000;
35        transition: background .5s, transform .5s cubic-bezier(0.76, 0.52, 0.29, 1.25);
36        color: #fff;
37        position: absolute;
38        top: 15px;
39        left: 50px;
40        transform: translate();
41      }
42
43      .btn li i {
44        position: absolute;
45        top: 16px;
46        left: 12px;
47        font-size: 18px;
48        color: #595959;
49        -webkit-transition: all 0.4s ease;
50        -o-transition: all 0.4s ease;
51        transition: all 0.4s ease;
52      }
53
54      .icon,
55      .btn:before,
56      .btn:after {
57        display: inline-block;
58        margin-right: .5em;
59        font-family: 'Font Awesome 5 Free';
60        font-weight: 900;
61      }
62
63
64      #navTgl:checked~.icon:after {
65        color: #0e898f;
66      }
67
68      .btn:before {
69        content: "\f078";
70      }
71
72      .btn:after {
73        content: "\f077";
74      }
75
76      .btn {
77        -webkit-transform: rotate(-180deg);
78        -ms-transform: rotate(-180deg);
79        -o-transform: rotate(-180deg);
80        transform: rotate(-180deg);
81        color: #fff;
82      }
83
84      #navTgl~.btn:before {
85        display: block;
86      }
87
88      #navTgl~.btn:after {
89        display: none;
90      }
91
92      #navTgl:checked~.btn:before {
93        display: none;
94      }
95
96      #navTgl:checked~.btn:after {
97        display: block;
98        color: #0e898f;
99      }
100
101
102
103      /* ++++ ドロワーメニュー ++++ */
104      .content {
105        z-index: 1000;
106        position: fixed;
107        overflow: auto;
108        top: -200px;
109        left: 0;
110        width: 100%;
111        height: 100%;
112        padding: 6%;
113        margin: 0;
114        box-sizing: border-box;
115        transform: translateY(-100%);
116        transition: transform .5s cubic-bezier(0.33, 1.01, 0.33, 0.97);
117        background-color: #fff;
118      }
119
120      .btn:checked+.content {
121        top: 200px;
122      }
123
124      #navTgl~.content {
125        transform: translate(0, 100px);
126        transition: transform 0.3s ease-in-out;
127      }
128
129      #navTgl:checked~.content {
130        transform: none;
131      }
132
133      #main .mainimg {
134        background-image: url(images/photo1.jpg);
135        background-size: cover;
136        box-shadow: 0 -90px 25px 30px rgba(0, 0, 0, .3) inset;
137        height: 240px;
138        margin-top: 0;
139      }
140
141    </style>
142  </head>
143
144
145  <body>
146    <div class="label-wrap">
147      <input type="checkbox" id="navTgl">
148      <!--ボタンのスイッチ----->
149      <label for="navTgl" class="icon"></label>
150      <!---アイコンボタン(.btnと同じ開閉ボタン)--->
151      <label for="navTgl" class="btn">
152        <!---ドロワーメニュー開閉ボタン--->
153      </label>
154    </div>
155
156    <nav class="content">
157      <ul>
158        <li>...</li>
159        <li>...</li>
160        <li>...</li>
161        <li>...</li>
162      </ul>
163    </nav>
164
165    <div id="main">
166      <div class="mainimg"></div>
167    </div>
168  </body>
169
170</html>

・上記のアイコンもしくはその隣のボタンを押すと上からドロワーメニューを実現させるため、:chekedや:before:afterを使って動きを繋げたがメニューは出てこない。

#navTgl が .label-wrap 内にあり、一般兄弟結合子による選択が行えないためです。#navTgl が .content と兄弟要素になるようにすることで問題は解決します (動作確認用リンク)。

CSS
1<!DOCTYPE html>
2<html lang="ja">
3
4  <head>
5    <meta charset="UTF-8">
6    <title>タイトル</title>
7    <style>
8      /* ++++ 開閉ボタン ++++ */
9      #navTgl {
10        display: none;
11      }
12
13      .label-wrap {
14        position: relative;
15      }
16
17      .label-wrap label {
18        cursor: pointer;
19        display: flex;
20        flex-direction: row;
21        z-index: 100;
22      }
23
24      .icon::before {
25        content: '\ユニコード';
26        width: 25px;
27        height: 25px;
28        position: absolute;
29        top: 15px;
30        left: 30px;
31      }
32
33      .btn {
34        z-index: 1000;
35        transition: background .5s, transform .5s cubic-bezier(0.76, 0.52, 0.29, 1.25);
36        color: #fff;
37        position: absolute;
38        top: 15px;
39        left: 50px;
40        transform: translate();
41      }
42
43      .btn li i {
44        position: absolute;
45        top: 16px;
46        left: 12px;
47        font-size: 18px;
48        color: #595959;
49        -webkit-transition: all 0.4s ease;
50        -o-transition: all 0.4s ease;
51        transition: all 0.4s ease;
52      }
53
54      .icon,
55      .btn:before,
56      .btn:after {
57        display: inline-block;
58        margin-right: .5em;
59        font-family: 'Font Awesome 5 Free';
60        font-weight: 900;
61      }
62
63
64      #navTgl:checked~.icon:after {
65        color: #0e898f;
66      }
67
68      .btn:before {
69        content: "\f078";
70      }
71
72      .btn:after {
73        content: "\f077";
74      }
75
76      .btn {
77        -webkit-transform: rotate(-180deg);
78        -ms-transform: rotate(-180deg);
79        -o-transform: rotate(-180deg);
80        transform: rotate(-180deg);
81        color: #fff;
82      }
83
84      #navTgl~.btn:before {
85        display: block;
86      }
87
88      #navTgl~.btn:after {
89        display: none;
90      }
91
92      #navTgl:checked~.btn:before {
93        display: none;
94      }
95
96      #navTgl:checked~.btn:after {
97        display: block;
98        color: #0e898f;
99      }
100
101
102
103      /* ++++ ドロワーメニュー ++++ */
104      .content {
105        z-index: 1000;
106        position: fixed;
107        overflow: auto;
108        top: -200px;
109        left: 0;
110        width: 100%;
111        height: 100%;
112        padding: 6%;
113        margin: 0;
114        box-sizing: border-box;
115        transform: translateY(-100%);
116        transition: transform .5s cubic-bezier(0.33, 1.01, 0.33, 0.97);
117        background-color: #fff;
118      }
119
120      .btn:checked+.content {
121        top: 200px;
122      }
123
124      #navTgl~.content {
125        transform: translate(0, 100px);
126        transition: transform 0.3s ease-in-out;
127      }
128
129      #navTgl:checked~.content {
130        transform: none;
131      }
132
133      #main .mainimg {
134        background-image: url(images/photo1.jpg);
135        background-size: cover;
136        box-shadow: 0 -90px 25px 30px rgba(0, 0, 0, .3) inset;
137        height: 240px;
138        margin-top: 0;
139      }
140
141    </style>
142  </head>
143
144
145  <body>
146    <div class="label-wrap">
147      <!--ボタンのスイッチ----->
148      <label for="navTgl" class="icon"></label>
149      <!---アイコンボタン(.btnと同じ開閉ボタン)--->
150      <label for="navTgl" class="btn">
151        <!---ドロワーメニュー開閉ボタン--->
152      </label>
153    </div>
154    <input type="checkbox" id="navTgl">
155
156    <nav class="content">
157      <ul>
158        <li>...</li>
159        <li>...</li>
160        <li>...</li>
161        <li>...</li>
162      </ul>
163    </nav>
164
165    <div id="main">
166      <div class="mainimg"></div>
167    </div>
168  </body>
169
170</html>