Kwick Menu Horizontal Bergaya Slide

13.47 // 3 komentar // macho // Category: Tutorial Blog //

Menu Horizontal ini memberikan efek lembut, jika Kita arahkan mouse ke link menu maka menu akan bergeser dan menampilkan icom yang tersembunyi.

Beberapa hal yang harus disiapkan dalam membuat gambar menu:
Gambar 1 
Gambar 2

Berikut langkah-langkahnya:

1, Ke Layout, lalu Edit HTML
2, Sisipkan kode CSS di bawah ini di atas kode ]]></ b: skin>

.kwicks {list-style: none; position: relative;margin: 0; padding: 0;background-image: url(http://i788.photobucket.com/albums/yy169/macho_album_2010/tutorialmacho/bg.png);}
.kwicks li{display: block;overflow: hidden;padding: 0;cursor: pointer;float: left;width: 100px;height: 40px;margin-right: 0px;background-image:url(http://i788.photobucket.com/albums/yy169/macho_album_2010/tutorialmacho/memucho.png);background-repeat:no-repeat;}
.kwicks a{display:block;height:40px;text-indent:-9999px;outline:none;}
#kwick1 {background-position:0px 0px;}
#kwick2 {background-position:-170px 0px;}
#kwick3 {background-position:-340px 0px;}
#kwick4 {background-position:-510px 0px;}
#kwick5 {background-position:-680px 0px;}
#kwick1.active, #kwick1:hover {background-position: 0 bottom;}
#kwick2.active, #kwick2:hover {background-position: -170px bottom;}
#kwick3.active, #kwick3:hover {background-position: -340px bottom;}
#kwick4.active, #kwick4:hover {background-position: -510px bottom;}
#kwick5.active, #kwick5:hover {background-position: -680px bottom;}
#kwick5 a:hover {background-position: right -80px;}
#kwick5 a {background-image:url(http://i788.photobucket.com/albums/yy169/macho_album_2010/tutorialmacho/endcho.png);background-repeat:no-repeat;background-position: right 0px;}

3. Kemudian Sisipkan kode di bawah ini dibawah kode ]]></ b: skin>

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script class="jsbin" src="http://machrus.googlecode.com/files/kwicks.js">
</script>
<script type="text/javascript">
$(document).ready(function(){                    
    $('.kwicks').kwicks({
        duration: 500,   
        max: 170,  
        spacing:  0  
    });
});
</script>

4, Masukan kode dibawah ini pada bagian menu di template Anda:

<ul class="kwicks">
<li id="kwick1"><a href="/">Home</a></li> 
<li id="kwick2"><a href="http://tutorialmacho.blogspot.com/">Profil</a></li> 
<li id="kwick3"><a href="http://tutorialmacho.blogspot.com/">Download</a></li>
<li id="kwick4"><a href="http://tutorialmacho.blogspot.com/">Contact</a></li>
<li id="kwick5"><a href="http://tutorialmacho.blogspot.com/">FAQ</a></li>
</ul> 

Selesai...

untuk membuat gambar menu kwicks menggunakan Adobe Photoshop silahkan baca artikel klik disini

Selamat Mencoba....