Membuat menu dengan icon seperti akun google

Membuat menu seperti akun googleYang 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 :

Tampilan Menu Akun Google

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.

contoh icon menu 1 contoh icon menu 2 contoh icon menu 3 contoh icon menu 4 contoh icon menu 5 contoh icon menu 6 contoh icon menu 7

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 :

Membuat menu seperti google akun 1

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 :

Membuat menu seperti google akun 2

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 :

Membuat menu seperti google akun 3

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 :

Membuat menu seperti google akun 4

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

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • Cara mengganti jenis huruf di blog atau website dengan font unik dengan cufon font
    Dengan kemajuan teknologi web yang sangat pesat, sekarang jenis tulisan atau font untuk web atau blog sudah bisa diganti sesuai keinginan. Kalau sebelumnya jenis tulisan yang ada di blog atau web kita hanya sebatas font atau jenis tulisan standar yang ada diinternet saja, kini sudah bisa lebih variasi sesuai selera pemilik blog atau webnya.
  • Software WYSIWYG Editor untuk pembuatan halaman web
    WYSIWYG cenderung identik dengan sebuah program aplikasi visual yang digunakan untuk membuat/menuliskan kode program atau dokumen yang berisi rangkaian perintah-perintah yang hanya akan muncul setelah dijalankan dengan bantuan program lain seperti browser
  • Kombinasi warna dalam desain website
    Kombinasi warna pada desain website adalah salah satu komponen yang sangat penting. Seorang desainer yang sudah memiliki "jam terbang" cukup tinggi sangat mengetahui pentingnya kombinasi warna dan hati-hati dalam memilih warna. Akan tetapi, hal ini tentu sangat berbeda bagi mereka yang baru terjun dalam masalah desain. Warna apa yang cocok untuk website tertentu, bagaimana membuat kombinasi dari beberapa warna agar sesuai dengan tema yang dibuat, adalah sebagian dari banyak masalah warna.
  • Tampilan web terbaik
    Jika saya ditanya apa tampilan web terbaik? saya pasti akan menjawab panjang lebar tentang tampilan web terbaik karena banyak faktor yang harus kita lihat, dan tentunya pasti ada tampilan web terbaik dan tampilan web terburuk.
  • Template website gratis
    Template website gratis. Sekarang anda tidak perlu merepotkan diri untuk menyusun template website atau blog, karena sudah banyak template yang bisa anda dapat dengan gratis alias free. Kecuali anda memang ingin template web yang fresh, original, dan sesuai dengan web atau blog yang anda buat.

Kiriman terbaru