Create UI tabs menu using only HTML and pure CSS tabs menu

Tabs and Accordion | December 19, 2021

In this article we will show you how to create tabs menu using only HTML and CSS.

Video tutorial of UI Tabs Menu Using Only HTML and Pure CSS

This tutorial video can help you to Create UI Tabs Menu Using Only HTML and Pure CSS.

Create UI Tabs Menu Using Only HTML and Pure CSS. [Source Codes]

This source code can help you to create UI Tabs Menu Using Only HTML and Pure CSS.

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="tm_container">
	<input type="radio" name="menu" id="menu1" checked>
	<input type="radio" name="menu" id="menu2">
	<input type="radio" name="menu" id="menu3">
	<input type="radio" name="menu" id="menu4">
	<div class="tm_trigger">
		<label for="menu1">Menu 1</label>
		<label for="menu2">Menu 2</label>
		<label for="menu3">Menu 3</label>
		<label for="menu4">Menu 4</label>
		<strong></strong>
	</div>
	<div class="tm_content_area">
		<div class="tm_content">
			<h2>First Tab Menu</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</p>
		</div>
		<div class="tm_content">
			<h2>Second Tab Menu</h2>
			<p> consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</p>
		</div>
		<div class="tm_content">
			<h2>Third Tab Menu</h2>
			<p>Lorem ipsum dolor sit  adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</p>
		</div>
		<div class="tm_content">
			<h2>Fourth Tab Menu</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididun ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</p>
		</div>
	</div>
</div>


</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background:#c45001;
	color: #000;
	display: flex;
	min-height: 100vh;
	align-items: center;
	justify-content: space-around;
}

.tm_container{
	width: 600px;
	box-shadow: 0 0 30px rgba(0,0,0,0.3);
}
.tm_trigger{
	position: relative;
	background:#dfdddd;
	border-radius: 8px 8px 0 0;
}
.tm_trigger label{
	display: block;
	float: left;
	padding: 12px 15px;
	position: relative;
	z-index: 2;
	cursor: pointer;
	color: #000;
	transition: all 0.3s ease-out;
	font-weight: 700;
	min-width: 100px;
	text-align: center;
	font-size: 18px;
}
.tm_trigger:after,
.tm_trigger:before{
	content: "";
	display: table;
}
.tm_trigger:after{
	clear: both;
}
.tm_trigger strong{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100px;
	background:#ff9952;
	z-index: 1; 
	border-radius: 8px 8px 0 0;
	transition: all 0.5s cubic-bezier(0.88, 1.81, 0.48,-0.01);
}
.tm_container input:nth-child(1):checked ~ .tm_trigger strong{left: 0;}
.tm_trigger label:nth-child(1):hover ~ strong{left: 0 !important; } 
.tm_container input:nth-child(2):checked ~ .tm_trigger strong{left: 100px; }
.tm_trigger label:nth-child(2):hover ~ strong{left: 100px !important; }
.tm_container input:nth-child(3):checked ~ .tm_trigger strong{left: 200px; }
.tm_trigger label:nth-child(3):hover ~ strong{left: 200px !important; }
.tm_container input:nth-child(4):checked ~ .tm_trigger strong{left: 300px; }
.tm_trigger label:nth-child(4):hover ~ strong{left: 300px !important; }

.tm_container input{
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	margin: 0;
	z-index: 1;
	opacity: 0;
	cursor: pointer;
}

.tm_content{
	padding: 20px;
	display: none;
	background:#ff9952;
	border-radius: 0 0 8px 8px;
	line-height: 1.5;
}
.tm_container h2{
	margin: 0 0 10px;
}
.tm_container p{ margin-top: 0 }

.tm_container input:nth-child(1):checked ~ .tm_content_area .tm_content:nth-child(1){
	display: block;
}
.tm_container input:nth-child(2):checked ~ .tm_content_area .tm_content:nth-child(2){
	display: block;
}
.tm_container input:nth-child(3):checked ~ .tm_content_area .tm_content:nth-child(3){
	display: block;
}
.tm_container input:nth-child(4):checked ~ .tm_content_area .tm_content:nth-child(4){
	display: block;
}

Create UI tabs menu using only HTML and pure CSS tabs menu

Video tutorial of UI Tabs Menu Using Only HTML and Pure CSS

Create UI Tabs Menu Using Only HTML and Pure CSS. [Source Codes]

Build a Stop-Watch Web App Using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery