プラカンブログSTAFF BLOG

2015.10.15

「sidr」の使い方 ~横からスライドするメニュー~

title

こんにちは。デザイナーの(鈴)です。
今回ももちろん「使い方」シリーズです!

スマホサイトを制作し始めた時は
facebook風の横からスライドするメニューをよく希望され、困っていました。
そこで大いに助けてもらった「sidr」というプラグインを紹介します。

「sidr」とは

横からスライドするメニューを実現するプラグインです。
「sidr」の良さは左右の両方からスライドが可能なことです。
さらに同ページに複数実装可能なので、左右のメニューも同時に実装できます。

「sidr」の使い方

必要なファイルを下記公式ページの「Download」から一式ダウンロード。
http://www.berriart.com/sidr/

CSSは背景色が明るい「jquery.sidr.light.css」と
背景色が暗い「jquery.sidr.dark.css」の2つが用意されています。
デザインに合わせて使用するCSSを選んでください。

今回は背景色が明るい「jquery.sidr.light.css」を使った場合で紹介します。

ダウンロードしたファイルから下記2つを読み込みます。
jquery.sidr.light.css
jquery.sidr.min.js

読み込む記述は下記のようになります。
※jQuery本体ファイルの読み込みを忘れずに!

<link rel="stylesheet" type="text/css" href="jquery.sidr.light.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.sidr.min.js"></script>

htmlの記述方法

<a id="slide-menu" href="#sidr">メニュー</a>
 
<div id="sidr-menu">
    <ul>
        <li class="active"><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
        <li><a href="#">メニュー4</a></li>
    </ul>
</div>
 

「slide-menu」というidを付けた要素はメニューをスライドさせ、
表示・非表示を制御しています。
スライドする部分は

以下の内容になり、
<li>がメニュー部分になります。

また<li>に「active」というclass名を指定すると
ボタンを選択した状態の表現になります。

例として「slide-menu」、「slide-menu」というid名にしていますが、
classでも可能ですし、後述のスクリプトの指定と合わせていれば
自由に指定可能です。

JavaScriptの記述方法

基本的にはhead内か外部JSとして下記のコードを記述すれば、イベントが実行されます。
※idやclass名はhtmlでの指定と同じなるように注意しましょう。

<script type="text/javascript">
$(document).ready(function() {
    $('#slide-menu').sidr({
      name: 'sidr-menu',
      side : 'left'
    });
});
</script>

この記述は左からスライドするメニューになります。
右にする場合は「side : ‘left’」を「side : ‘right’」にしてください。

「sidr」の基本的な実装は以上になります。

閉じるボタンの追加方法

メニューの表示・非表示は前述のとおり、
「slide-menu」というidを付けた要素のボタンのみになります。
メニューを表示後、非表示にするためには
上記のボタンまで戻らなければなりません。

少し不便なので操作性を向上させるため、
メニュー項目内に「閉じる」ボタンを追加するのがいいと思います。

【htmlの記述方法】

<a class="slide-menu" href="#sidr">メニュー</a>

<div id="sidr-menu">
	<ul>
		<li class="active"><a href="#">メニュー1</a></li>
		<li><a href="#">メニュー2</a></li>
		<li><a href="#">メニュー3</a></li>
		<li><a href="#">メニュー4</a></li>
		<li><a class="slide-menu" href="#sidr">閉じる</a></li>
	</ul>
</div>

「slide-menu」というidを付けた要素をclassに変更します。
<li>に<a class=”slide-menu” href=”#sidr”>閉じる</a>を追加します。

【JavaScriptの記述方法】

<script type="text/javascript">
$(document).ready(function() {
    $('.slide-menu').sidr({
      name: 'sidr-menu',
      side : 'left'
    });
});
</script>

htmlの記述に合わせ、「#slide-menu」を「.slide-menu」にしてください。
以上でメニュー内の「閉じる」ボタンでも表示・非表示を制御可能になります。

実装してみて

これまた簡単に実装できるので安心なライブラリです。
レスポンシブも不安なしですね!
CSSも用意されており、よくできているので、
そのまま使用可能なのも嬉しいところです。
とても便利なライブラリなのでぜひお試しください。

参考リンク

下記サイトは参考にしたサイトになります。
複数の実装方法などかなり詳しく紹介しています。

http://number333.org/2013/06/14/sidr/
http://glow-factory.com/blog_web/jquery/how-to-sidr/
http://morobrand.net/mororeco/jquery/sidr/
http://shufulife.com/close-button-sidr/

この記事は、SUZUKI が書きました。