CSSのみのドロワーメニューで画面両側から 押したボタンに応じて指定した要素を出したいです。
< 理想な状態 >
右側のボタンを押すと右側から要素①が出現。
左側のボタンを押すと左側から要素②が出現。
< 現在の状態 >
右のサーチボタンを押した際には右側のみ出てくれるのですが、
左のハンバーガーメニューを選択すると右左両側の要素が同時に出てしまい 被ってしまいます。
まだまだ知識が浅いもので 情報不足かもしれませんが、
関係のありそうなコードを貼らせていただきます。
HTML
<div class="header"></div> <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu"> <label for="openSidebarMenu" class="sidebarIconToggle"> <div class="spinner diagonal part-1"></div> <div class="spinner horizontal"></div> <div class="spinner diagonal part-2"></div> </label> <div id="sidebarMenu"></div> <input type="checkbox" class="openSidebarSearch" id="openSidebarSearch"> <label for="openSidebarSearch" class="sidebarIconSearch"> <i class="fas fa-search search_icon"></i> </label> <div id="sidebarSearch"></div>
CSS
.header { display: block; width: 100%; max-width: 100%; box-shadow: none; position: fixed; height: 50px; background: #2D2524; overflow: hidden; z-index: 10; } #sidebarMenu { position: relative; width: 100%; height: 100%; position: fixed; left: 0; margin-top: 50px; transform: translateX(-1500px); transition: transform 0.6s ease-in-out; background: #000000; } input[type="checkbox"]:checked ~ #sidebarMenu { transform: translateX(0); } #sidebarSearch { position: relative; height: 100%; left: 0; width: 100%; margin-top: 50px; transform: translateX(1500px); transition: transform 0.6s ease-in-out; background: #000000; color: #fff; position: fixed; text-align: center; } input[type="checkbox"]:checked ~ #sidebarSearch { transform: translateX(0); }
ご提示のコードを試してみましたが、そもそもハンバーガーメニューが見えませんでした。
どこを直せば動きますか?