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



iPad用のサイト?jQueryMobile的にページ(ブラウザ)の左側から、
メニューを表示させてみます。

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

<link rel="stylesheet" href="jquery.sidr.light.css">
<script src="http://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 id="sidr">
      
        <ul class="xoxo categories">
            <li><a href="/category/css" title="CSS に含まれる投稿をすべて表示" target="_blank">CSSに関するお知らせ</a></li>
            <li><a href="/category/facebook" title="Facebook に含まれる投稿をすべて表示" target="_blank">Facebookに関するお知らせ</a></li>
            <li><a href="/category/html5" title="HTML5 に含まれる投稿をすべて表示" target="_blank">HTML5に関するお知らせ</a></li>
            <li class="active"><a href="/category/javascript" title="JavaScript に含まれる投稿をすべて表示" target="_blank">JavaScriptに関するお知らせ</a></li>
            <li><a href="/category/php" title="PHP に含まれる投稿をすべて表示" target="_blank">PHPに関するお知らせ</a></li>
            <li><a href="/category/seo" title="SEO に含まれる投稿をすべて表示" target="_blank">SEOに関するお知らせ</a></li>
            <li><a href="/category/wordpress" title="WordPress に含まれる投稿をすべて表示" target="_blank">WordPressに関するお知らせ</a></li>
            <li><a href="/category/sonohoka" title="その他 に含まれる投稿をすべて表示" target="_blank">その他に関するお知らせ</a></li>
            <li><a href="/category/smartphone" title="スマートフォン に含まれる投稿をすべて表示" target="_blank">スマートフォンに関するお知らせ</a></li>
        </ul>
      
    </div><!--/sidr-->

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

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

iPhoneやiPadだったり、多分今風な感じが何と無く
良さそうに思えるんでしょうね。