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

  • このエントリーをはてなブックマークに追加

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

SPONSOR

スライドメニューとは

スライドメニューはこんな動きをするものです。
メニュー
スマホサイトだと、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

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

  • このエントリーをはてなブックマークに追加
SPONSOR

PROFILE

プロフィール

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

PRODUCT

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

RELATION

関連する記事

SPONSOR

TAG

タグから記事をさがす