• ..


Mendesain Menu (Vertikal) dengan CSS

Untuk mendesain menu dengan CSS kita memerlukan daftar menu yang dibuat dengan HTML.
Tag HTML yang digunakan untuk membuat menu adalah ul. Di bawah ini adalah kode HTML
dari menu yang akan didesain oleh CSS.

<ul>
<li><a href="/">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>

Kode tersebut akan menghasilkan tampilan sbb:

  • Home
  • About Us
  • Contact Us
Untuk mendesain menu tersebut kita harus memberi id terlebih dahulu untuk membedakan
dengan daftar ul yang lain, sehingga kode di atas menjadi sbb:


<ul id=”nav”>
<li><a href="/">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>



Setelah diberi id, kita bisa memilih menu tersebut dengan CSS dan mulai mendesainnya. Kode
CSS nya adalah sebagai berikut:

<style>
#nav {
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
background-color: #663300;
}
</style>

Dengan kode diatas maka menu tidak akan menampilkan bullet (dengan kode list-style-type:
none), batas dan padding akan menjadi 0, lebar 180px, dan akan menampilkan warna latar
cokelat. 


Setelah itu kita akan mendesain tiap menu item, yang mana tag dari item-item tersebut adalah
<li></li>. Selain tag li, kita juga akan mendesain tag <a></a> (link) sehingga area yang bisa
diklik menjadi lebih besar (tidak hanya teks nya saja, melainkan seluruh kotak).
Kita perlu menambahkan kode CSS lagi untuk mendesainnya. 

Kode CSS nya adalah sbb:
#nav li {
margin: 0;
padding: 0;
}
#nav a {
display: block; /* untuk memperbesar area klik karena tag a defaultnya inline
*/
color: #FFF;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom:1px solid #FFF;
}



#selamat mencoba :)