monograph

スマホで”横から出てくる”メニュー作れるjQueryプラグイン「Sidr」の使い方!かんたんに実装できる上にサクサク動く!

      2013/06/15

Number333 2013-06-14 12.37.31.png
意外と細々とした作業が好きです。PITE.(@infoNumber333)です。

この間発表されたiOS7のフラットデザインに感化されて、少し僕のブログにも取り入れてみよう!と思い立ち、昨日3時間くらいで新しいスマホ用テーマを作成してみました。まだプロトタイプなので詳しい記事はまたあとで書きます。

今回新テーマを作る際に一度やってみたかった横から出てくるメニューを実装することにしました。この、「横から出てくるメニュー」を実装するためにはjQueryというjavascriptの一種を使う必用があるのですが、そのjQueryの中にも色々なプラグインがあってそれぞれ動作や重さが違います。そこで、「軽くてサクサク動く」プラグインはないかなーと思っていた所、昨日ブロネクでご一緒したNANOKAMO BLOGのハンサム氏に「Sidr」ってやつがいいよ!と教えてもらい使って見ることに。さすがハンサム氏。

実際使ってみたところ簡単に実装できる上にサクサク動くのでこのプラグインを使っていくことに決めました!一応参考までに挙動や実装の方法などを解説しておきます。

jQueryプラグイン「Sidr」


写真_2013-06-14_12_32_22.png
こちらが新テーマの記事ページ。上のバーの右側の水玉アイコンをタップするとメニューが開く仕掛けにしてあります。

写真 2013-06-14 12 32 37.png
タップするとこのように右から「にゅっ」とメニューが出てくるように。それほど動きがカクつかないので満足。上の「MENU」というところか「閉じる」をタップすればメニューを閉じる仕様に。

また、最初からCSSも付いてくるので文字を入力するだけでそれなりにカッコイイメニューを作ることが可能です。

「Sidr」実装方法・使い方


公式ページに実装方法が書いてありますが、英語なので簡単ですが僕のブログでも実装の方法に付いて解説しておきます。

まずは公式ページからファイル一式をダウンロードしてきましょう。ほら早く!

ファイルを読み込み



<script src="javascripts/jquery.js"></script>
<script src="javascripts/sidr/jquery.sidr.min.js"></script>
<link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">




まずはダウンロードしてきたファイルを読み込みましょう。
上から順にjQueryのスクリプト、sidrのスクリプト、sidrのスタイルシートです。WordPressの場合は相対パスが効かないことがあるので絶対パスで指定しましょう。僕はこれらのコードをヘッダーのwp_headより上に記述しました。

シンプルなメニュー



<a id="simple-menu" href="#sidr">menu</a>
  
<div id="sidr">
  <ul>
    <li><a href="#">List 1</a></li>
    <li class="active"><a href="#">List 2</a></li>
    <li><a href="#">List 3</a></li>
  </ul>
</div>
  
<script>
$(document).ready(function() {
  $('#simple-menu').sidr();
});
</script>




続いてメニュー部分を実装します。<li>の中身がメニューの項目になります。<div id=”sidr”>以下がせり出してくる部分なのでこの中は自由に変更が可能です。このコードでは#simple-menuというidが付いている要素をタップするとメニューのオンオフができる仕様になっています。これをidではなくclassにすればボタンを複数設置することも可能です。また、このコードだとメニューは左側からせり出してきます。簡単なメニューであればこれで実装は終了。

左右からメニューを表示



<a id="left-menu" href="#left-menu">Left Menu</a> 
<a id="right-menu" href="#right-menu">Right Menu</a>

<div id="sidr-left">
  <!-- Your content -->
  <ul>
    <li><a href="#">List 1</a></li>
    <li class="active"><a href="#">List 2</a></li>
    <li><a href="#">List 3</a></li>
  </ul>
</div>
 
<div id="sidr-right">
  <!-- Your content -->
  <ul>
    <li><a href="#">List 1</a></li>
    <li class="active"><a href="#">List 2</a></li>
    <li><a href="#">List 3</a></li>
  </ul>
</div>
 
<script>
$(document).ready(function() {
    $('#left-menu').sidr({
      name: 'sidr-left',
      side: 'left' // By default
    });
    $('#right-menu').sidr({
      name: 'sidr-right',
      side: 'right'
    });
});
</script>





