Home > CSS > Membuat Dock Menu Sederhana dengan CSS

Membuat Dock Menu Sederhana dengan CSS

Dock Menu? Mungkin istilah tersebut asing bagi Anda. Tetapi bagi Anda yang menggunakan OS Mac, Anda tidak asing dengan istilah menu tersebut. Dock Menu adalah menu yang terdapat pada OS Mac, seperti di bawah ini :

Konsep dock menu saat ini juga telah diadopsi pada Windows Vista atau 7. Pada dock menu apabila Anda mengarahkan kursor pada salah satu icon, maka terdapat efek pada icon seperti icon tersebut menjadi lebih besar ukurannya.

Nah, pada artikel saya kali ini, saya akan mencoba membuat sebuah dock menu sederhana dengan menggunakan HTML dan CSS. Hal yang paling utama adalah kita akan memanfaatkan tag :hover pada CSS. Tag :hover adalah tag CSS yang digunakan untuk memberikan style pada elemen HTML pada saat elemen tersebut disorot atau difocuskan oleh kursor.

Pada konsep dock menu sederhana ini, kita menyisapkan tag CSS height dan width untuk mengatur tinggi dan lebar gambar tersebut pada saat disorot oleh kursor.

Pertama kita membuat file dockmenu.html

<!–
*Membuat Dock Menu Sederhana dengan Cascading Style Sheet*
created by Erick Alfons Lisangan
8 Maret 2011
–>
<html>
<head>
<title>Membuat Dock Menu Sederhana dengan CSS by Erick Alfons Lisangan</title>
<style>
a img
{
border: none;
}
a:hover img
{
width: 85px; /* Mengatur Width dan Height */
height: 85px; /* Pada saat Cursor sorot ke Icon */
border: none;
}
.menu /* Background dari tempat Icon Menu */
{
height: 90px;
background-color: grey;
text-align: center;
}
</style>
</head>
<body>
<!– Dock Menu –>
<table class=’menu’ width=’250′>
<tr>
<td valign=’center’><a href=’http://www.mozilla.com/’><img src=’icon/1.png’ width=’50’ height=’50’></a></td>
<td valign=’center’><a href=’http://www.opera.com/’><img src=’icon/2.png’ width=’50’ height=’50’></a></td>
<td valign=’center’><a href=’http://www.apple.com/safari/download/’><img src=’icon/3.png’ width=’50’ height=’50’></a></td>
<td valign=’center’><a href=’http://www.google.com/chrome’><img src=’icon/4.png’ width=’50’ height=’50’></a></td>
</tr>
</table>
</body>
</html>

 

Apabila kita menjalankan file tersebut, akan muncul tampilan menu yang berisi 4 icon.

 

Apabila kita menyorot salah satu icon web browser, maka seolah-olah terdapat efek pembesaran ukuran icon. Sebaliknya, jika kita selesai menyorot maka icon kembali ke ukuran semula.

Bagaimana?untuk membuat dock menu sederhana dengan CSS tidak serumit yang kita bayangkan kan?..

Semoga artikel ini bermanfaat bagi Anda. Gbu....

Categories: CSS
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: