Weblog of Novia Agustiar Rahmat » Navigasi http://opik.unitiga.com Selalu rindu akan baris-baris code Tue, 31 May 2011 05:05:49 +0000 en hourly 1 Membuat Navigasi Interaktif Menggunakan CSS http://opik.unitiga.com/2008/01/05/membuat-navigasi-interaktif-menggunakan-css/ http://opik.unitiga.com/2008/01/05/membuat-navigasi-interaktif-menggunakan-css/#comments Sat, 05 Jan 2008 00:53:45 +0000 opik http://opik.unitiga.com/2008/01/05/membuat-navigasi-interaktif-menggunakan-css/ Untuk membuat sebuah navigasi/menu yang interaktif tidak melulu harus dilakukan dengan animasi flash atau dengan menggunakan kombinasi 2 image yang berbeda.
Dengan memanfaatkan kemampuan CSS (Cascading Style Sheets) yang maha dahsyat, kita dapat membuat sebuah navigasi yang cantik.

Berikut contoh sederhana mempercantik navigasi menggunakan CSS.

<html>
<head>
<title>Tes Menu</title>
<style type="text/css">
#menu {
padding: 0px;
background: #000;
float: left;
margin: 0px;
width: 550px;
}
#menu ul {
padding: 0px;
margin: 0px;
}
#menu ul li {
padding: 0px;
display: block;
float: left;
margin: 0px;
font: 11px/30px Tahoma;
list-style-type: none;
text-align: center;
}
#menu li a {
display: block;
width: 110px;
color: #fff;
text-decoration: none;
border-bottom-style: double
}
#menu LI#active {
background: #0033cc;
color: #000;
}
#menu LI#active A {
background: #0033cc;
color: #000;
}
#menu A:hover {
background: #99cc00;
color: #fff;
border-bottom-style: none;
}
</style>
</head>
<body>
<div id=menu>
<ul>
<li><a href="#">Menu Satu</a></li>
<li><a href="#">Menu Dua</a></li>
<li><a href="#">Menu Tiga</a></li>
<li><a href="#">Menu Empat</a></li>
<li><a href="#">Menu Lima</a></li>
</ul>
</div>
</body>
</html>

Selamat mencoba!
PS: Banyak sekali situs yang menyediakan tutorial gratis tentang css. Coba googling saja dengan kata kunci “CSS Tutorial”.

]]> http://opik.unitiga.com/2008/01/05/membuat-navigasi-interaktif-menggunakan-css/feed/ 0