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


jQuery:ページの読み込み後に画面下部からスライドインするメニューを設置したい。

jQueryを使って、ウィンドウ下部に固定(FIX)させたメニューを下からスライドインさせる方法です。

ウィンドウ下部にメニューを固定すること自体はよくあることですが、今回はそのメニューをページ読み込みの1秒後に下からスライドインさせます。
上部のメニューと違って少し目立ちにくいので、存在を強調するギミックの一つとして有効だと考えられます。
Windows/MacのChrome38、Firefox33、WindowsのIE7〜11、MacのSafari6.1で動作確認をしています。

HTML

CSS

#navはメニューの高さ分のネガティブな値を入れ、予めウィンドウより外側に配置しておきます。この例だとheightが50pxなので、「bottom: -50px;」となります。
また、常にウィンドウ下部に固定しておきたいので、positionは「fixed」にしておきます。

JavaScript

まずjQueryを読み込み、続いて、その下の8行のスクリプトを記述します。
6行目の「400」がスライドスピード、7行目の「1000」がメニューが表示されるまでの時間です。お好みで調整してください。

補足

position:fixed;を指定すると、ウィンドウサイズが小さく横スクロールバーが発生した場合でも当該要素はスクロールできないので注意が必要です。