画面外部からスライドしてくるドロワーメニューをCSSのみで作成します。
設定
WordPressの場合
どのページでも常時開閉ボタンが表示できるようにheader.php又はfooter.phpに↓を挿入します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="panel"> <label for="check" class="btn">開閉ボタン1</label> <input type="checkbox" class="check" id="check" /> <ul> <li>テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト。 </li> <li><a href="/">リンク</a></li> <li><a href="/">リンク</a></li> <li><a href="/">リンク</a></li> <li><a href="/">リンク</a></li> </ul> <label for="check" class="cbtn"></label> </div> |
↓のCSSを参考にどうぞ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
.panel .btn { position: fixed; color:#fff; display: block; right: 0px; padding-top: 4px; padding-right: 10px; padding-bottom: 4px; padding-left: 10px; z-index: 9999; background-color: #F90; cursor: pointer; } .panel .btn:hover { filter: alpha(opacity=90); opacity: .90; } .panel .cbtn { z-index: 99; display: none; top: 0; left: 0; position: fixed; } .panel .check { display: none; } .panel ul { position: fixed; z-index: 999; display: block; font-size: 0.9em; background-color: #F6F6F6; max-width: 1000px; top: -500px; margin-right: 2%; padding: 5%; list-style-type: none; transition: 0.5s ease-in-out; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; } .panel .check:checked + ul { top: 30px; } .panel .check:checked + ul + .cbtn { display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.2); } .panel ul li{ padding-right: 5px; padding-left: 5px; } .panel a { display: block; padding: 10px; text-align: center; margin-top: 15px; background-color: #999; color: #FFF; text-decoration: none; } .panel a:hover { background-color: #666; } |
