facebook twitter hatena line email

「Javascript/jqueryライブラリ/slidebars.js」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内、 検索
(→‎bootstrap.jsとの連動)
(→‎bootstrap.jsとの連動)
 
(同じ利用者による、間の6版が非表示)
行53: 行53:
  
 
==bootstrap.jsとの連動==
 
==bootstrap.jsとの連動==
−
コンテンツがグローバルヘッダーとかぶるので以下を追加して修正する
+
コンテンツがグローバルヘッダーとかぶるので以下を追加して修正する(padding-top:60pxを追加してる)
 
  #sb-site {
 
  #sb-site {
 
     margin-top: 0;
 
     margin-top: 0;
行63: 行63:
 
  }
 
  }
  
−
グローバルヘッダーが固定されない問題を解消したい場合は、以下slidebar.cssの中の以下部分を削除する
+
iphoneでグローバルヘッダーが固定されない問題(androidでは正常に表示されてる)を解消したい場合は、以下を追加して修正する
−
     -webkit-transform: translate( 0px );
+
#sb-site  {
−
       -moz-transform: translate( 0px );
+
     webkit-transform: none;
−
         -o-transform: translate( 0px );
+
       -moz-transform: none;
−
             transform: translate( 0px );
+
         -o-transform: none;
−
   
+
             transform: none;
−
    -webkit-transition: -webkit-transform 400ms ease;
+
}
−
      -moz-transition:    -moz-transform 400ms ease;
+
androidでメニュー開閉ボタンとメニューリストの最上部ボタンがかぶるのでメニューリストの上部をグローバルヘッダーの高さの分だけ開ける
−
        -o-transition:     -o-transform 400ms ease;
+
.sb-menu{
−
            transition:        transform 400ms ease;
+
padding-top:60px;
 +
}

2016年11月28日 (月) 18:21時点における最新版

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」から取得