[パーツ]メニュー 左からニュッと出るメニュー

CSS HTML
 2018.01.31
 2018.03.22

左からニュッと出るメニュー

左からニュッと出るメニューです。

browser:  65 11 20 
ニャン易度 
<div class="cp_navi">
<div id="cp_sidenav" class="sidenav">
	<a href="#" id="home">Home</a>
	<a href="#" id="news">News</a>
	<a href="#" id="contact">Contact</a>
	<a href="#" id="about">About</a>
</div>
</div>
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_navi {
	position: relative;
	overflow: hidden;
	width: 360px;
	height:360px;
}
.cp_navi #cp_sidenav a {
	font-size: 20px;
	position: absolute;
	left: -95px;
	width: 110px;
	height: 54px;
	padding: 12px 15px;
	transition: 0.3s;
	text-decoration: none;
	color: #ffffff;
	border-radius: 0 5px 5px 0;
}
.cp_navi #cp_sidenav a:hover {
	left: -10px;
}
.cp_navi #home {
	top: 20px;
	background-color: #da3c41;
}
.cp_navi #news {
	top: 80px;
	background-color: #1b2538;
}
.cp_navi #contact {
	top: 140px;
	background-color: #2e9b72;
}
.cp_navi #about {
	top: 200px;
	background-color: #a62e7a;
}

copypet.jp

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

More Info

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