Membuat menu dengan icon seperti akun google

Yang punya akun google pasti sudah kenal tampilan menu seperti disamping ini. Jika anda sudah masuk ke layanan akun google, dan masuk ke menu produk maka akan terlihat menu layanan yang anda gunakan dalam bentuk daftar nama layanan serta ikon gambar kecil disampingnya. Berikut ini saya akan berbagi tentang cara membuat menu seperti tersebut.

Memang kalau kita melihat menu layanan akun google, menunya tidak terlalu unik tapi sangat fleksibel dan gampang diakses. Kata lain singkat, padat dan berisi. Lihat versi gambar lebih besar berikut :

Untuk membuat menu tersebut kita memerlukan beberapa gambar kecil/ikon yang nanti ditaruh sebagai lambang dari menu yang kita buat. Ukuran gambar untuk contoh ini, saya sarankan 32px dengan jenis gif. Untuk gambar anda bisa cari diinternet menggunakan google images dengan menggunakan kata kunci "gif icons". Atau silahkan download (klik kanan pada gambar, lalu save as) gambar-gambar berikut sebagai contoh.

Karena sekarang kita sudah punya 7 gambar dengan tema berbeda, maka kita akan buat 7 item menu dengan judul menu berikut ini:

1. Tulis Berita
2. Daftar Berita
3. Daftar Download
4. Daftar Gambar
5. Baca Pesan
6. Profil
7. Daftar Situs

Kita mulai dengan menyusun 7 menu tersebut dengan script seperti berikut :

<div id="menu-google">

    <a href="#">Tulis Berita</a>

    <a href="#">Daftar Berita</a>

    <a href="#">Daftar Download</a>

    <a href="#">Daftar Gambar</a>

    <a href="#">Baca Pesan</a>

    <a href="#">Profil</a>

    <a href="#">Daftar Situs</a>

</div>

Script diatas kalau anda simpan akan menghasilkan tampilan seperti berikut :

Kemudian kita akan membuat kotak dan mengatur lebar dan tinggi masing-masing menu dengan menambahkan css  berikut :

<style type="text/css">

#menu-google {

   width:600px;

   padding:10px;

   margin:0 auto;

   font:14px Arial, Helvetica, sans-serif;

}

#menu-google a {

   color:#000;

   text-decoration:none;

   display:block;

   border:1px solid #ccc;

   width:150px;

   float:left;

   padding:15px 15px 15px 45px;

   margin:10px;

   background-color:#fff;

   border-radius:5px;

}

#menu-google a:hover {

   background-color:#F5F5F5;

}

</style>

Dengan ditambahkan script css diatas, jika anda tampilkan lagi maka hasilnya seperti berikut :

Banyak perubahan dari tampilan awal. Sekarang masing-masing menu sudah diberi kotak dan memiliki lebar dan tinggi sesuai pengaturan di css (lihat bagian #menu-google a). Masing-masing menu juga langsung dipisahkan dengan jarak 10 pixel.

Dan jika anda arahkan pada salah satu menunya maka, background menu yang dilewati kursor akan berubah (lihat background menu tulis berita), ini diatur pada #menu-google a:hover :

Langkah berikutnya tinggal menyisipkan gambar yang tadi kita punya. Caranya dengan memanggil gambar pada css seperti berikut :

.tberita { background:url(images/icon-artikel.gif) no-repeat 5px; }

.dberita { background:url(images/icon-berita.gif) no-repeat 5px; }

.ddownload { background:url(images/icon-download.gif) no-repeat 5px; }

.dgambar { background:url(images/icon-gambar.gif) no-repeat 5px; }

.bpesan { background:url(images/icon-pesan.gif) no-repeat 5px; }

.profil { background:url(images/icon-profil.gif) no-repeat 5px; }

.dsitus { background:url(images/icon-situs.gif) no-repeat 5px; }

 Asumsi, semua gambar diletakkan pada sub folder dengan nama images.

Setelah, semua gambar disisipkan pada nama class masing-masing, sekarang tinggal memanggil masing-masing class berdasar menu yang kita buat. Sehingga script html yang merupakan menu tadi hasil akhirnya seperti berikut :

<div id="menu-google">

   <a href="#" class="tberita">Tulis Berita</a>

   <a href="#" class="dberita">Daftar Berita</a>

   <a href="#" class="ddownload">Daftar Download</a>

   <a href="#" class="dgambar">Daftar Gambar</a>

   <a href="#" class="bpesan">Baca Pesan</a>

   <a href="#" class="profil">Profil</a>

   <a href="#" class="dsitus">Daftar Situs</a>

</div>

Dan hasil akhir jika anda tampilkan seperti gambar berikut :

Berikut ini kode lengkap dari tampilan menu diatas :

<html>

<head>

<title>Contoh Membuat Menu</title>

<style type="text/css">

#menu-google {

   width:600px;

   padding:10px;

   margin:0 auto;

   font:14px Arial, Helvetica, sans-serif;

}

#menu-google a {

   color:#000;

   text-decoration:none;

   display:block;

   border:1px solid #ccc;

   width:110px;

   float:left;

   padding:15px 15px 15px 45px;

   margin:10px;

   background-color:#fff;

   border-radius:5px;

}

#menu-google a:hover {

   background-color:#F5F5F5;

}

.tberita { background:url(images/icon-artikel.gif) no-repeat 5px; }

.dberita { background:url(images/icon-berita.gif) no-repeat 5px; }

.ddownload { background:url(images/icon-download.gif) no-repeat 5px; }

.dgambar { background:url(images/icon-gambar.gif) no-repeat 5px; }

.bpesan { background:url(images/icon-pesan.gif) no-repeat 5px; }

.profil { background:url(images/icon-profil.gif) no-repeat 5px; }

.dsitus { background:url(images/icon-situs.gif) no-repeat 5px; }

</style>

</head>

<body>

<div id="menu-google">

   <a href="#" class="tberita">Tulis Berita</a>

   <a href="#" class="dberita">Daftar Berita</a>

   <a href="#" class="ddownload">Daftar Download</a>

   <a href="#" class="dgambar">Daftar Gambar</a>

   <a href="#" class="bpesan">Baca Pesan</a>

   <a href="#" class="profil">Profil</a>

   <a href="#" class="dsitus">Daftar Situs</a>

</div>

</body>

</html>

Silahkan lihat demonya berikut : Demo menu dengan icon seperti akun google

Silahkan download contoh hasil membuat menu dengan icon ini.

Semoga Bermanfaat dan selamat mencoba

Zainal Hakim

- See more at: http://www.zainalhakim.web.id/posting/membuat-menu-dengan-icon-seperti-akun-google.html#sthash.ONUqeENq.dpuf