ハンバーガーメニューをクリックすると、
右方向からメニューの中身がスライドするように設定したいのですが、
下記のコードからはどのように修正すれば良いのでしょうか。
下記は、左からスライドするように設定されています。
html
1<header> 2 <div id="nav-drawer"> 3 <input id="nav-input" type="checkbox" class="nav-unshown"> 4 <label id="nav-open" for="nav-input"><span></span></label> 5 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 6 <div id="nav-content">ここに中身を入れる</div> 7 </div> 8</header>
css
1header { 2 padding:10px; 3 background: skyblue; 4} 5 6#nav-drawer { 7 position: relative; 8} 9 10/*チェックボックス等は非表示に*/ 11.nav-unshown { 12 display:none; 13} 14 15/*アイコンのスペース*/ 16#nav-open { 17 display: inline-block; 18 width: 30px; 19 height: 22px; 20 vertical-align: middle; 21} 22 23/*ハンバーガーアイコンをCSSだけで表現*/ 24#nav-open span, #nav-open span:before, #nav-open span:after { 25 position: absolute; 26 height: 3px;/*線の太さ*/ 27 width: 25px;/*長さ*/ 28 border-radius: 3px; 29 background: #555; 30 display: block; 31 content: ''; 32 cursor: pointer; 33} 34#nav-open span:before { 35 bottom: -8px; 36} 37#nav-open span:after { 38 bottom: -16px; 39} 40 41/*閉じる用の薄黒カバー*/ 42#nav-close { 43 display: none;/*はじめは隠しておく*/ 44 position: fixed; 45 z-index: 99; 46 top: 0;/*全体に広がるように*/ 47 left: 0; 48 width: 100%; 49 height: 100%; 50 background: black; 51 opacity: 0; 52 transition: .3s ease-in-out; 53} 54 55/*中身*/ 56#nav-content { 57 overflow: auto; 58 position: fixed; 59 top: 0; 60 left: 0; 61 z-index: 9999;/*最前面に*/ 62 width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/ 63 max-width: 330px;/*最大幅(調整してください)*/ 64 height: 100%; 65 background: #fff;/*背景色*/ 66 transition: .3s ease-in-out;/*滑らかに表示*/ 67 -webkit-transform: translateX(-105%); 68 transform: translateX(-105%);/*左に隠しておく*/ 69} 70 71/*チェックが入ったらもろもろ表示*/ 72#nav-input:checked ~ #nav-close { 73 display: block;/*カバーを表示*/ 74 opacity: .5; 75} 76 77#nav-input:checked ~ #nav-content { 78 -webkit-transform: translateX(0%); 79 transform: translateX(0%);/*中身を表示(右へスライド)*/ 80 box-shadow: 6px 0 25px rgba(0,0,0,.15); 81}
初歩的な質問で恐れ入りますが、
ご教示いただけますと幸いです。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー