jquery.sidr：ページ（ブラウザ）の左側からメニューを表示するJs

ページ（ブラウザ）の左側から、メニューを表示させてみます。

1．読込むCSS・JsファイルとJavaScriptの記述例

 	<link rel="stylesheet" href="jquery.sidr.light.css">
<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>

2．HTMLの記述例

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

jquery.sidr.min.js：ページ（ブラウザ）の左側からメニューを表示するデモ

ソース元：Sidr – A jQuery plugin for creating side menus