bootstrap3でスマホメニューsidr.jsを使う

2016年1月30日更新 view: 118 view
http://i2.wp.com/morobrand.net/mororeco/wp/wp-content/uploads/2014/09/sidr-tit.jpg?w=600

sidr.jsって何よ?

「左側からスルッっと現れるメニューリスト」を簡単に実現することができるjQueryプラグインです。

下準備

ファイルを
https://www.berriart.com/sidr/
からダウンロード

cssとjavascriptをそれぞれ設置

スポンサードリンク
<link rel="stylesheet" href="/css/jquery.sidr.light.min.css">
<script src="/js/jquery.sidr.min.js"></script>

であとは、以下のコードをコピーすりゃ動く

<style>
#overlay {
display: none;
width: 100%;
height: 100%;
text-align: center;
position: fixed;
top: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.7);
}
</style>

<script type="text/javascript">
$(document).ready(function() {
$('#left-menu').sidr(
{
//メニューを開く
onOpen: function() {
$('body').css({ 'position': 'fixed' });//メニューをうまくスクロールできるように
$('header > div').css({ 'z-index': 10 });//重なりの順番を変更し、メニュー表示にぐいっと右側に行くように
$("#overlay").fadeIn();//メインをクリックできないようにする

}, //解除
onClose: function() {
$('body').css({ 'position': 'static' });
$('header > div').css({ 'z-index': 1030 });
$("#overlay").fadeOut();
}
}
);

// 黒い部分をクリックするとメニューを閉じる
$("#overlay").on("click", function() {
$.sidr('close', 'sidr');
});
});

</script>


<!-- 画面を黒くするためのダミー -->
<div id="overlay">

</div>

<!-- メニュー -->
<div id="sidr">
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
</ul>
</div>


<header>
<div class="navbar navbar-default navbar-fixed-top">

<div class="container-fluid mp0">
<div class="col-xs-1 mp0">
<a id="left-menu" href="#left-sidr">MENU</a>
</div>
<div class="col-xs-10 mp0">
タイトル
</div>
<div class="col-xs-1 mp0">
ボタン
</div>
</div>


</div>
</header>

サンプルは
http://morobrand.net/mororeco/demo/jquery/sidr/index2.html
にありますので見て下さい。

横いっぱいに広げるメニュー

スマホ表示のバグにも対応したコード
スムーズにスクロール
サファリの下メニューを表示しない
がたつきを抑える

html

<div id="topcont">


<div class="container-fluid t-c" id="maincont">

</div>

<div id="loaderCircle" class="t-c">
<i class="fa fa-refresh fa-spin"></i>
</div>
</div>


<!-- 高さを変更して、スマホ用のブラウザで下のサファリメニューを表示しないように -->
<div id="dummycont">
</div>

js

 $('#right-menu').sidr(
{
name: 'right-sidr',
side: 'right',
speed: 20,
//メニューを開く
onOpen: function() {

//スクロール位置を取得
current_scrollY = $( window ).scrollTop();


//横幅一杯までメニューを広げる
$('#right-sidr').addClass("width100");


//ios のガタガタを防ぐために時間差
setTimeout(function(){
$("#right-sidr").addClass('touchscroll');
},500);

//メニューをスムーズにスクロールできるように、bodyではなく、 #topcontを指定
$('#topcont').css({ 'position': 'fixed' });

//高さが変わり、サファリの下メニューが出るのを防ぐため
$('#dummycont').css({ 'height': '5000px' });

}, //解除
onClose: function() {

$("#right-sidr").removeClass('touchscroll');
$('#right-sidr').removeClass("width100");

$('#topcont').css({ 'position': 'static' });
$('#dummycont').css({ 'height': '0px' });
$( 'html, body').prop( { scrollTop: current_scrollY } );

}
}
);
<div id="right-sidr">
<div class="modal-header sb-close" style="border-bottom: 1px solid #efefef;min-height: 50px;">
<div class="col-xs-1 mp0">
<span style="font-size: 1.5em;color:#a9a9ad;"><i class="fa fa-chevron-left"></i></span>
</div>
<div class="col-xs-11 mp0">
<h4 class="modal-title" style="text-align: center !important;"><span style="font-size: 0.8em;">検索</span></h4>
</div>

</div>

<div>
Modals
A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.<br><br><br><br>

Dropdowns
Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.<br><br><br><br>

Scrollspy
Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.
<br><br><br>
Togglable tabs
Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.
<br><br><br>
Tooltips
A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.
<br><br><br>
Popovers *
Add small overlays of content, like those on the iPad, to any element for housing secondary information.
<br><br>
* Requires Tooltips to be included
<br><br><br><br><br><br><br><br><br><br>
Alert messages
The alert plugin is a tiny class for adding close functionality to alerts.

Buttons
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
<br><br><br>
Collapse
Get base styles and flexible support for collapsible components like accordions and navigation.

Carousel
Create a merry-go-round of any content you wish to provide an interactive slideshow of content.
<br>
これで最後
</div>

</div>

css

.touchscroll {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}

.width100 {
width: 100%;
}
スポンサードリンク

関連記事

関連カテゴリ