Sekarang bagaimana kalo kita ingin membuat menu horisontal hanya dengan
menggunakan link biasa? CSS mempunyai solusinya yaitu dengan memanfaat property
display yang diberi nilai inline (pada definition style #nav ul li).
Kode HTML:
<HTML>
<HEAD>
<TITLE>Menu Elegan</TITLE>
<STYLE type="text/css">
#nav h1 {
display: none;}
<HEAD>
<TITLE>Menu Elegan</TITLE>
<STYLE type="text/css">
#nav h1 {
display: none;}
#nav ul {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif; }
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif; }
#nav ul li {
list-style: none;
margin: 0;
display: inline; }
list-style: none;
margin: 0;
display: inline; }
#nav ul li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;}
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;}
#nav ul li a:link {
color: #448;}
color: #448;}
#nav ul li a:visited {
color: #667;}
color: #667;}
#nav ul li a:link:hover, #nav ul li a:visited:hover {
color: #000;
background: #AAE;
border-color: #227;}
color: #000;
background: #AAE;
border-color: #227;}
#nav ul li a#current {
background: white;
border-bottom: 1px solid white;}
</STYLE>
</HEAD>
<BODY>
<DIV id="nav">
<H1>Navigasi:</H1>
<UL>
<LI><A href="/">Beranda</A></LI>
<LI><A href="/">Tentang Kami</A></LI>
<LI><A href="/">Produk</A></LI>
<LI><A href="/">Layanan</A></LI>
<LI><A href="/">Kontak Kami</A></LI>
</UL>
</DIV>
</BODY>
</HTML>
background: white;
border-bottom: 1px solid white;}
</STYLE>
</HEAD>
<BODY>
<DIV id="nav">
<H1>Navigasi:</H1>
<UL>
<LI><A href="/">Beranda</A></LI>
<LI><A href="/">Tentang Kami</A></LI>
<LI><A href="/">Produk</A></LI>
<LI><A href="/">Layanan</A></LI>
<LI><A href="/">Kontak Kami</A></LI>
</UL>
</DIV>
</BODY>
</HTML>
Hasil yang diperlihatkan browser:
Download File Lengkapnya Klik Disini
0 komentar:
Posting Komentar