Dengan kode CSS dapat mengubah menu yang tidak enak dilihat menjadi tampilan yang sangat keren.
Yang standarnya dulu, menggunakan HTML List. Agar tidak tercampur dengan list yang lain, Nano memakai CSS class :
Contoh :
<div class="contoh">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/2010/09/template-n2y-biasa.html">Biasa</a></li>
<li><a href="/2010/09/template-n2y-eksperiment.html">Eksperiment</a></li>
<li><a href="/2010/09/template-n2y-shadow.html">Shadow</a></li>
</ul>
</div>
- Home
- Biasa
- Eksperiment
- Shadow
Sekarang hilangkan tanda lingkaran, margin, dan padding :
.contoh ul {
list-style-type:none;
margin:0;
padding:0;
}
- Home
- Biasa
- Eksperiment
- Shadow
Kode dalam contoh di atas adalah kode standar yang digunakan navigasi vertikal dan horizontal. Nama class terserah anda...
Navigasi vertikal
Selain kode standar di atas, untuk membuat navigasi vertikal memerlukan elemen a :Contoh :
.contoh li a {
display:block;
border-bottom:1px dotted yellow;
width:100px;
}
- Home
- Biasa
- Eksperiment
- Shadow
Anda bisa gunakan properti yang lain untuk menghias tampilannya.
Navigasi horizontal
Masih berlanjut dengan kode standar di atas, navigasi horizontal menggunakan daftar inline atau float.Contoh dengan inline :
.contoh li{
display:inline;
}
- Home
- Biasa
- Eksperiment
- Shadow
Contoh dengan float :
.contoh li{
float:left;
}
.contoh li a {
display:block;
width:100px;
border-bottom:1px dotted yellow;
}
- Home
- Biasa
- Eksperiment
- Shadow
Kurang lebih seperti itu dasar-dasar membuat navigasi vertikal dan horizontal.
Alhamdulillah