回答編集履歴

修正

2020/04/27 03:50

投稿

s8_chu

スコア14731

test CHANGED Viewed

@@ -360,7 +360,7 @@
-`#navTgl` が `.label-wrap` 内にあるため、一般兄弟結合子による選択が行えないためです。`#navTgl` が `.content` と兄弟要素になるようにすることで問題は解決します ([動作確認用リンク](https://jsfiddle.net/2jmqy9nk/))。
+`#navTgl` が `.label-wrap` 内にあり、一般兄弟結合子による選択が行えないためです。`#navTgl` が `.content` と兄弟要素になるようにすることで問題は解決します ([動作確認用リンク](https://jsfiddle.net/2jmqy9nk/))。

追記

2020/04/27 03:50

投稿

s8_chu

スコア14731

test CHANGED Viewed

@@ -1,3 +1,7 @@
+> ・ドロワーメニューのボタン用に、FontAwesomeのアイコンを二つ(横並びに配置)指定し表示させたいが、一つしか表示されない。
 `.icon` ではなく `.icon::before` ではないでしょうか ([動作確認用リンク](https://jsfiddle.net/pgytvjuk/))。
@@ -345,3 +349,361 @@
 </html>
 ```
+---
+> ・上記のアイコンもしくはその隣のボタンを押すと上からドロワーメニューを実現させるため、:chekedや:before:afterを使って動きを繋げたがメニューは出てこない。
+`#navTgl` が `.label-wrap` 内にあるため、一般兄弟結合子による選択が行えないためです。`#navTgl` が `.content` と兄弟要素になるようにすることで問題は解決します ([動作確認用リンク](https://jsfiddle.net/2jmqy9nk/))。
+```CSS
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8">
+    <title>タイトル</title>
+    <style>
+      /* ++++ 開閉ボタン ++++ */
+      #navTgl {
+        display: none;
+      }
+      .label-wrap {
+        position: relative;
+      }
+      .label-wrap label {
+        cursor: pointer;
+        display: flex;
+        flex-direction: row;
+        z-index: 100;
+      }
+      .icon::before {
+        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">
+      <!--ボタンのスイッチ----->
+      <label for="navTgl" class="icon"></label>
+      <!---アイコンボタン(.btnと同じ開閉ボタン)--->
+      <label for="navTgl" class="btn">
+        <!---ドロワーメニュー開閉ボタン--->
+      </label>
+    </div>
+    <input type="checkbox" id="navTgl">
+    <nav class="content">
+      <ul>
+        <li>...</li>
+        <li>...</li>
+        <li>...</li>
+        <li>...</li>
+      </ul>
+    </nav>
+    <div id="main">
+      <div class="mainimg"></div>
+    </div>
+  </body>
+</html>
+```