Web制作

スマホサイトで簡単にメニューを作れるjQueryプラグイン”Sidr”の使い方!

  • このエントリーをはてなブックマークに追加

スマホサイトではよく見かける「よこからにゅるっと出てくるメニュー」ですが、「Sidr」というjQueryプラグインで簡単に実装できたので、その方法を簡単に解説。

ダイナミックサービングはもちろんレスポンシブWebデザインでも実装可能です。

少し動きが気に入りませんが・・・(笑)

「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">

「Sidr」はjQueryプラグインなので、必ずそれよりも前にjQueryを読み込んであげてください。
CSSファイルは2つあるので、どちらか読み込む形でOKです。

記述場所はheadタグ内が無難でしょう。

1.シンプルメニュー

<a id="simple-menu" href="#sidr">Toggle menu</a>
 
<div id="sidr">
  <!-- 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() {
  $('#simple-menu').sidr();
});
</script>

最もシンプルな形です。
simple-menuというidがついた要素をタップするとsidrというidのついたメニューが開閉する仕組みです。

他の要素をタップすればメニューが閉じるなどの機能はなく、メニューは左側から出てきます。

2.左メニュー、右メニュー

<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>

シンプルメニューの場合左側だけでしたが、右側からも出すことができます。

left-menuというidが付いた要素をタップするとsidr-leftというidが付いた要素が、逆も然りです。
例えば右側からのメニューだけを実装したい場合は下記のようなコードになります。

<a id="right-menu" href="#right-menu">Right Menu</a>
  
<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() {
    $('#right-menu').sidr({
      name: 'sidr-right',
      side: 'right'
    });
});
</script>

要するに、rightの項目だけ残せば良いだけです。

3.レスポンシブ対応メニュー

<style>
#mobile-header {
    display: none;
}
@media only screen and (max-width: 767px){
    #mobile-header {
        display: block;
    }
}
</style>
 
<div id="mobile-header">
    <a id="responsive-menu-button" href="#sidr-main">Menu</a>
</div>
 
<div id="navigation">
    <nav class="nav">
        <ul>
            <li><a href="#download">Download</a></li>
            <li><a href="#getstarted">Get started</a></li>
            <li><a href="#usage">Demos &amp; Usage</a></li>
            <li><a href="#documentation">Documentation</a></li>
            <li><a href="#themes">Themes</a></li>
            <li><a href="#support">Support</a></li>
        </ul>
    </nav>
</div>
 
<script>
    $('#responsive-menu-button').sidr({
      name: 'sidr-main',
      source: '#navigation'
    });
</script>

仕組みとしては、メディアクエリーを使って画面幅がある基準よりも小さくなればメニューボタンを表示させているだけでね!
今回でいうと、767pxが基準値になっています。

まとめ

公式サイトを見ると他にもメニューが載っていますが、使う可能性があるのは今回紹介したものぐらいだと思います。

難しそうなメニューの実装もプラグインを使用することで比較的簡単に実装することができることが分かりました。

とはいっても、サイトの設計によってはコード修正が大掛かりになる場合もあるので、最初の設計段階でこういった部分は考えておく必要があるでしょう。
コードの大幅修正とかなるべくない方が良いですからね・・・^^;

  • このエントリーをはてなブックマークに追加

  関連記事

コメントを残す

*

CAPTCHA