前提・実現したいこと
https://saruwakakun.com/html-css/reference/nav-drawer
上記のサイトを参考にハンバーガーメニューを作成しようとしています。
サイトでは左からハンバーガーメニューが出現してますが、右側から出現させたいため調整したのですがうまくいきませんでした。
webページ右側にあるハンバーガーメニューをクリックし、右から左へのスライド表示方法についてご教示いただけますと幸いです。
該当のソースコード
HTML
1 <div id="nav-drawer"> 2 <input id="nav-input" type="checkbox" class="nav-unshown"> 3 <label id="nav-open" for="nav-input"><span></span></label> 4 <p>MENU</p> 5 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 6 <div id="nav-content">ここに中身を入れる</div> 7 </div>
CSS
1#nav-drawer { 2 position: relative; 3 width: 60px; 4 text-align: center; 5} 6 7#nav-drawer p { 8 margin: 0; 9 font-size: 10px; 10} 11 12/*チェックボックス等は非表示に*/ 13.nav-unshown { 14 display:none; 15} 16 17/*アイコンのスペース*/ 18#nav-open { 19 display: inline-block; 20 width: 30px; 21 height: 22px; 22 vertical-align: middle; 23 margin: 0; 24} 25 26/*ハンバーガーアイコンをCSSだけで表現*/ 27#nav-open span, #nav-open span:before, #nav-open span:after { 28 position: absolute; 29 height: 3px;/*線の太さ*/ 30 width: 30px;/*長さ*/ 31 border-radius: 3px; 32 background: #555; 33 display: block; 34 content: ''; 35 cursor: pointer; 36} 37#nav-open span:before { 38 bottom: -8px; 39} 40#nav-open span:after { 41 bottom: -16px; 42} 43 44/*閉じる用の薄黒カバー*/ 45#nav-close { 46 display: none;/*はじめは隠しておく*/ 47 position: fixed; 48 z-index: 99; 49 top: 0;/*全体に広がるように*/ 50 left: 0; 51 width: 100%; 52 height: 100%; 53 background: black; 54 opacity: 0; 55 transition: .3s ease-in-out; 56} 57 58/*中身*/ 59#nav-content { 60 overflow: auto; 61 position: fixed; 62 top: 0; 63 left: 0; 64 z-index: 9999;/*最前面に*/ 65 width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/ 66 max-width: 330px;/*最大幅(調整してください)*/ 67 height: 100%; 68 background: #fff;/*背景色*/ 69 transition: .3s ease-in-out;/*滑らかに表示*/ 70 -webkit-transform: translateX(-105%); 71 transform: translateX(-105%);/*左に隠しておく*/ 72} 73 74/*チェックが入ったらもろもろ表示*/ 75#nav-input:checked ~ #nav-close { 76 display: block;/*カバーを表示*/ 77 opacity: .5; 78} 79 80#nav-input:checked ~ #nav-content { 81 -webkit-transform: translateX(0%); 82 transform: translateX(0%);/*中身を表示(右へスライド)*/ 83 box-shadow: 6px 0 25px rgba(0,0,0,.15); 84} 85
試したこと
nav-contentのleft: 0;をright: 0;に変更してみましたが、ページ右側に余白ができてしまうだけで、出現方法は切り替わりませんでした。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/08 05:46
2020/03/08 05:47