https://saruwakakun.com/html-css/reference/nav-drawer
上記のサイトを参考にハンバーガーメニューを作成しようとしています。
WordPressにて使用します。
PCではハンバーガーではなく、横並びのナビゲーションリストのイメージです。
サイトでは左にハンバーガーメニューを設置してあったのですが、右側に設置したいため調整したのですがうまく表示されず。。
ハンバーガーメニューをクリックし、右から左への、スライド表示がうまくいっておらず、うまく表示される方法をご教示いただけますと幸いです。
PHP
1<div class="headerContainer"> 2 <h1><a href=""><img src="/asset/common/logo.svg" class="headerLogo" alt=""></h1> 3 <?php if ( wp_is_mobile() ) : ?> 4 <div id="nav-drawer"> 5 <input id="nav-input" type="checkbox" class="nav-unshown"> 6 <label id="nav-open" for="nav-input"><span></span></label> 7 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 8 <div id="nav-content"> 9 <nav> 10 <ul class="headerLink"> 11 <li class="navTitle"><a href="/category/news">お知らせ</a></li> 12 <li class="navTitle"><a href="/category/blog">ブログ</a></li> 13 <li class="navTitle"><a href="/category/casestudy">導入事例</a></li> 14 <li class="navTitle"><a href="/company">会社情報</a></li> 15 <li class="navTitle"><a href="/contact" target="_blank">お問い合わせ</a></li> 16 </ul> 17 </nav> 18 </div> 19 </div> 20 <?php else: ?> 21 <div id="nav-content"> 22 <nav> 23 <ul class="headerLink"> 24 <li class="navTitle"><a href="/category/news">お知らせ</a></li> 25 <li class="navTitle"><a href="/category/blog">ブログ</a></li> 26 <li class="navTitle"><a href="/category/casestudy">導入事例</a></li> 27 28 <li class="navTitle"><a href="/company">会社情報</a></li> 29 <li class="navTitle"><a href="/contact" target="_blank">お問い合わせ</a></li> 30 </ul> 31 </nav> 32 </div> 33 </div> 34 <?php endif; ?> 35 </div> 36 </div>
CSS
1#nav-drawer { 2 position: absolute; 3 top: 15px; 4 right: 15px; 5} 6 7/*チェックボックス等は非表示に*/ 8.nav-unshown { 9 display:none; 10} 11 12/*アイコンのスペース*/ 13#nav-open { 14 display: inline-block; 15 width: 30px; 16 height: 22px; 17 vertical-align: middle; 18} 19 20/*ハンバーガーアイコンをCSSだけで表現*/ 21#nav-open span, #nav-open span:before, #nav-open span:after { 22 position: absolute; 23 height: 3px;/*線の太さ*/ 24 width: 25px;/*長さ*/ 25 border-radius: 3px; 26 background: #030818; 27 display: block; 28 content: ''; 29 cursor: pointer; 30} 31#nav-open span:before { 32 bottom: -8px; 33} 34#nav-open span:after { 35 bottom: -16px; 36} 37 38/*閉じる用の薄黒カバー*/ 39#nav-close { 40 display: none;/*はじめは隠しておく*/ 41 position: fixed; 42 z-index: 99; 43 top: 0;/*全体に広がるように*/ 44 left: 0; 45 width: 100%; 46 height: 100%; 47 background: black; 48 opacity: 0; 49 transition: .3s ease-in-out; 50} 51 52/*中身*/ 53#nav-content { 54 overflow: auto; 55 position: fixed; 56 top: 0; 57 left: 0; 58 z-index: 9999;/*最前面に*/ 59 width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/ 60 max-width: 330px;/*最大幅(調整してください)*/ 61 height: 100%; 62 background: #fff;/*背景色*/ 63 transition: .3s ease-in-out;/*滑らかに表示*/ 64 -webkit-transform: translateX(120%); 65 transform: translateX(120%);/*右に隠しておく*/ 66} 67 68/*チェックが入ったらもろもろ表示*/ 69#nav-input:checked ~ #nav-close { 70 display: block;/*カバーを表示*/ 71 opacity: .5; 72} 73 74#nav-input:checked ~ #nav-content { 75 -webkit-transform: translateX(0%); 76 transform: translateX(0%);/*中身を表示(左へスライド)*/ 77 box-shadow: 6px 0 25px rgba(0,0,0,.15); 78}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/30 03:24
2019/08/02 04:13