Membuat menu horizontal dengan CSS
Untuk membuat menu
dengan CSS kita memerlukan daftar menu
yang dibuat dengann HTML.
Tag HTML yang digunakan untuk membuat menu adalah UL dan di
dalam UL harus ada Li
Berikut ini contoh kode HTML yang akan didesain oleh CSS:
Pertama dulu kita buat desain html di bagian Body
<body >
<div id="widodo">
<ul>
<li><a href="#">
home</a></li>
<li> <a href="#">menu1</a>
<ul> <li><a
href="#">submenu1</a>
<li><a
href="#">submenu2</a></li>
<li><a
href="#">submenu3</a></li></ul></li>
<li> <a href="#">menu2</a>
<ul> <li><a
href="#">submenu1</a></li>
<li><a
href="#">submenu2</a></li>
<li><a
href="#">submenu3</a></li></ul></li>
<li> <a href="#">menu3</a>
<ul> <li><a href="#">submenu1</a></li>
<li><a
href="#">submenu2</a></li>
<li><a
href="#">submenu3</a></li></ul> </li>
</ul>
</body>
Kode tersebut akan menghasilkan tampilan sbb:
Dengan tampilan tersebut maka kita memerlukan css untuk
mendesainnya
Berikut tahapannya di CSS
#widodo {
position: relative;
width: 100%;
height: 40px;
background: #009999;
border: 1px solid #000000;
}
#widodo ul{
margin: 0;
padding: 0;
list-style: none;
}
Maka akan memunculkan gambar sbb:
Untuk mebuat tulisan menunya menjadi horizontal tambah kode
berikut
#widodo ul li{
position:
relative;
float: left;
}
#widodo ul li a{
display:
block;
text-decoration:
color: #ffffff;
padding: 10px;
float: left;
border-right:
1px solid #000000;
}
#widodo ul li a:hover{
background-color: #000666;
}
Maka menghasilkan desain sbb:
Untuk mendesain diperlukan pemahaman tentang penggunaan kode
kode CSS yang akan dipakai
Apabila dikembangkan lagi akan menghasilkan menu yang
di innginkan
Berhubung kodenya masih banyak dan agak capek ngetiknya maka
gambaran akhirnya sbb dan bisa di taruh di blog maupun lainnya:
semoga bermanfaat heee,,,
Tidak ada komentar:
Posting Komentar