[パーツ]ハンバーガーメニューアクション ホバーでmenuの文字が現れるハンバーガーメニュー

 

ホバーでmenuの文字が現れるハンバーガーメニュー

ホバーで真ん中のバーが消えmenuの文字が現れます。

browser:  65 11 20 
ニャン易度 
menu
<div class="cp_hmenuac10">
	<span class="cp_bar1st"></span>
	<span class="cp_bar2nd"></span>
	<span class="cp_bar3rd"></span>
	<span class="cp_text">menu</span>
</div>
.cp_hmenuac10 {
	position: absolute;
	width: 40px;
	height: 20px;
	padding: 1.5em;
	cursor: pointer;
}
.cp_hmenuac10 .cp_bar1st,
.cp_hmenuac10 .cp_bar2nd,
.cp_hmenuac10 .cp_bar3rd {
	position: absolute;
	width: 40px;
	height: 5px;
	-webkit-transition: all 0.5s ease-in-out;
	        transition: all 0.5s ease-in-out;
	border-radius: 5px;
	background: #00acc1;
}
.cp_hmenuac10 .cp_bar1st {
	top: 21px;
}
.cp_hmenuac10 .cp_bar2nd {
	top: 50%;
	-webkit-transition: opacity 0.3s ease-in-out;
	        transition: opacity 0.3s ease-in-out;
	transform: translateY(-50%);
}
.cp_hmenuac10 .cp_bar3rd {
	bottom: 21px;
}
.cp_hmenuac10 .cp_text {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transition: opacity 0.3s ease-in-out;
	        transition: opacity 0.3s ease-in-out;
	-webkit-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
	opacity: 0;
	color: #00acc1;
}
.cp_hmenuac10:hover .cp_bar1st {
	top: 8px;
}
.cp_hmenuac10:hover .cp_bar3rd {
	bottom: 8px;
}
.cp_hmenuac10:hover .cp_bar2nd {
	opacity: 0;
}
.cp_hmenuac10:hover .cp_text {
	opacity: 1;
}

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?