![Membuat menu seperti akun google](file:///C:\Users\azis\AppData\Local\Temp\msohtmlclip1\01\clip_image002.jpg)
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](file:///C:\Users\azis\AppData\Local\Temp\msohtmlclip1\01\clip_image003.gif)
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](file:///C:\Users\azis\AppData\Local\Temp\msohtmlclip1\01\clip_image004.gif)
![contoh icon menu 2](file:///C:\Users\azis\AppData\Local\Temp\msohtmlclip1\01\clip_image005.gif)
![contoh icon menu 3](file:///C:\Users\azis\AppData\Local\Temp\msohtmlclip1\01\clip_image006.gif)
![contoh icon menu 4](file:///C:\Users\azis\AppData\Local\Temp\msohtmlclip1\01\clip_image007.gif)
![contoh icon menu 5](file:///C:\Users\azis\AppData\Local\Temp\msohtmlclip1\01\clip_image008.gif)
![contoh icon menu 6](file:///C:\Users\azis\AppData\Local\Temp\msohtmlclip1\01\clip_image009.gif)
![contoh icon menu 7](file:///C:\Users\azis\AppData\Local\Temp\msohtmlclip1\01\clip_image010.gif)
Karena sekarang kita sudah
punya 7 gambar dengan tema berbeda, maka kita akan buat 7 item menu dengan
judul menu berikut ini:
- Tulis Berita
- Daftar Berita
- Daftar Download
- Daftar Gambar
- Baca Pesan
- Profil
- 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](file:///C:\Users\azis\AppData\Local\Temp\msohtmlclip1\01\clip_image011.gif)
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](file:///C:\Users\azis\AppData\Local\Temp\msohtmlclip1\01\clip_image012.gif)
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](file:///C:\Users\azis\AppData\Local\Temp\msohtmlclip1\01\clip_image013.gif)
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](file:///C:\Users\azis\AppData\Local\Temp\msohtmlclip1\01\clip_image014.gif)
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
No comments:
Post a Comment