Membuat tombol menu unik dengan javascript+css+html

Pada pagi ini kita akan membuat tombol menu yang unik dan bisa di jadikan referensi kamu untuk memilih menu mana yang kamu suka, jika tertarik boleh langsung praktekan...


berikut kode css nya :

<style>
a { text-decoration: none; }
ul { list-style: none; }
.box { background: #a7a7a7; -moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 10px; margin: 0 0 15px 0; }
.box ul li { font-size: 11px; margin: 0; border-bottom: 1px solid #666; }
.box ul li a { color: #222; display: block; padding: 4px 4px; margin: 0;
border-bottom: 1px solid #ccc; }
.box ul li:last-child,
.box ul li:last-child a { border: none; }
.box ul li a:hover { background: #ccc; text-decoration: none; }
#catNav { background: #494949; padding: 5px 5px 5px 37px;
-moz-border-radius: 5px; -webkit-border-radius: 5px;
overflow: hidden; margin: 0 0 10px 0; }
#catNav li { display: inline; }
#catNav li a { display: block; width: 50px; height: 50px; text-indent: -9999px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjglnlTqDVsNkXMWSd8qUvRI1fdxFlm5WCFJqoRvNHhE7_LdFrTjilBSJPd1mvog6RynMDI2mzG678mjjsA_O0OCq-PMHx6NvmPoQ4KGvXbkTD37cj9gTFncejYr7AhkX8r7N9jK5tAkCMC/s1600/tombol%252Bunik%252Bcode%252Bstyle.png); float: left;
border: none; padding: 0; }
#catNav li a#list-satu-button { background-position: -50px -50px; }
#page-wrap #catNav li.activeCatButton a#list-satu-button { background-position: -50px -100px; }
#catNav li a#list-satu-button:hover { background-position: -50px 0px; }
#catNav a#list-dua-button { background-position: -100px -50px; }
#page-wrap #catNav li.activeCatButton a#list-dua-button { background-position: -100px -100px; }
#catNav li a#list-dua-button:hover { background-position: -100px 0px; }
#catNav a#list-tiga-button { background-position: 0px -50px; }
#page-wrap #catNav li.activeCatButton a#list-tiga-button { background-position: 0px -100px; }
#catNav li a#list-tiga-button:hover { background-position: 0px 0px; }
#catNav a#list-empat-button { background-position: -150px -50px; }
#page-wrap #catNav li.activeCatButton a#list-empat-button { background-position: -150px -100px; }
#catNav li a#list-empat-button:hover { background-position: -150px 0px; }
</style>

Sedangkan untuk sriptnya adalah :

<script src="http://ycusoy.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// ycusoy creator
$(function(){

$("#list-dua").hide();
$("#list-tiga").hide();
$("#list-empat").hide();
$("#list-satu-button").click(function(){
$(".cat-list").slideUp(600);
$("#list-satu").slideDown(600);
});

$("#list-dua-button").click(function(){
$(".cat-list").slideUp(600);
$("#list-dua").slideDown(600);
});

$("#list-tiga-button").click(function(){
$(".cat-list").slideUp(600);
$("#list-tiga").slideDown(600);
});

$("#list-empat-button").click(function(){
$(".cat-list").slideUp(600);
$("#list-empat").slideDown(600);
});

$("#catNav li a").click(function() {
$("#catNav li").removeClass("activeCatButton");
$(this).parent().addClass("activeCatButton");
});
});
</script>

Dan yang terakhir kode htmlnya :

<div id="page-wrap">

<div class="box">
<ul id="catNav">
<li class="activeCatButton"><a id="list-satu-button">Apple</a></li>
<li><a id="list-dua-button">Linux</a></li>
<li><a id="list-tiga-button">Microsoft</a></li>
<li><a id="list-empat-button">News</a></li>
</ul>

<ul class="cat-list" id="list-satu">
<li><a href="#">Contoh Ringkas baris satu</a></li>
<li><a href="#">Contoh Ringkas baris satu</a></li>
<li><a href="#">Contoh Ringkas baris satu</a></li>
<li><a href="#">Contoh Ringkas baris satu</a></li>
<li><a href="#">Contoh Ringkas baris satu</a></li>
</ul>
<ul class="cat-list" id="list-dua">
<li><a href="#">Contoh Ringkas baris dua</a></li>
<li><a href="#">Contoh Ringkas baris dua</a></li>
<li><a href="#">Contoh Ringkas baris dua</a></li>
<li><a href="#">Contoh Ringkas baris dua</a></li>
<li><a href="#">Contoh Ringkas baris dua</a></li>
</ul>
<ul class="cat-list" id="list-tiga">
<li><a href="#">Contoh Ringkas baris tiga</a></li>
<li><a href="#">Contoh Ringkas baris tiga</a></li>
<li><a href="#">Contoh Ringkas baris tiga</a></li>
<li><a href="#">Contoh Ringkas baris tiga</a></li>
<li><a href="#">Contoh Ringkas baris tiga</a></li>
</ul>
<ul class="cat-list" id="list-empat">
<li><a href="#">Contoh Ringkas baris empat</a></li>
<li><a href="#">Contoh Ringkas baris empat</a></li>
<li><a href="#">Contoh Ringkas baris empat</a></li>
<li><a href="#">Contoh Ringkas baris empat</a></li>
<li><a href="#">Contoh Ringkas baris empat</a></li>
</ul>

</div>

</div>

Bagaimana, Apakah kamu berhasil membuatnya. Oke sekian dulu postingan kali ini. sampai jumpa ...

contoh :

• Apple
• Linux
• Microsoft
• News

• Contoh Ringkas baris satu
• Contoh Ringkas baris satu
• Contoh Ringkas baris satu
• Contoh Ringkas baris satu
• Contoh Ringkas baris satu

• Contoh Ringkas baris dua
• Contoh Ringkas baris dua
• Contoh Ringkas baris dua
• Contoh Ringkas baris dua
• Contoh Ringkas baris dua

• Contoh Ringkas baris tiga
• Contoh Ringkas baris tiga
• Contoh Ringkas baris tiga
• Contoh Ringkas baris tiga
• Contoh Ringkas baris tiga

• Contoh Ringkas baris empat
• Contoh Ringkas baris empat
• Contoh Ringkas baris empat
• Contoh Ringkas baris empat
• Contoh Ringkas baris empat

dan jangan lupa tinggalkan komentar jika masih dikau sempat..