membuat menu dengan css

membuat menu dengan css. Tertarik dengan efeknya , kali ini posting tentang membuat menu dengan css lagi deh. sebelumnya saya banyak posting tentang Cara membuat menu dengan css baik itu dropdown maupun tidak , atau vertikal dan menu horizontal. jadi postingan kali ini hanya sebagai pelengkap saja.
lihat di artikel terkait di bawah postingan ini jika anda mau menu yang lainnya.

ok sekarang kembali ke postingan ini.
untuk penyemangat , berikut saya berikan demonya:




itulah contoh menunya, simpel ,ringan namun elegan.
untuk cara-cara menerapkan di blog atau website memang sangat gampang.
1. letakkan kode css berikut ini tepat di atas kode </head>
<style type="text/css">

div.topbar{
height: 16px;
background: #e16031;
}

ul.claybricks{
font-weight: bold;
width: 100%;
background: #e3e490;
padding: 6px 0 6px 0;
margin: 0;
text-align: left;
}

ul.claybricks li{
display: inline;
}

ul.claybricks li a{
color:black;
padding: 6px 8px 4px 8px;
margin-right: 20px;
text-decoration: none;
}

ul.claybricks li a:hover, ul.claybricks li a.selected{
color: white;
background: #5d4137;
background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%); /* opera syntax for CSS3 gradient */
background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959;
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 17px;
padding-bottom: 6px;
}

</style>
2. Jika sudah simpan template anda.
3. untuk memunculkan menunya , gunakan kode html berikut ini

<div class="topbar"></div>
<ul class="claybricks">
<li><a href="http://thizan.blogspot.com/">Home</a></li>
<li><a href="http://thizan.blogspot.com/">Trik</a></li>
<li><a href="http://thizan.blogspot.com/">CSS</a></li>
<li><a href="http://thizan.blogspot.com/">Blog</a></li>
<li><a href="http://thizan.blogspot.com/">Login</a></li>
<li><a href="http://thizan.blogspot.com/">About</a></li>
</ul>
4. silahkan letakkan kode html di atas di manapun anda mau memasangnya , misalkan di bawah header atau mungkin di atas header , atau mungkin di atas footer. ingat ganti link warna merah dengan link kamu dan yang huruf tebal dengan judul link kamu.

saya kira tidak ada kendalakan untuk pemasangan di blog atau website anda. jika bingung silahkan tanya aja lewat komentar di bawah, saya sangat menghargai pertanyaan ,saran dan pendapat anda.