[パーツ]タブ 切り替えでアイテムが左右に動く

CSS HTML
 2018.02.20
 2018.03.22

切り替えでアイテムが左右に動く

切り替え時にアイテムが左右に動くタブ切り替えです。

browser:  65 11 20 11 
ニャン易度 

First Tab

First Tab text

Second Tab

Second Tab text

<div class="cp_tab">
	<div class="cp_tabpanels">
		<label for="tab5_1">First Tab</label>
		<input id="tab5_1" name="cp_tab" type="radio" checked="checked">
		<div class="cp_tabpanel">
			<h4>First Tab</h4>
			<p>First Tab text</p>
		</div>
	</div>
	<div class="cp_tabpanels">
		<label for="tab5_2">Second Tab</label>
		<input id="tab5_2" name="cp_tab" type="radio">
		<div class="cp_tabpanel">
			<h4>Second Tab</h4>
			<p>Second Tab text</p>
		</div>
	</div>
</div>
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_tab {
	display: block;
	display: -webkit-flex;
	display:         flex;
	-webkit-flex-wrap: wrap;
	        flex-wrap: wrap;
	margin: 1em auto;
	overflow: hidden;
}
.cp_tab input[type='radio'] {
	border-bottom: 1px solid rgba(239, 237, 239, 0.5);
	cursor: pointer;
	-webkit-appearance: none;
	        appearance: none;
	display: block;
	width: 100%;
	outline: none;
	-webkit-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
.cp_tab .cp_tabpanels label {
	cursor: pointer;
	display: block;
	line-height: 1em;
	padding: 2rem 0;
	text-align: center;
}
.cp_tab [type="radio"]:hover,
.cp_tab [type='radio']:focus {
	border-bottom: 1px solid #fd264f;
}
.cp_tab [type='radio']:checked {
	border-bottom: 2px solid #fd264f;
}
.cp_tab [type='radio']:checked + .cp_tabpanel {
	opacity: 1;
}
.cp_tab [type='radio'] + .cp_tabpanel {
	display: block;
	opacity: 0;
	padding: 2rem 0;
	width: 90%;
	-webkit-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
.cp_tab .cp_tabpanels {
	width: 50%;
}
.cp_tab .cp_tabpanels [type='radio'] + .cp_tabpanel {
	width: 200%;
	margin-left: 200%;
}
.cp_tab .cp_tabpanels [type='radio']:checked + .cp_tabpanel {
	margin-left: 0;
}
.cp_tab .cp_tabpanels:last-child [type='radio'] + .cp_tabpanel {
	margin-left: 100%;
}
.cp_tab .cp_tabpanels:last-child [type='radio']:checked + .cp_tabpanel {
	margin-left: -100%;
}

copypet.jp

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

More Info

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