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

• Tweet
• 

暖かくなりましたね〜。もう冬物はクリーニングにだしましたが、いつもより高くて消費税が上がったことを思い出しました。今日はスマホサイトで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

フリーランスエンジニアの稼ぎ方

フリーランスエンジニアの稼ぎ方。ぶっちゃけ…開発以外のことを頑張ったほうが結果がでます。

• Tweet
• 

PROFILE

プロフィール

入江 慎吾
自分が作ったサービスで生きていく。同じゴールを目指すサービス開発集団「入江開発室」を運営（現在約280名） / 個人間スキルシェアサービス「MENTA」は約1ヶ月で売上100万円を達成。1日で100社が利用した「JobTag」など多数開発
（詳しいプロフィール）

PRODUCT

イリテクで開発したプロダクト