さらに「Sidr」は親切なことに左からだけでなく右からもせり出すメニューを実装できます。両方同時に実装も可能。このコードだと一番上の<a>の部分がスイッチ、それを下のスクリプトで処理して真ん中の紐付けられたメニューを表示、という流れになります。わからなくてもコピペでおk。

おわりに


最初は難しそうなイメージを持っていた「横から出てくるメニュー」ですが、プラグインを使えば30分足らずで実装できてしまいました。半分自己満足ですがやってみたい人は参考にしてみて下さい。動かない時は大抵ファイル読み込みができていなかったりするのでパスを確認するとすぐ解決するかも。では、一つやりたい事ができたので次の段階に進みたいと思います!

PITE.(@infoNumber333)

 - jQuery

teaparty
  • tomo

    Sidrの設定、こちらのサイトを参考に簡単に設置することができました!
    (CSSカスタマイズには少々てこずりましたが・・・)

    ひとつ質問があります。
    ページ上部にナビを配置し、そこにSidrを開くメニューボタンを配置しているのですが、そのナビを固定(ページを下にスクロールしても常にページ上部に配置)させたく、CSSに

    position: fixed;top: 0px;z-index: 1;

    を記述したところ・・・
    ナビ動作が不安定(左からSidrのナビがでてきた時に、通常のナビが正常に表示されない)になります。

    こちらはナビ固定には向いていないでしょうか?

    (開発者様じゃないのにこんな質問をして申し訳ないです)

    • Pite

      コメントありがとうございます。

      僕も同じようにヘッダーナビにSidrのボタンを設置しているのですが、Sidrを起動するとメニュー要素が横から出てきて、ヘッダーナビも画面ごと横にスライドしてしまいます。

      僕自身そこまでこのプラグインに詳しくないのであまり良いアドバイスをできず申し訳ないのですが、解決策としてSidrのメニュー領域の一番上に同じナビをもう一つ入れてしまうというのはいかがでしょうか?これであればどちらの画面でもナビが表示されると思います。

  • tomo

    ご回答ありがとうございます!
    ヘッダーナビですが、Sidr起動時には画面ごと横にスライドしても大丈夫です。

    ですが、先のコメントに記載したとおり、

    position: fixed;top: 0px;z-index: 1;

    こちらを記述すると、横にスライドしたときにナビがきれいに横にスライドされない&Sidrナビを収納するとナビだけ取り残される。。。
    というよくわからない現象がおきてしまっているのです。
    (いずれも、ナビのどこかをクリックすると、思い出したかの用に、元に位置に戻ります)

    PC上では表示に問題がなく、スマホだけに現れる現象のため、何か解決策があれば・・と思った次第です。

    ご回答いただいて本当にありがとうございます。

    • Pite

      なるほど…もしよろしければサイトのURLを教えて頂いても大丈夫ですか?

  • http://hetaretomo.web.fc2.com/ tomo

    PC上でみる分には問題ないのですが、スマホだけに現れている症状ではあります。

    いろいろとお手数をおかけし、すみません。

  関連記事

Number333 2012-06-17 15.58.18.jpg
【jQuery】WordPressにマウスオーバーで画像の色が変わる「トップに戻るボタン」を設置してみた!

最近ちょっとずつですがjQueryの勉強を始めました!PITEです。 まだまだ始 …

Number333 2012-07-08 16.43.41.jpg
【jQuery】Webページ上の要素をガクガクブルブルさせちゃうおもしろプラグイン「jrumble」を試行錯誤の上、ついに導入!

どーもPITEです。 今日の午前中、アスファルトの道路に不注意で愛機MacBoo …

写真_2013-06-29_12_45_11 2 (mini).png
【初心者向け】jQueryとCSS3でぬるっと動くスマホメニューを実装してみたので仕様を解説します。

家の中にいるよりも電車に乗っている時のほうが何故か集中できる…。PITE.(@i …

jquery.png
jQueryが思い通りに動かない時は読み込みの順番を遅らせてみよう。Twitterの優しさに号泣した話。

基本的に悩み事のない毎日を送っております。PITE.(@infoNumber33 …