jQuery

jQueryプラグイン【Sidr】使い方 レスポンシブメニューも簡単に実装

sidr

今回は、レスポンシブメニューの実装に使えるjQueryプラグイン【Sidr】の使い方のご紹介です。

こちらの【Sidr】が適応されると、メニューがサイドからスライド表示されるようになります。
便利な所が、既存メニューを利用してスマホなどの閲覧時にスライドメニューに対応出来るので、WordPressにも簡単に実装が出来ると思います。
また、メニューだけではなくコンテンツもスライド表示ができ、スライド時のテーマも2種類あり専用のCSSファイルを読み込むだけで、テーマが適応されるようになっています。

なので、今回はPCの通常閲覧時(768px以上)には、通常通りのメニューを表示させ、プレイク後(768px以下)には、【Sidr】が適応されたスライドメニューを表示させたいと思います。
言葉で言っても、あんまり伝えるの苦手なのでwww下記にデモサイトのようなメニューの表示方法です。

デモサイト

実際にこちらのプラグインを利用する場合は、【Slidebars】から必要ファイルをダウンロードして下さい。

Sidr

Sidr 使い方

それでは、レスポンシブメニューの実装に使える【Sidr】の使い方を説明していきたいと思います。

必要ファイルの読み込み

まずは、jQuery本体と上記でダウンロードした【jquery.sidr.light.css】【jquery.sidr.min.js】をhead内に読み込んで下さい。
今回は、テーマを【Light】にしていますので、【jquery.sidr.light.css】を読み込んでいますが、【Dark】にしたい場合は【jquery.sidr.dark.css】を読み込んで下さい。

下記の読み込み時のファイルの階層などは、ご自身の環境に合わせて変更して下さい。

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

HTML

それでは、次にHTMLの準備をしていきます。
メニューに関しては、通常通りマークアップし、768px以下では、メニューのトグルボタンを表示させないといけないので、まずは、メニュー上にトグルボタンを作っておきます。

		<!-- ▼モバイル時のメニュートグルボタン▼ -->
        <div id="mobile">
    		<a id="sidr-menu-button" href="#sidr-nav">Menu</a>
  		</div>
        <!-- ▲モバイル時のメニュートグルボタン▲ -->
        
        <!-- ▼メニュー▼ -->
    	<nav class="head-nav">
    		<ul>
    			<li><a href="">HOME</a></li>
    			<li><a href="">SAMPLE</a></li>
    			<li><a href="">ABOUT</a></li>
    			<li><a href="">CONTACT</a></li>
    		</ul>
        </nav>
        <!-- ▲メニュー▲ -->

CSS

次にCSSを記述していきます、先ほどのトグルボタンにdisplay:none;を適応させます。
メディアクエリで768px以下では、トグルボタンを表示させ、既存のメニューを非表示にします。

#mobile {
    display: none;
}

@media screen and (max-width: 768px) {

#mobile {
        display: block;
    }
.head-nav{
	display:none;	
	}
}

JavaScript

最後にスクリプトを記述していきます。
実際にデモサイトで利用してみた時は、head内よりも</body>の直前に記述したほうが不都合がおきないようです。

<script>
    $('#sidr-menu-button').sidr({
      name: 'sidr-nav',
      source: '.head-nav',
      speed : 500,
      side : 'left'
    });
</script>

上記までを記述すれば、Sidrの実装の完了となります。
実際にこちらの【Sidr】を使用したデモサイトもご用意していますので、ご覧ください。

デモサイト

デモサイトでメニューに利用しているアイコンフォントは、【Font Awesome】を利用しています。
Font Awesomeの使い方は、下記記事をご覧ください。

商用利用無料のWebアイコンフォント【Font Awesome】使い方

その他オススメのスライドメニュー

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS parallax

CSSとHTMLだけで背景画像を固定しパララックスっぽくしてみる

NEXT searchregex

【WP】記事内の文字を一括置換え出来るSearch Regex使い方