facebook twitter hatena line email

Javascript/jqueryライブラリ/slidebars.js

提供: 初心者エンジニアの簡易メモ
移動: 案内、 検索

slidebarsとは

  1. jquery用
  2. スマホ左メニュードロワー
  3. スマホ右メニュードロワー

download

https://github.com/adchsm/Slidebars/archive/0.10.3.tar.gz
tar zxvf 0.10.3

サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="Slidebars-0.10.3/dist/slidebars.min.css">
<script src="Slidebars-0.10.3/dist/slidebars.min.js"></script>
<script>
 (function($) {
   $(document).ready(function() {
      $.slidebars();
   });
 }) (jQuery);
</script>
<style>
.sb-slidebar.sb-left {
 -webkit-overflow-scrolling: touch;
}
.sb-left-inner {
 width: 100%;
 height: 100%;
 overflow-y: auto;
}
</style>
</head>
<body>
<div id="sb-site">
<div class="menu sb-toggle-left"><a href="">MENU</a></div>
</div>
<div class="sb-slidebar sb-left">
  <nav>
    <ul class="sb-menu">
       <li><a href="">Google +</a></li>
    </ul>
  </nav>
</div>
</body>
</html>

参考

  1. http://glow-factory.com/blog_web/jquery/slidebars/
  2. http://blog.mismithportfolio.com/web/20160105slidebarsjs

bootstrap.jsとの連動

コンテンツがグローバルヘッダーとかぶるので以下を追加して修正する(padding-top:60pxを追加してる) 

#sb-site {
    margin-top: 0;
    padding-top: 60px;
    /* Set box model to prevent any user added margins or paddings from altering the widths or heights. */
    webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

iphoneでグローバルヘッダーが固定されない問題(androidでは正常に表示されてる)を解消したい場合は、以下を追加して修正する 

#sb-site  {
   webkit-transform: none;
      -moz-transform: none;
        -o-transform: none;
           transform: none;
}

androidでメニュー開閉ボタンとメニューリストの最上部ボタンがかぶるのでメニューリストの上部をグローバルヘッダーの高さの分だけ開ける 

.sb-menu{
padding-top:60px;
}
「http://wiki.nonip.net/index.php?title=Javascript/jqueryライブラリ/slidebars.js&oldid=3322」から取得