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

2014/12/02 更新

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

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

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

HTML

<div>コンテンツ内容</div>
<div id="nav">
<div class="inner">
	<ul>
		<li>Home</li>
		<li>Products</li>
		<li>Support</li>
		<li>Contact</li>
	</ul>
</div>
</div>

<div>コンテンツ内容</div>

<ul>

<li>Products</li>

<li>Support</li>

<li>Contact</li>

</ul>

</div>

CSS

#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 {

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

<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>

$(function(){

$("#nav").css({bottom:'-50px'});

setTimeout(function(){

$("#nav").stop().animate({bottom:'0'},400);

},1000);

});

</script>

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

Demo

補足

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

HTML

CSS

JavaScript

補足

おすすめ記事