ナビゲーションがびよーんと表示されるスクリプト【スマホ向け】

以前に、ナビゲーションパネルがびよーんと表示されるスクリプトをスマホ向けに書いたのですが、これまた不要になったので公開することにしました。

キャプチャ

下記図のような感じで、menuボタンを押すとナビゲーションが表示されます。

デモ

デモページを一応用意してみました。デスクトップブラウザでも大丈夫ですが、スマホでみるか、iPhoneシミュレーターでアクセスしてみてください。

デモページ

使い方

jQueryと jQuery Easing Pluginを使います。そして以下のように指定してください。

CSSとJSの指定

<link rel="stylesheet" href="css/style.css">
<script src="js/jquery"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/beyondNav"></script>

HTML

HTMLは以下のような感じです。
デモページでは、#global-navにposition: absolute;、body要素にrelativeを指定していますので、もしお使いの場合は、positionの関係にお気をつけ下さい。

<nav id="global-nav">
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
<li><a href="#">メニュー6</a></li>
</ul>
</nav>

カスタマイズ

CSS

menuボタンとナビゲーションのスタイルを変更する場合は、style.cssの「#menu」「#global-nav」をにあるスタイルを変更してください。

Easing

Easingを変更したい時は、41行目のeaseInOutBackを変更してください。また jQuery Easingのドキュメントをご参考ください。

Duration

durationの変更は、42行目にある数値を変更してください。

ライセンス

一応、MTIライセンスです。

ダウンロード

ここからどうぞ

E-riverstyle Vanguard