php 170831 cssのみでタブ切り替え

Posted 2021-05-05

label.panel-label {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	display: block;
	width: 100%;
	color: #bdc3c7;
	cursor: pointer;
	background-color: #ecf0f1;
	-webkit-transition-property: background-color, color;
	transition-property: background-color, color;
	-webkit-transition-duration: 200ms;
	transition-duration: 200ms;
	&:hover {
		color: #003399;
	}
}

#panels {
	background-color: white;
	.container {
		margin: 0 auto;
		width: 90%;
	}
	section {
		header label.panel-label {
			padding: 12px 24px;
			box-sizing: border-box;
		}
		main {
			box-sizing: border-box;
			max-height: 0;
			opacity: 0;
			-webkit-transition: opacity 600ms;
			transition: opacity 600ms;
			overflow-y: hidden;
		}
	}
}

#panel-1-ctrl:checked ~ #panels #panel-1 main, #panel-2-ctrl:checked ~ #panels #panel-2 main, #panel-3-ctrl:checked ~ #panels #panel-3 main {
	max-height: initial;
	opacity: 1;
	padding: 48px 24px;
}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1, #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2, #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {
	pointer-events: none;
	cursor: default;
	-webkit-transform: translate3d(0, 1px, 0);
	transform: translate3d(0, 1px, 0);
	box-shadow: none;
	border-right: none;
	&.last {
		border-right: 1px solid transparent;
	}
	+ li {
		border-left: 1px solid #dfdfdf;
	}
	label.panel-label {
		background-color: white;
		color: #003399;
		padding-top: 24px;
		&::after {
			height: 6px;
		}
	}
}

ul#tabs-list {
	display: flex;
	justify-content: center;
	list-style: none;
	text-align: center;
	border-bottom: 1px solid #dfdfdf;
	margin: 0;
	padding: 0;
	text-align: center;
	border-bottom: 1px solid #dfdfdf;
	li {
	display: flex;
	text-align: center;
	font-size: 0.875em;
	width: 18%;
	box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);
	border-right: 1px solid #dfdfdf;
	position: relative;
	&:hover {
		-webkit-transition: none;
		transition: none;
		border-right: none;
		&.last {
			border-right: 1px solid transparent;
		}
		+ li {
			border-left: 1px solid #dfdfdf;
		}
	}
	label.panel-label {
		position: relative;
		padding: 24px 0;
		font-size: 0.875em;
		&::after {
			content: "";
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 100%;
			background-color: #003399;
			height: 0;
			-webkit-transition-property: height;
			transition-property: height;
			-webkit-transition-duration: 200ms;
			transition-duration: 200ms;
		}
		&:hover {
			padding-top: 24px;
			&::after {
				height: 6px;
			}
		}
	}
	}
}

main {
	width: 70%;
	margin: 0 auto;
}

.panel-radios {
	display: none;
}

body {
	background: #00bfff;
	color: #444444;
	font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
}

main p {
	line-height: 1.8;
}

https://codepen.io/takanorip/pen/Vjyjrx
http://qiita.com/takanorip/items/078682784ddab03d1c4e

<!-- TAB CONTROLLERS -->
<input id="panel-1-ctrl" class="panel-radios" type="radio" name="tab-radios" checked>
<input id="panel-2-ctrl" class="panel-radios" type="radio" name="tab-radios">
<input id="panel-3-ctrl" class="panel-radios" type="radio" name="tab-radios">

<!-- TABS LIST -->
<ul id="tabs-list">
	<!-- MENU TOGGLE -->
	<li id="li-for-panel-1">
		<label class="panel-label" for="panel-1-ctrl">Tab1</label>
	</li><!--INLINE-BLOCK FIX-->
	<li id="li-for-panel-2">
		<label class="panel-label" for="panel-2-ctrl">Tab2</label>
	</li><!--INLINE-BLOCK FIX-->
	<li id="li-for-panel-3">
		<label class="panel-label" for="panel-3-ctrl">Tab3</label>
	</li><!--INLINE-BLOCK FIX-->
</ul>

<!-- THE PANELS -->
<article id="panels">
	<div class="container">
		<section id="panel-1">
			<main>
			<p>Content1</p>
			</main>
		</section>
		<section id="panel-2">
			<main>
			<p>Content2</p>
			</main>
		</section>
		<section id="panel-3">
			<main>
			<p>Content3</p>
			</main>
		</section>
	</div>
</article>