Kompiku.com: Membuat Menu Navigasi Interaktif dengan CSS

Saat browsing di internet seringkali kita jumpai menu navigasi yang berubah tampilannya saat dihampiri mouse atau setelah diklik. untuk membuat menu navigasi tersebut ternyata tidaklah susah, hanya dengan beberapa baris kode css kita dapat mengatur mau seperti apa menu navigasi web atau blog kita.

style dari menu di atas adalah sebagai berikut :

<style type="text/css">
#menu_ku{
position:relative;
display:block;
height:26px;
font-size:11px;
font-weight:bold;
background:transparent url(gambar/bgOFF.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;
border-bottom:3px solid #FF0066;
}

#menu_ku ul{
margin:0px;
padding:0;
list-style-type:none;
width:auto;
}

#menu_ku ul li{
display:block;
float:left;
margin:0;
}

#menu_ku ul li a{
display:block;
float:left;
color:#FFFFFF;
text-decoration:none;
padding:7px 20px 0 20px;
height:19px;
background:transparent url(ganbar/bgDIVIDER.gif) no-repeat top right;
}

#menu_ku ul li a:hover,#menu_ku ul li a.current{
color:#FFFFFF;
background:#0e1fa4 url(gambar/bgDIVIDER.gif) no-repeat top right;
}
</style>

tag style di atas diletakkan di dalam tag head :

<head>

<style type="text/css">
……………………………
</style>

</head>

dari tag style di atas terdapat definisi pengaturan menu default yaitu id menu_ku (#menu_ku) sbb :

ditampilkan mode blok dengan tinggi 26 pixel, ukuran huruf 11 pixel,jenis huruf Arial,Verdana,Helvitica,sans-serif, huruf tebal.
background “url(gambar/bgOFF.gif) repeat-x top left” yang berarti background beralamat pada folder gambar dengan nama file bgOFF.gif yang berulang secara mendatar (searah sumbu x). Anda dapat menggantinya dengan alamat gambar yang anda upload sendiri.
garis warna pink diatur dengan border-bottom:3px solid #FF0066;

pengaturan style untuk menu saat dilewati mouse (hover) dan saat menu dipilih pada intinya terletak pada #menu_ku ul li a:hover,#menu_ku ul li a.current

saat menu dilewati mouse dan terseleksi, background warna biru tua (:#0e1fa4) dan warna font putih.
background url(gambar/bgDIVIDER.gif) no-repeat top right; bearati background gambar hanya akan muncul pada bagian kanan blok menu tanpa berulang, hal ini dimaksudkan untuk memberikan batas anatara setiap menu.

untuk menampilkan menu, saya gunakan scrip berikut yang diletakan di dalam tag body :

<div id='menu_ku'>
<ul>
<li><a class='current' href='http://www.kompiku.com'>menu 1</a></li>
<li><a href='http://www.kompiku.com'>menu 2</a></li>
<li><a href='http://www.kompiku.com'>menu 3</a></li>
<li><a href='http://www.kompiku.com'>menu 4</a></li>
<li><a href='http://www.kompiku.com'>menu 5</a></li>
</ul>
</div>

a class='current' digunakan untuk memberi tampilan menu yang terpilih. Sudah selesai, dan anda tinggal menyesuaikan kode diatas sesuai dengan tampilan dan menu yang anda inginkan. menu yang sudah jadi dapat anda download di SINI

6 comments:

gratisanboy mengatakan...: Mantab Bos Met.. 12 langkah lebih maju didepan gratisanboy..; 1 Maret 2009 pukul 18.39
Anonim mengatakan...: makasih infonya; 4 Maret 2009 pukul 05.51
Itdot mengatakan...: mantap coy; 13 Juni 2009 pukul 20.52
nusapos mengatakan...: bagus tutorialnya,,,jadi pingin buat jg; 27 September 2009 pukul 07.45
apikorek09 mengatakan...: Thanks mas atas infonya; 19 Oktober 2009 pukul 00.39
imam7 mengatakan...: Thx berat sob!!
di tunggu visit'a!!; 29 November 2009 pukul 19.55