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>
Jadinya :
Sekarang hilangkan tanda lingkaran, margin, dan padding :
.contoh ul {
list-style-type:none;
margin:0;
padding:0;
}
Jadinya :
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;
}
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;
}
Contoh dengan float :
.contoh li{
float:left;
}
.contoh li a {
display:block;
width:100px;
border-bottom:1px dotted yellow;
}
Kurang lebih seperti itu dasar-dasar membuat navigasi vertikal dan horizontal.
Alhamdulillah
1 comments:
thanks ya bermanfaat banget ....
Posting Komentar