NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

マウスオーバーでアニメーションしながら表示するメニュー

2015年1月15日CSSテクニック

マウスオーバーでアニメーションしながら表示するメニュー

特定の範囲にマウスを乗せた時にアニメーションしながら出てくるメニューをCSSだけでつくります。

デモページ

HTML

<div id="menuContainer">
	<div id="btn">
		<div class="icon">
			<span class="bar"></span>
			<span class="bar"></span>
			<span class="bar"></span>
		</div>
		<p class="text">menu</p>
	</div>
	<nav id="menu">
		<ul>
			<li><a href="javascript:void(0);">menu01</a></li>
			<li><a href="javascript:void(0);">menu02</a></li>
			<li><a href="javascript:void(0);">menu03</a></li>
			<li><a href="javascript:void(0);">menu04</a></li>
			<li><a href="javascript:void(0);">menu05</a></li>
		</ul>
	</nav>
</div>

CSS

#menuContainer {
	overflow: hidden;
	position: relative;
	height: 59px;
	background-color: #52d3ff;
	color: #ffffff;
	font-size: 16px;
	cursor: pointer;
}
#btn {
	position: absolute;
	left: 15px;
	top: 20px;
	width: 100%;
	height: 19px;
	transition: .25s ease-in-out;
}
#menuContainer:hover #btn {
	top: 79px;
}
#btn .icon {
	position: relative;
	width: 26px;
	margin-right: 10px;
	float: left;
}
#btn .bar {
	display: block;
	width: 100%;
	height: 3px;
	background-color: #ffffff;
	margin-bottom: 5px;
}
#menu {
	position: absolute;
	top: -39px;
	left: 15px;
	line-height: 19px;
	transition: .25s ease-in-out;
}
#menuContainer:hover #menu {
	top: 20px;
}
#menu li {
	float: left;
	margin-right: 20px;
}
#menu a {
	color: #ffffff;
	text-decoration: none;
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. マウスオーバーでアニメーションしながら表示するメニュー

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com