Hallo teman teman untuk kali ini mau share nih tentang cara membuat tab dengan CSS 3 dan HTML 5 , biasa nya membuat tab itu lebih popular nya dengan jquery tetapi kita buat dengan CSS 3 dan HTML 5 , okeee cekidot :
Sintak HTML :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tab</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
           <main>
                       <h4><a href="http://www.dumetschool.com">Dumet School</a></h4>
                                 <input id="tab1" type="radio" name="tabs" checked>
                                 <label for="tab1">Home</label>
                                 <input id="tab2" type="radio" name="tabs">
                                 <label for="tab2">About</label>
                                 <input id="tab3" type="radio" name="tabs">
                                 <label for="tab3">Contact</label>
        <section id="content1">
          <h3>Yeahh bisa</h3>
          <p>silahkan mencoba</p>
        </section>
        <section id="content2">
          <h3>About</h3>
          <p>isi konten</p>
        </section>
        <section id="content3">
          <h3>Contact</h3>
          <p>ingin belajar lebih baik silahkan daftar ke dumet school</p>
        </section>
           </main>
</body>
</html>
Sintak CSS :
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
background: #E9E9E9;
font-family: "Open Sans", "Arial";
}
a{
text-decoration: none;
color: #000;
}
a:hover{
color: #000000;
}
input:checked + label {
border-top-color: #000000;
border-right-color: #DDD;
border-left-color: #DDD;
border-bottom-color: transparent;
text-decoration: none;
}
main {
background: #FFF;
width: 500px;
margin: 50px auto;
padding: 10px 30px 80px;
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
p {
font-size: 13px;
}
input, section {
clear: both;
padding-top: 10px;
display: none;
}
label {
font-weight: bold;
font-size: 14px;
display: block;
float: left;
padding: 10px 30px;
border-top: 2px solid transparent;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
border-bottom: 1px solid #DDDDDD;
}
label:hover {
cursor: pointer;
text-decoration: underline;
}
#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 {
display: block;
}
Dan ini hasilnya :
See the Pen pJEMwY by Dumet_School (@dumet_school) on CodePen.
Silahkan mencoba semoga bermanfaat 😀