Sinzo Sakurata Blog

Css Rollover Menu

Posted on: September 21, 2008

sering kali teman-teman saya yg baru belajar dan mengenal dunia webdesign bertanya. gimana sih cara bikin menu nya atau ajarin donk bikin menu flashnya dan saya sih dengan enteng nya menjawab : bikin nya sih pake css bukan pake flash soalnya klo pake flash pasti berat load menu nya.

Menu yg sering mereka tanyakan biasanya yaitu menu rollover dimana pada saat kita dekatkan pointer ke atas menunya maka si menu itu akan berubah warna atau berubah gambarnya.

oke untuk lebih detilnya akan saya berikan contoh menu rollover yg sangat dasar sekali yaitu dengan menggunakan element anchor.

<style>

a.menu{
display:block;
background:red;
color:#ffffff;
font-size:18px;
width:200px;
padding-top:20px;
padding-bottom:20px;
text-align:center;
}
a.menu:hover{
background:blue;
}

</style>

dan hasilnya seperti tampak pada gambar

dimana menu default akan berubah warna menjadi biru apabila pointer berada di atas menu tersebut.

ok itu untuk contoh basic nya. skarang kita akan membuat variasi di menunya dengan menambahkan image.

silakan download filenya disini Psd | gif

dimana pada gambar itu terdapat dua gambar yaitu untuk default yg berada di atas dan hover berada di bawah. dan untuk css nya sendiri seperti di bawah ini :

<style>
.navigation{
width:324px;
height:34px;
background: url(bg_menu.gif) no-repeat;
margin:0;
padding:0;
}
.navigation li{
list-style:none;
text-indent:-9999px;
float:left;
margin:0 0 0 0px;
padding:0;
}
.navigation li a{
display:block;
}
.navigation li a.home{
width:77px;
height:34px;
margin-left:23px;
}
.navigation li a.home:hover{
background: url(bg_menu.gif) -23px -34px;
}

.navigation li a.about{
width:104px;
height:34px;
margin-left:1px;
}
.navigation li a.about:hover{
background: url(bg_menu.gif) -101px -34px;
}
.navigation li a.news{
width:93px;
height:34px;
margin-left:1px;
}
.navigation li a.news:hover{
background: url(bg_menu.gif) -206px -34px;
}

</style>

dan untuk bentuk htmlnya sendiri seperti ini :

<ul class=”navigation”>
<li><a href=”#” class=”home”>home</a></li>
<li><a href=”#” class=”about”>home</a></li>
<li><a href=”#” class=”news”>home</a></li>
</ul>

kita akan membuat menu tersebut dengan nama “navigation” dan kita menggunakan element ul li yang di dalamnya terdapat element anchor yg kita beri class di dalamnya supaya kita dapat mengatur bentuk dan tampilan dari element anchor tersebut.

di dalam class “navigation” kita berikan dimensi sesuai dengan ukuran pada gambar yaitu width:324px dan height : 34px lalu margin dan padding :0 supaya tidak ada jarak indent ke dalam.

.navigation{
width:324px;
height:34px;
background: url(bg_menu.gif) no-repeat; /** load image menu **/
margin:0;
padding:0;
}

apabila di dalam class navigation terdapat element li maka akan kita set seperti berikut

.navigation li{
list-style:none; /** untuk menghilangkan tanda dot yang ada di depan text **/
text-indent:-9999px; /** untuk menyembunyikan text supaya tidak tampak pada browser **/
float:left; /** untuk menempatkan posisi element li berada di sebelah kiri **/
margin:0 0 0 0px;
padding:0;
}

dan apabila terdapat anchor di dalam li tersebut akan kita berikan properties display :block; supaya element anchor tersebut berperilaku seperti block box.

.navigation li a{
display:block;
}

dan yg terakhir kita set ukuran dan hover dari tiap anchor yang telah kita beri nama di dalamnya

.navigation li a.home{
width:77px; /** set ukuran dari menu lebar dan tingginya **/
height:34px;
margin-left:23px; /** set jarak menu dari sebelah kiri **/
}
.navigation li a.home:hover{
background: url(bg_menu.gif) -23px -34px;

/** set menu pada saat hover dimana kita set supaya yang tampil adalah gambar yg ada di bawah. **/
}

.navigation li a.about{
width:104px;
height:34px;
margin-left:1px;
}
.navigation li a.about:hover{
background: url(bg_menu.gif) -101px -34px;
}
.navigation li a.news{
width:93px;
height:34px;
margin-left:1px;
}
.navigation li a.news:hover{
background: url(bg_menu.gif) -206px -34px;
}

download hasil akhirnya disini

Tags: ,

1 Response to "Css Rollover Menu"

mas bisa bagi saya indogoid template ngak send me email ok globalnet86@gmail.com thanks

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: