Membuat menu efek dengan css

Trik Kali ini Adalah Membuat Menu animasi dengan css. Menu ini sangat ringan karena hanya menggunakan css untuk membuat animasi efek yang ada pada menu.

Menu ini sendiri bebas anda gunakan di mana saja , baik itu website, blog dll.
untuk lebih jelasnya berikut ini contoh menunya, ini sengaja tidak saya buat dropdown, jika anda menginginkan menu dropdown, sebelumnya saya banya posting tentang menu dropdown untuk blog dan website, silahkan lihat di artikel terkait di bawah postingan ini

ok sekali lagi berikut ini contoh menunya:





Sekarang lanjut ke cara membuat menu seperti di atas:
yang kita butuhkan hanya kode css dan html implementasinya.untuk kode css sendiri udah pada tahukan di mana tempatnya, kode css itu biasanya memang harus di tempatkan di antara <head> kode css</head>
nah.. berikut ini kode css nya:
<style type="text/css">

.shadowblockmenu{
font-weight: bold;
font-size: 85%;
width: 100%;
}

.shadowblockmenu ul{
border: 1px solid #BBB;
border-width: 1px 0;
padding: 0;
margin: 0;
overflow: hidden;
}

.shadowblockmenu ul li{
display: inline;
margin:0;
padding:0;
}

.shadowblockmenu ul li a{
display:block;
float:left;
text-transform: uppercase;
color: #494949;
padding: 8px 15px 8px 9px;
margin: 0;
text-decoration: none;
border-right: 1px solid #BBB; /*right border between menu items*/
-moz-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.4) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */
-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}


.shadowblockmenu li:nth-of-type(1) a{ /* Extra style for first menu link */
border-left: 1px solid #BBB; /* add border to left side of first menu link */
padding-left:25px;
background: url(http://www.dynamicdrive.com/cssexamples/media/onebit_home.png) 1px center no-repeat; /* Add icon */
}

.shadowblockmenu li:nth-of-type(2) a{ /* Extra style for 2nd menu link */
padding-left:25px;
background: url(http://www.dynamicdrive.com/cssexamples/media/onebit_bulb.png) 1px center no-repeat; /* Add icon */
}

.shadowblockmenu ul li a:hover{
color: black;
-moz-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6); /* Add 2 inset shadows to each menu item  */
-webkit-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
}

</style>
Nah sekarang, kode html untuk memunculkan menunya, pada kode inilah sobat bisa mengedit link tujuan menu nya.
berikut ini kode htmlnya:
<div class="shadowblockmenu">
<ul>
<li><a href="http://thizan.blogspot.com/">Topunik</a></li>
<li><a href="http://thizan.blogspot.com/">Trik blog</a></li>
<li><a href="http://thizan.blogspot.com/">Trik css</a></li>
<li><a href="http://thizan.blogspot.com/">Javascript</a></li>
</ul>
</div>

Nah..cukup seperti itu saja , cara membuat animasi menu website dan blog kali ini, silahkan di gunakan ya.
dan jangan lupa komentarnya