jQueryプラグイン bigSlide.js スライド式のメニューを簡単に実装する
今回は、jQueryプラグインの「bigSlide.js」について書きます。
「bigSlide.js」を使うと、クリックで開閉するスライド式のメニュー(スライド・ナビゲーション)を簡単に実装できます。
スライド式のメニューというのは、画面の左側から、ぬるっと現れるメニューみたいなものです。
スマホ版のGoogleのトップページにあるようなやつです。
さっそく「bigSlide.js」の導入方法を書いていきます。
①ダウンロード
公式サイトから「bigSlide.js」をダウンロードします。
公式サイトはコチラ↓↓
http://ascott1.github.io/bigSlide.js/
②「bigSlide.js」を読み込み
「bigSlide.js」を読み込みます。jqueryも忘れないように。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.big-slide.js"></script>
③styleの設定
<style>〜</style>の部分にこんな感じのやつを追加します。
<style> .wrap { position: relative; } .panel { position: fixed; left: -15.625em; width: 15.625em; } </style>
④メニューの設定
<body>〜</body>の部分にこれらを追加します。
<li>の部分がメニューになる所です。
「<div class="wrap・・・」の部分は、ボタンみたいなものです。ここを押すとメニューが出てきます。
<nav id="menu" class="panel" role="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">The Ballad of El Goodo</a></li> <li><a href="#">Thirteen</a></li> <li><a href="#">September Gurls</a></li> <li><a href="#">What's Going Ahn</a></li> </ul> </nav> <div class="wrap push"> <a href="#menu" class="menu-link">☰</a> </div>
⑤jqueryの設定
<script>〜</script>の部分にこれを追加します。
<script> $(document).ready(function() { $('.menu-link').bigSlide(); }); </script>
これで、実装できました!
サンプルプログラムも書いときます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryプラグイン</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.big-slide.js"></script> <style> .wrap { position: relative; } .panel { position: fixed; left: -15.625em; width: 15.625em; } </style> </head> <body> <nav id="menu" class="panel" role="navigation"> <ul> <li><a href="#">ほーむ</a></li> <li><a href="#">google</a></li> <li><a href="#">写真</a></li> <li><a href="#">スペイン</a></li> <li><a href="#">その他</a></li> </ul> </nav> <div class="wrap push"> <a href="#menu" class="menu-link">☰</a> <h1>big-slideのテスト</h1> </div> <script> $(document).ready(function() { $('.menu-link').bigSlide(); }); </script> </body> </html>
実行結果
メニューオープン
ここからは、もう少し詳しく解説します。
- 「<div class="wrap push">」の「push」
「push」は、別になくても問題はありません。
これをつけない場合は、こうなります↓
メニューが出て来た時、コンテンツがずれないので、メニューと重なります。
「push」をつけとくと、コンテンツも一緒にずれるので、重なることはありません。
- cssをいじる
上のプログラムのcssですと、メニューのデザインがダサイです(笑)
公式サイトに書いてある方法で少しcssをいじります。
.panel { position: fixed; left: -15.625em; width: 15.625em; } body { font-family: 'Source Sans Pro', sans-serif; color: #101820; line-height: 1.5; } .wrap { position: relative; max-width: 80%; margin: 0 auto; padding: 20px; } .panel { background: #101820; } .panel a { color: #fff; }
多少は、まともになりました(笑)
もう少し手を加えると・・・
.panel { background: #2C3E50; z-index: 9999; position: fixed; left: -15.625em; /*or width of your navigation panel*/ width: 15.625em; /*should match the above value*/ } .panel ul { border-top: 2px solid #34495D; } .panel a { display: block; border-bottom: 2px solid #34495D; padding: 1em; } .panel a:link, .panel a:visited { color: #fff; } .panel a:hover, .panel a:active { background: #25B89A; }
こんな感じです↓
- bigSlide.js のオプション
オプションは、いくつかあります。
「speed」は、メニューが出ているスピードを調節できます。
デフォルトは300です。
$(document).ready(function() { $('.menu-link').bigSlide({ speed:600 }); });
「menuWidth」メニューの横の長さを調整できます。
コレを使った場合は、cssの方も同じ長さになるように調整する必要があります。
$(document).ready(function() { $('.menu-link').bigSlide({ menuWidth:'18.6em' }); });
これで、終わります。そこそこ手軽に実際できるので便利です。