jQuery:下からスライドインするメニュー

jQueryを使って、ウィンドウ下部に固定(FIX)させたメニューを下からスライドインさせる方法です。
ウィンドウ下部にメニューを固定すること自体はよくあることですが、今回はそのメニューをページ読み込みの1秒後に下からスライドインさせます。
上部のメニューと違って少し目立ちにくいので、存在を強調するギミックの一つとして有効だと考えられます。
Windows/MacのChrome38、Firefox33、WindowsのIE7〜11、MacのSafari6.1で動作確認をしています。
HTML
1 2 3 4 5 6 7 8 9 10 11 |
<div>コンテンツ内容</div> <div id="nav"> <div class="inner"> <ul> <li>Home</li> <li>Products</li> <li>Support</li> <li>Contact</li> </ul> </div> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
#nav { z-index: 9999; position: fixed; bottom: -50px; left: 0; width: 100%; height: 50px; background-color: #bfaa81; color: #fff; } .inner { width: 960px; margin: 0 auto; } #nav ul { float: left; } #nav li { display: inline; margin-right: 1em; line-height: 50px; } |
#navはメニューの高さ分のネガティブな値を入れ、予めウィンドウより外側に配置しておきます。この例だとheightが50pxなので、「bottom: -50px;」となります。
また、常にウィンドウ下部に固定しておきたいので、positionは「fixed」にしておきます。
JavaScript
1 2 3 4 5 6 7 8 9 |
<script src="/js/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#nav").css({bottom:'-50px'}); setTimeout(function(){ $("#nav").stop().animate({bottom:'0'},400); },1000); }); </script> |
まずjQueryを読み込み、続いて、その下の8行のスクリプトを記述します。
6行目の「400」がスライドスピード、7行目の「1000」がメニューが表示されるまでの時間です。お好みで調整してください。
補足
position:fixed;を指定すると、ウィンドウサイズが小さく横スクロールバーが発生した場合でも当該要素はスクロールできないので注意が必要です。