画面の外からスライドしてくるドロワーメニューをJavaScriptで作成します。
設定
WordPressの場合
header.phpの<?php wp_head(); ?>の上あたりに↓を追加します。
|
1 2 3 4 |
<?php wp_deregister_script( 'jquery' ); wp_enqueue_script('jquery','https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'); ?> |
どのページでも常時開閉ボタンが表示できるようにheader.php又はfooter.phpに↓を挿入します。
|
1 |
<a class="trigger_right" href="#">開閉ボタン1</a> |
例）↓このような感じでheader.php又はfooter.phpに挿入します。
|
1 2 3 4 5 6 7 8 9 10 |
<div class="panel_right"> <ul> <li>テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト。 </li> <li><a href="/">リンク</a></li> <li><a href="/">リンク</a></li> <li><a href="/">リンク</a></li> <li><a href="/">リンク</a></li> </ul> </div> |
↓を外部からpanel.jsとして読み込ませます。外部JavaScriptを読み込ませる
|
1 2 3 4 5 6 7 |
$(document).ready(function(){ $(".trigger_right").click(function(){ $(".panel_right").toggle("fast"); $(this).toggleClass("active"); return false; }); }); |
↓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 |
.panel_right { color:#fff; position: fixed; top: 30px; right: 0px; padding: 30px; display: none; font-size: 0.9em; background-color: #666; z-index: 99; max-width: 1000px; } .panel_right a { font-size: 1.3em; font-weight: bold; display: block; padding: 5px; margin-top: 5px; background-color: #FFF; color: #333; text-decoration: none; } a.trigger_right{ position: fixed; text-decoration: none; color:#fff; display: block; right: 0px; padding-top: 4px; padding-right: 10px; padding-bottom: 4px; padding-left: 10px; z-index: 9999; background-color: #F90; } .panel_right ul{ list-style-type: none; } |
スタイルシートのみで動作するドロワーメニューも作れます。
