Membuat Arrow Bullet List Menu
Daftar menu ini menyerupai sesuatu yang Anda mungkin pernah anda lihat pada blog ini, yaitu suatu versi menu yang dinamis dengan tampilan sub menu yang tersembunyi, lihat Menu Accordion.
D e m o:
Kode CSS:
<style type="text/css">
.arrowlistmenu{
width: 180px; /*width of menu*/
}
.arrowlistmenu .headerbar{
font: bold 14px Arial;
color: white;
background: black url(media/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
}
.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a{
color: #A70303;
background: url(media/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.arrowlistmenu ul li a:visited{
color: #A70303;
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}
</style>
Kode HTML
<div class="arrowlistmenu">
<h3 class="headerbar">CSS Library</h3>
<ul>
<li><a href="http://caprt3a.blogspot.com/">Horizontal CSS Menus</a></li>
<li><a href="http://caprt3a.blogspot.com/">Vertical CSS Menus</a></li>
<li><a href="http://caprt3a.blogspot.com/">Image CSS</a></li>
<li><a href="http://caprt3a.blogspot.com/">Form CSS</a></li>
<li><a href="http://caprt3a.blogspot.com/">DIVs and containers</a></li>
<li><a href="http://caprt3a.blogspot.com/">Links & Buttons</a></li>
<li><a href="http://caprt3a.blogspot.com">Other</a></li>
<li><a href="http://caprt3a.blogspot.com/">Browse All</a></li>
</ul>
<h3 class="headerbar">CSS Drive</h3>
<ul>
<li><a href="http://caprt3a.blogspot.com">CSS Gallery</a></li>
<li><a href="http://caprt3a.blogspot.com">Menu Gallery</a></li>
<li><a href="http://caprt3a.blogspot.com">Web Design News</a></li>
<li><a href="http://caprt3a.blogspot.com">CSS Examples</a></li>
<li><a href="http://caprt3a.blogspot.com/">CSS Compressor</a></li>
<li><a href="http://caprt3a.blogspot.com">CSS Forums</a></li>
</ul>
</div>
More Detail:
Tambahkan kode CSS diatas kedalam tag <head> template anda, sedangkan kode HTML pada tag <body>.
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