スマホサイトでFacebook風スライドメニューを使う

04/03/2014

暖かくなりましたね〜。もう冬物はクリーニングにだしましたが、いつもより高くて消費税が上がったことを思い出しました。今日はスマホサイトでFacebook風のメニューをカンタンに組み込めるJQueyのご紹介です。びっくりするくらい、楽チンです。

スライドメニューとは

スライドメニューはこんな動きをするものです。

スマホサイトだと、PCサイトのようにメニューを出しておくと、ごちゃつく＋スペースをとるので、メニューボタンで表示させる方がスマートです。

Sidrの使い方

Sidrをダウンロード。解凍すると、いろいろファイルはありますが、使うのはjquery.sidr.min.jsだけでOKです。

使い方は以下のとおり。

<script type="text/javascript" src="resource/script/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="resource/script/jquery.sidr.min.js"></script>

<style>
.sidr{
display:none;
position:absolute;
position:fixed;
top:0;
height:100%;
z-index:999999;
width:200px;
overflow-x:none;
overflow-y:auto;
}
</style>

<script>
$(document).ready(function() {
  $('#simple-menu').sidr();
});
</script>

<a id="simple-menu" href="#sidr">MENU</a>

<div id="sidr">
  <!-- Your content -->
  <ul>
    <li><a href="#">List 1</a></li>
    <li class="active"><a href="#">List 2</a></li>
    <li><a href="#">List 3</a></li>
  </ul>
</div>

CSSで最初からスライドメニューがでないように記述しています。そして、#simple-menu要素をクリックすると、#sidrがスライドであらわれます。あとはCSSで自由に装飾するだけですね。オプションで右にスライドすることもできます。

Sidr

[sc name=”engeneer”]