Cara Membuat Tab Menu dengan HTML 5 dan CSS 3 – Kali ini
saya akan memberikan tutorial seperti judul diatas. Tab menu merupakan menu yang disertai
sederetan kalimat atau kumpulan kata. Di tutorial kali ini saya akan membuat
menu tab dengan html 5 dan css 3.
Menggunakan HTML 5 dan CSS 3 kita dapat membuat Menu Tab yang kita inginkan, di tutorial ini saya memberikan menu tab yang sederhana
yang mungkin dapat anda pelajari. Untuk mengetahui lebih dalam mengenai tab
menu ini, sebaiknya anda mengikuti tutorial ini dengan seksama. Berikut
langkahnya :
1.
Buatlah
file html baru pada text editor anda, dan beri nama
index.html. Setelah itu,
copas script yang saya berikan dibawah ini :
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet"
type="text/css" href="style.css" />
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled
Document</title>
</head>
<body>
<main>
<input id="tab1" type="radio" name="tabs"
checked />
<label
for="tab1">Terbaru</label>
<input id="tab2" type="radio" name="tabs"
/>
<label
for="tab2">Terpopuler</label>
<input id="tab3" type="radio" name="tabs"
/>
<label
for="tab3">Contact</label>
<section id="content1">
<h3>Tutorial terbaru</h3>
<p>Selamat datang di tutorial terbaru ini. Halaman ini berisikan tentang
tutorial-tutorial yang terbaru, yang telah kami sediakan untuk anda</p>
</section>
<section id="content2">
<h3>Tutorial Terpopuler</h3>
<p>Halaman ini berisikan mengenai tutorial-tutorial yang banyak di minati
pengunjung blog saya. Tutorial disini banyak di cari oleh para
programmer-programmer</p>
</section>
<section id="content3">
<h3>Kontak Kami</h3>
<p>Bagi para pengunjung yang merasa kesulitan dengan tutorial yang telah
kami berikan, silahkan hubungi kami di kontak blog kami</p>
</section>
</main>
<div id="footer"
style="font-weight:bold;">Design By: Ramses Syahputra</div>
</body>
</html>
2.
Setelah
script yang pertama anda copas, buatlah file baru untuk menampung script
cssnya.
Dan beri nama
style.css Copas script yang saya berikan dibawah ini :
@charset "utf-8";
/* CSS Document */
@import
url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
background:#09F;
font-family: "open sans","arial";
}
a {
text-decoration:none;
color:#000;
}
a:hover {
color:#fff;
}
main {
background:#fff;
width:400px;
margin:50px auto;
padding:10px 30px 80px;
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
border-radius:10px;
}
p {
font-size:13px;
}
/*important code*/
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 #DDD;
}
label:hover {
cursor:pointer;
text-decoration:underline;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2, #tab3:checked ~ #content3 {
display:block;
}
input:checked + label {
border-top-color:#000;
border-right-color:#ddd;
border-left-color:#ddd;
border-bottom-color: transparent;
text-decoration:none;
}
section {
border:1px solid #ddd;
border-top:none;
padding:10px;
width:351px;
border-radius:0 0 10px 10px;
}
#footer {
clear:both;
width:500px;
height:20px;
border-radius:10px;
padding:10px;
margin:0 auto;
background:#fff;
cursor:pointer;
}
Coba anda perhatikan script yang
satu ini <input id="tab1" type="radio"
name="tabs" checked />
<label
for="tab1">Terbaru</label> script tersebut akan menjadi
menunya. Dan script ini yang akan menampung kalimat dan kata-katanya, <section
id="content1"><h3>Tutorial terbaru</h3> <p>Selamat datang di tutorial terbaru
ini. Halaman ini berisikan tentang tutorial-tutorial yang terbaru, yang telah
kami sediakan untuk anda</p></section>. Di bagian <p>isi
kalimat anda disini</p> dapat anda ubah dengan kalimat yang anda
inginkan.
Lalu bagian cssnya ada di file yang bernama
style.css, yang dimana anda dapat mengedit warna dengan selera anda dan style
yang anda inginkan. Anda cukup memanggil file css tersebut ke dalam file
index.html. Maka Membuat Tab Menu dengan HTML 5 dan CSS 3, telah berhasil anda
buat, jika melakukannya dengan baik.
Sekian tutorial yang saya
berikan ini, saya sarannkan untuk menggunakan browser yang valid html 5. Tapi
disini saya menggunakan browser google chrome. Semoga tutorial Membuat Tab Menu
dengan HTML 5 dan CSS 3 ini dapat bermanfaat bagi anda yang sedan belaja web
design. Untuk mendapatkan file lengkapnya, anda dapat mendownloadnya dengan
link dibawah. Dan dapat melihat hasilnya dengan tombol demo.
