Membuat Glossy Horizontal Menu
Glossy Horizontal menu adalah curved menu yang dibuat dengan menggunakan tiga buah gambar untuk membentuk sebuah interface, gambar garis bawah berulang, ditambah dua bagian gambar kiri dan kanan yang mengiris tab tab yang dipilih.
Demo:
Berikut ini adalah Gambar yang digunakan untuk membuat Glossy Horizontal Menu :
Red scheme (3 images):
Blue scheme (3 images):
Green scheme (3 images):
Orange scheme (3 images):
Purple scheme (3 images):
Cara Memasang Glossy Horizontal Menu
Langkah Pertama:Letakan Kode CSS berikut ini diatas kode </head>
<style type="text/css">
/*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
/*Posted to: Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) */
.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(media/menur_bg.gif) repeat-x; /*tab background image path*/
height: 46px;
list-style: none;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}
.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(media/menur_hover_left.gif) no-repeat; /*left tab image path*/
background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(media/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
}
</style>
Keterangan:
Masukan tiga URL gambar terpilih ke dalam kode CSS, menggantikan Text yang berwarna kuning. Lihat contoh diatas.
Langkah Kedua:Pasang Kode HTML berikut ini pada <body> halaman site anda.
<ul class="glossymenu">
<li class="current"><a href="http://caprt3a.blogspot.com/"><b>Home</b></a></li>
<li><a href="http://caprt3a.blogspot.com/"><b>CSS</b></a></li>
<li><a href="http://caprt3a.blogspot.com/"><b>Forums</b></a></li>
<li><a href="http://caprt3a.blogspot.com/"><b>Webmaster Tools</b></a></li>
<li><a href="http://caprt3a.blogspot.com/"><b>JavaScript</b></a></li>
<li><a href="http://caprt3a.blogspot.com/"><b>Gallery</b></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