ページ(ブラウザ)の左側から、メニューを表示させてみます。
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-->