Webサイトやアプリケーションを開発する際に、ユーザーが快適に操作できるメニューを設置することは非常に重要です。特に、スマートフォンやタブレットといったモバイル端末が普及している現代では、画面の左側や右側からスライドして表示される「サイドメニュー」は、限られた画面スペースを有効活用するための有力な手法です。
この記事では、jQueryのプラグイン「jquery.sidr.js」を使用して、簡単に左側からスライドするメニューを実装する方法を解説します。
理解しやすいように、具体的なコード例を交えながらステップバイステップで説明していきます。
jquery.sidr.jsとは
「jquery.sidr.js」は、jQueryプラグインの一つで、Webページの左右どちらかにサイドメニューをスライド表示するための機能を簡単に追加できるツールです。通常、サイドメニューを実装するにはHTMLやCSSの理解が必要ですが、このプラグインを使用することで、最低限のJavaScriptの知識だけで機能的なメニューを作成することができます。
また、このプラグインは軽量でありながら、カスタマイズ性にも優れているため、さまざまなデザインに対応することができます。例えば、サイドメニューの表示位置を変更したり、アニメーションの種類を調整したりすることが可能です。
jquery.sidr.jsを使用するメリット
jQueryのプラグインを活用することで、手動で多くのコードを書くことなく、効率的に機能を追加できます。jquery.sidr.jsの主なメリットは以下の通りです。
- 簡単な実装:HTMLと少しのJavaScriptコードを追加するだけで、すぐにサイドメニューを動かすことができます。
- 軽量で高速:プラグイン自体が軽量で、Webページの読み込みに大きな影響を与えません。
- 高いカスタマイズ性:CSSを使って見た目を自由にカスタマイズできるため、デザインに統一感を持たせられます。
ページの左側からメニューを表示するCSSの記述
最初に、ページの左側からメニューを表示するための基本的なCSSの設定を行います。このCSSコードは、メニューのスタイルや表示位置を制御するために必要です。以下のコードをWebページに追加してみましょう。
<style type="text/css" media="all">
<!--
body{
margin:0;
padding:0;
}
h1{
text-align:center;
font-size:18px;
font-weight:bold;
padding:15px 0 10px 0;
line-height:1.4em;
text-align:center;
}
-->
</style>
<link rel="stylesheet" href="jquery.sidr.light.css">
このCSSコードでは、まずbodyタグの余白やパディングをリセットし、ページ全体の見た目が統一されるようにします。また、h1タグのスタイルも定義しており、ページの見出しが中央に配置され、適切な余白が確保されるように設定されています。その後、jquery.sidr.light.cssファイルを読み込んでます。
jquery.sidr.jsを使って簡単にページの左側からメニューを表示させるJavaScriptの記述
次に、実際にサイドメニューを表示させるためのJavaScriptコードを記述します。以下のコードをHTMLファイルに追加することで、クリックイベントに応じてメニューがスライド表示されます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.sidr.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#simple-menu').sidr();
});
</script>
このJavaScriptコードでは、まずjQueryのライブラリ（jquery.min.js）とjquery.sidr.min.jsファイルを読み込みます。その後、$(document).ready()関数内で、#simple-menuというIDを持つ要素がクリックされたときに、サイドメニューが表示されるように設定します。これにより、初心者でも簡単にメニューを表示することが可能です。
$(メニューを表示するリンクタグ).sidr()と記述することで「メニューを表示するリンクタグ」をクリックするとリンクタグのhrefに設定したid（#sidr）のタグ要素を左側からメニューの様に表示します。
ページの左側からメニューを表示するHTMLの記述
最後に、メニューを表示するためのHTMLコードを追加します。ここでは、リンクタグとメニュー表示エリアを定義します。
<h1>ページ（ブラウザ）の左側からメニューを表示</h1>
<div align="center"><a id="simple-menu" href="#sidr">←メニューを表示</a></div>
<div id="sidr">
<ul class="xoxo categories">
<li class="cat-item cat-item-36"><a href="https://dad-union.com/category/css">css</a></li>
<li class="cat-item cat-item-2"><a href="https://dad-union.com/category/javascript">JavaScript</a></li>
<li class="cat-item cat-item-3"><a href="https://dad-union.com/category/jquery">jQuery</a></li>
<li class="cat-item cat-item-53"><a href="https://dad-union.com/category/php">PHP</a></li>
</ul>
</div><!--/sidr-->
ここで使用している a タグは、メニューを表示するためのトリガーとして機能します。href属性に#sidrを指定することで、クリック時にIDがsidrである要素が表示される仕組みになっています。この部分のコードを理解することで、初心者でも簡単にサイドメニューを実装できるようになります。
メニューを表示するリンクタグ（id=”simple-menu”）のhrefに#sidrを設定します。左側からのメニュー表示エリア（id=”sidr”）を用意することで、リンクタグをクリックするとメニュー表示エリアが表示されます。
jquery.sidr.min.js：ページ（ブラウザ）の左側からメニューを表示するデモページ
実際に動作するサンプルを確認したい方は、以下のリンクからデモページをご覧いただけます。クリックすると、左側からメニューがスライド表示される様子を確認できます。
jquery.sidr.min.js：ページ（ブラウザ）の左側からメニューを表示するデモ
このデモページを見ていただくことで、実際の動作イメージがつかみやすくなるでしょう。
ソース元：Sidr – A jQuery plugin for creating side menus
今回紹介したプラグイン「jquery.sidr.js」は、以下の公式サイトからダウンロードできます。より詳細な情報やカスタマイズの方法についても公式サイトで確認することができます。
Sidr – A jQuery plugin for creating side menus
まとめ
以上のように、jquery.sidr.jsを使うことで、初心者でも簡単に左側からスライドして表示されるメニューを実装することができます。このプラグインは、軽量でありながら高いカスタマイズ性を持ち、さまざまなデザインに対応可能です。Webサイトのユーザーエクスペリエンスを向上させるためにも、ぜひ一度試してみてください。
さらに、今回の解説を元に、自分自身でサイドメニューを作成してみることで、Web開発の楽しさと実用性を感じることができるでしょう。もし、この記事が皆さんのWebサイト作りのお役に立てば幸いです。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
