「Javascript/jqueryライブラリ/slidebars.js」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→サンプル) |
(→サンプル) |
||
| 行9: | 行9: | ||
==サンプル== | ==サンプル== | ||
| − | + | <!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($) { | (function($) { | ||
$(document).ready(function() { | $(document).ready(function() { | ||
| 行22: | 行22: | ||
}); | }); | ||
}) (jQuery); | }) (jQuery); | ||
| − | + | </script> | |
| − | + | <style> | |
.sb-slidebar.sb-left { | .sb-slidebar.sb-left { | ||
-webkit-overflow-scrolling: touch; | -webkit-overflow-scrolling: touch; | ||
| 行32: | 行32: | ||
overflow-y: auto; | 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://glow-factory.com/blog_web/jquery/slidebars/ | ||
#http://blog.mismithportfolio.com/web/20160105slidebarsjs | #http://blog.mismithportfolio.com/web/20160105slidebarsjs | ||
2016年5月13日 (金) 06:57時点における版
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>
