membuat menu website dengan css

membuat menu website dengan css.Kembali lagi membahas tentang Membuat menu dengan css, Tentu kali ini tampilannya dan efeknya yang beda.
Menu ini bisa di bilang sangat elegan dan animasi karena efek transparan saat di sentuh mouse.
Untuk lebih jelasnya , berikut ini contoh menu nya:



Bagaimana, meman cukup elegan kan tampilannya.
 nah sekarang lanjut ke cara pembuatannya.
Untuk pemasangan di website atau blognya udah pada tahukan,
1. Kode css di letakkan di antara <head> ...  </head>
2. Untuk kode HTML silahkan letakkan di mana anda mau menunya muncul , bisa di bawah header atau di atasnya , atau mungkin di bagian footer. terserah anda lah ..hehe.

Ok kembali ke kodenya.
berikut ini kode css nya.
<style type="text/css">

div.bottombar{ /* bar that runs across the bottom of the menu */
height: 10px;
background: #1a1109;
}

ul.semiopaquemenu{ /* main menu UL */
font: bold 14px Georgia ;
width: 100%;
background: #b1e958;
padding: 11px 0 8px 0; /* padding of the 4 sides of the menu */
margin: 0;
text-align: left; /* set value to "left", "center", or "right" to align menu accordingly */
}

ul.semiopaquemenu li{
display: inline;
}

ul.semiopaquemenu li a{
color:black;
padding: 6px 8px 6px 8px; /* padding of the 4 sides of each menu link */
margin-right: 15px; /* spacing between each menu link */
text-decoration: none;
}

ul.semiopaquemenu li a:hover, ul.semiopaquemenu li a.selected{
color: black;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgyIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xNiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); /* IE9+ SVG equivalent  of linear gradients */
background: -moz-linear-gradient(top,  rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.16) 100%); /* fade from white (0.82 opacty) to 0.16 opacity */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.82)), color-stop(100%,rgba(255,255,255,0.16)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1ffffff', endColorstr='#29ffffff',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959; /* CSS3 box shadows */
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 12px; /* large padding to get menu item to protrude upwards */
padding-bottom: 20px; /* large padding to get menu item to protrude downwards */
}

</style>

Sekarang berikut ini kode htmlnya.

<ul class="semiopaquemenu">
<li><a href="http://thizan.blogspot.com/">Home</a></li>
<li><a href="http://thizan.blogspot.com/" class="selected">css kode</a></li>
<li><a href="http://thizan.blogspot.com/">Forum</a></li>
<li><a href="http://thizan.blogspot.com/">trik</a></li>
<li><a href="http://thizan.blogspot.com/">JavaScript</a></li>
<li><a href="http://thizan.blogspot.com/">Foto</a></li>
</ul>
<div class="bottombar"></div>

sebagai catatan : Coba kalian lihat Home pada contoh menu di atas, pada home efeknya muncul terus kan.
nah, untuk menghilangkan atau memunculkan nya terapkan atau hapus saja kode pada html yang warna merah.
jika anda mau yang seperti home , silahkan tambah kode class="selected" pada kode link.dan begitu juga sebaliknya.
dan jika anda mau memperbanyak link menunya cukup tambahkan kode yang warna biru di bawah warna biru juga.
bagaimana ? Mudah kan , silahkan di praktekkan dan terapkan untuk blog atau website anda. jangan lupa beri saran dan pendapatnya.