以前に、ナビゲーションパネルがびよーんと表示されるスクリプトをスマホ向けに書いたのですが、 これまた不要になったので公開することにしました。
キャプチャ
下記図のような感じで、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ライセンスです。
コメント