ARI JULIANTO Network www.arijulianto.com

Oleh | CSS | | Dibaca 1.226 kali | 0 komentar

Kali ini saya akan sedikit berbagi mengenai cara membuat tab menu menggunakan CSS. Sebenarnya sudah banyak sampel-sampel instan yang tinggal download, tapi kali ini saya hanya akan berbagi apa dan bagaimana cara pembuatannya agar paham dan hasilnya sesuai dengan apa yang kita inginkan.

Bailkah, bentuk tab menu yang akan saya bahas kali ini terlihat seperti gambar di bawah

Baiklah, sekarang kita langsung ke proses pembuatannya... Oya pembahasan akan saya jelaskan berdasarkan source codenya ini

<html>

<head>

<style type="text/css">

ul.tabmenu{

  padding: 3px 0;

  margin-left: 0;

  font: bold 12px Verdana;

  border-bottom: 1px solid gray;

  list-style-type: none;

  text-align: left; /*isi dengan left, center, atau right untuk posisi menu*/

}



ul.tabmenu li{

  display: inline;

  margin: 0;

}



ul.tabmenu li a{

  text-decoration: none;

  padding: 3px 7px;

  margin-right: 3px;

  border: 1px solid gray;

  border-bottom: none;

  background-color: #73bf69;

  color: #2d2b2b;

}



ul.tabmenu li a:visited{

  color: #2d2b2b;

}



ul.tabmenu li a:hover{

  background-color: #b7f9b7;

  color: black;

}



ul.tabmenu li a:active{

  color: black;

}



ul.tabmenu li.selected a{ /*menu aktif*/

  position: relative;

  top: 1px;

  padding-top: 4px;

  background-color: #b7f9b7;

  color: black;

}

</style>

</head>
<body>

<ul class="tabmenu">

  <li><a href="index.html">Home</a></li>

  <li><a href="profile.html">Profile</a></li>

  <li><a href="about.html">About</a></li>

  <li><a href="contact.html">Contact</a></li>

</ul>

</body>

</html>

Lihat Demo | Lihat Source Code

Penjelasan file CSS

Yang pertama kita memberikan class pada UL. tujuannya adalah bahwa unordered list tersebut akan kita ubah stylenya dan dijadikan sebagai sebuah horizontal tab menu. Jadi style yang akan kita buat di file CSS tidak akan dipakai di sembarang unordered list (UL) dan yang kita jadikan menu adalah UL yang dideklarasikan dengan class="tabmenu".

Selector class ul.tabmenu memiliki deklarasi
padding: 3px 0px, dideklarasikan untuk memberi padding atas batas internal 3px untuk atas dan bawah, 0px utuk kiri dan kanan
border-bottom: 1px solid gray, untuk meberi garis solid panjang di bawah menu dengan ukuran 1pixel dan berwarna gray
list-style-type: none, untuk menghapus simbol2 yang ada di tiap awal list
text-align: left, untuk perataan tabmenu (pilihan: left, center, right)
Jadi ketika kita membuat sebuah list mereka akan berderet ke bawah tanpa ada simbol di sebelah kiri list.

Selector class ul.tabmenu li memiliki deklarasi display: inline yang berfungsi agar setiap blok list akan diposisikan sebagai bars teks.

Selector class ul.tabmenu li a memiliki deklarasi
color: #000000, memberi warna teks link dengan warna hitam
text-decoration: none, menghapus dekorasi garis bawah pada link
padding: 3px 7px,  memberi jarak teks ke pinggir 3px  atas dan bawah dan 7px kiri dan kanan
background-color: #73bf69, memberi warna latar biru tua pada teks link
margin-right: 3px memberi jarak tepi luar antar menu (sebagai spasi)

Selector class ul.menu li a:hover memiliki deklarasi background-color: #b7f9b7, memberi warna latar teks link dengan warna hijau lebih muda pada saat mouse berada di atas link

Adapun selector class ul.menu li a:visited memiliki deklarasi color: #000000, memberi warna hitam pada link yang sudah pernah di klik atau dibuka halamannya karena biasanya link yang sudah pernah dikunjungi akan berubah warnanya menjadi ungu

Okelah udahan dulu ah, bentar lagi grib nih, sampai jumpa lagi nanti selamat mencoba :)