Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

jQueryプラグイン bigSlide.js スライド式のメニューを簡単に実装する

今回は、jQueryプラグインの「bigSlide.js」について書きます。


「bigSlide.js」を使うと、クリックで開閉するスライド式のメニュー(スライド・ナビゲーション)を簡単に実装できます。

スライド式のメニューというのは、画面の左側から、ぬるっと現れるメニューみたいなものです。
スマホ版のGoogleのトップページにあるようなやつです。
f:id:gupuru:20140406172736p:plain


さっそく「bigSlide.js」の導入方法を書いていきます。

①ダウンロード

公式サイトから「bigSlide.js」をダウンロードします。
公式サイトはコチラ↓↓
http://ascott1.github.io/bigSlide.js/
f:id:gupuru:20140406172033p:plain

githubはコチラ↓↓
ascott1/bigSlide.js · GitHub

②「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">&#9776;</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">&#9776;</a>
	<h1>big-slideのテスト</h1>
</div>

<script>
    $(document).ready(function() {
        $('.menu-link').bigSlide();
    });
</script>
</body>
</html>

実行結果
f:id:gupuru:20140406171934p:plain
メニューオープン
f:id:gupuru:20140406171948p:plain


ここからは、もう少し詳しく解説します。

  • 「<div class="wrap push">」の「push」

「push」は、別になくても問題はありません。
これをつけない場合は、こうなります↓
f:id:gupuru:20140406172954p:plain
メニューが出て来た時、コンテンツがずれないので、メニューと重なります。
「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;
}

f:id:gupuru:20140406173552p:plain
多少は、まともになりました(笑)

もう少し手を加えると・・・

.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;
}

こんな感じです↓
f:id:gupuru:20140406175133p:plain

  • bigSlide.js のオプション

オプションは、いくつかあります。

「speed」は、メニューが出ているスピードを調節できます。
デフォルトは300です。

    $(document).ready(function() {
        $('.menu-link').bigSlide({
        	speed:600 
        });
    });

「menuWidth」メニューの横の長さを調整できます。
コレを使った場合は、cssの方も同じ長さになるように調整する必要があります。

    $(document).ready(function() {
        $('.menu-link').bigSlide({
        	menuWidth:'18.6em'
        });
    });


これで、終わります。そこそこ手軽に実際できるので便利です。


参考サイト
ascott1/bigSlide.js · GitHub
bigSlide.js