スマホサイトで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

プロフィール

入江 慎吾／サービス開発だけで生きていく
自分のサービスだけで自由に生きる。勢いで受託開発をすべてやめて、サービスだけ作って生きていくことを決めたフリーのエンジニア。得意を教えて副業にできるMENTAを開発中！ （詳しいプロフィール）

WEBサービス・アプリ開発に役立つ情報をイリテクの入江がお届けします。プログラミング、UI/UXデザイン、SNS・ブログマーケティングなど、プロダクト開発だけで自由に生きていくための実践的な情報を配信しています。

無料メールマガジンを購読する

PRODUCT

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