Membuat Glossy Vertical Menu dengan CSS
Ini adalah menu CSS vertikal yang menggunakan gambar latar belakang tipis yang berulang, terlihat berubah ketika mouse bergerak di atas link. Gambar glossy terlihat indent di bagian bawah untuk dijadikan sebagai pemisahan antara link.
Demo:
Cara Memasang Glossy Vertical Menu
Kode CSS
Kode HTML
sumber: dynamicdrive
Demo:
Cara Memasang Glossy Vertical Menu
- Langkah Pertama:
Kode CSS
<style type="text/css">
.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 170px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}
.glossymenu li a{
background: white url(media/glossyback.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;
}
* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 160px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(media/glossyback2.gif);
}
</style>
- Langkah Kedua:
Kode HTML
<ul class="glossymenu">
<li><a href="http://caprt3a.blogspot.com/">Buku Catatan si Ugi</a></li>
<li><a href="http://caprt3a.blogspot.com/">CSS Examples</a></li>
<li><a href="http://caprt3a.blogspot.com/">JavaScript Reference</a></li>
<li><a href="http://caprt3a.blogspot.com/">DOM Reference</a></li>
<li><a href="http://caprt3a.blogspot.com/">CSS Drive</a></li>
<li><a href="http://caprt3a.blogspot.com/" style="border-bottom-width: 0;">Coding Forums</a></li>
</ul>
sumber: dynamicdrive
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon