「jQuery」プラグインsp-slidemenu.jsでスマホのドロワーメニューを実装するサンプル

sp-slidemenu.jsのダウンロード
https://github.com/be-hase/sp-slidemenu
1.JavaScriptコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script src="js/sp-slidemenu-min.js" type="text/javascript"></script>
<script>
$(window).load(function(){
var menu = SpSlidemenu({
main: '#maininfo', //メインコンテンツ要素
button :'open_side', //ボタン指定
slidemenu:'.slidemenu-right',//開閉メニューパネル
direction:'right' //右指定
});
});
</script>
<script src="js/sp-slidemenu-min.js" type="text/javascript"></script> <script> $(window).load(function(){ var menu = SpSlidemenu({ main: '#maininfo', //メインコンテンツ要素 button :'open_side', //ボタン指定 slidemenu:'.slidemenu-right',//開閉メニューパネル direction:'right' //右指定 }); }); </script>
<script src="js/sp-slidemenu-min.js" type="text/javascript"></script>
<script>
$(window).load(function(){
    var menu = SpSlidemenu({
          main: '#maininfo', //メインコンテンツ要素
            button :'open_side', //ボタン指定
            slidemenu:'.slidemenu-right',//開閉メニューパネル
            direction:'right' //右指定
        });
});
</script>

2.CSSコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
div#maininfo {
width: 90%;
}
div#maininfo { width: 90%; }
div#maininfo {
      width: 90%;
}

 

jQuery

Posted by arkgame