「Javascript/jqueryライブラリ/slidebars.js」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→bootstrap.jsとの連動) |
|||
| 行53: | 行53: | ||
==bootstrap.jsとの連動== | ==bootstrap.jsとの連動== | ||
| + | コンテンツがグローバルヘッダーとかぶるので以下を追加して修正する | ||
#sb-site { | #sb-site { | ||
margin-top: 0; | margin-top: 0; | ||
| 行61: | 行62: | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
| + | |||
| + | グローバルヘッダーが固定されない問題を解消するために以下slidebar.cssの中の以下部分を削除する | ||
| + | -webkit-transform: translate( 0px ); | ||
| + | -moz-transform: translate( 0px ); | ||
| + | -o-transform: translate( 0px ); | ||
| + | transform: translate( 0px ); | ||
| + | |||
| + | -webkit-transition: -webkit-transform 400ms ease; | ||
| + | -moz-transition: -moz-transform 400ms ease; | ||
| + | -o-transition: -o-transform 400ms ease; | ||
| + | transition: transform 400ms ease; | ||
2016年5月21日 (土) 18:14時点における版
slidebarsとは
- jquery用
- スマホ左メニュードロワー
- スマホ右メニュードロワー
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>
参考
- http://glow-factory.com/blog_web/jquery/slidebars/
- http://blog.mismithportfolio.com/web/20160105slidebarsjs
bootstrap.jsとの連動
コンテンツがグローバルヘッダーとかぶるので以下を追加して修正する
#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;
}
グローバルヘッダーが固定されない問題を解消するために以下slidebar.cssの中の以下部分を削除する
-webkit-transform: translate( 0px );
-moz-transform: translate( 0px );
-o-transform: translate( 0px );
transform: translate( 0px );
-webkit-transition: -webkit-transform 400ms ease;
-moz-transition: -moz-transform 400ms ease;
-o-transition: -o-transform 400ms ease;
transition: transform 400ms ease;
