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

暖かくなりましたね〜。もう冬物はクリーニングにだしましたが、いつもより高くて消費税が上がったことを思い出しました。今日はスマホサイトで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で自由に装飾するだけですね。オプションで右にスライドすることもできます。
[sc name=”engeneer”]
SHARE
無料メルマガ<特典付き>
個人開発・ビジネスについての有益な情報を無料メルマガでお届けします。
個人開発のスキルアップにMENTA
MENTAはいろんなプロに相談できるNo1メンターサービスです。
僕自身もプロダクトの壁打ち・相談にのっています。個人開発でもコードレビュー、セキュリティ面のチェック、デザイン、広告、コンテンツマーケ、SNS集客について相談する、など使えます。
YouTubeでも個人開発ノウハウを発信中!
PROFILE

入江 慎吾
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表/個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました/福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 (詳しいプロフィール)
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表/個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました/福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 (詳しいプロフィール)