jquery.sidr.jsを使って簡単にページの左側からメニューを表示する方法｜DAD UNION

jquery.sidr.jsを使って簡単に記述でページ（ブラウザ）の左側からメニューを表示させる方法をご紹介します。

Contents

ページの左側からメニューを表示するCSSの記述
jquery.sidr.jsを使って簡単にページ（ブラウザ）の左側からメニューを表示させるJavaScriptの記述
ページの左側からメニューを表示するHTMLの記述
jquery.sidr.min.js：ページ（ブラウザ）の左側からメニューを表示するデモページ
ソース元：Sidr – A jQuery plugin for creating side menus

ページの左側からメニューを表示するCSSの記述

※jquery.sidr.light.cssファイルを読み込みます。その他は必要に応じて変更して下さい。

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

jquery.sidr.jsを使って簡単にページ（ブラウザ）の左側からメニューを表示させるJavaScriptの記述

※jquery.min.js、jquery.sidr.min.jsファイルを読み込みます。$(メニューを表示するリンクタグ).sidr()と記述することで「メニューを表示するリンクタグ」をクリックするとリンクタグのhrefに設定したid（#sidr）のタグ要素を左側からメニューの様に表示します。

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

ページの左側からメニューを表示するHTMLの記述

※メニューを表示するリンクタグ（id=”simple-menu”）のhrefに#sidrを設定します。左側からのメニュー表示エリア（id=”sidr”）を用意することで、リンクタグをクリックするとメニュー表示エリアが表示されます。

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