Kali ini kita akan mencoba membuat menu dropdown sederhana dengan menggunakan CSS. Menu dropdown ini berfungsi ketika kita membutuhkan sebuah sub menu untuk menu utama. Kira-kira seperti ini menu dropdown yang akan saya bikin. Seperti ini tampilannya...
Pertama kita membutuhkan sebuah file CSS dengan nama gaya.css Isi file-nya sebagai seperti ini
ul{
margin: 0
padding: 0
list-style: none
}
ul li{
position: relative
float: left
width: 120px
}
li ul{
position: absolute
top: 30px
display: none
}
ul li a{
display: block
text-decoration: none
line-height: 20px
color: white
padding: 5px
background: black
margin: 0
text-align: center
font-family: Arial Helvetica
}
ul li a:hover{
background: b5001F (Bisa di tambahkan Pagar)
}
li:hover ul-koma- li.hover ul{
display: block
}
margin: 0
padding: 0
list-style: none
}
ul li{
position: relative
float: left
width: 120px
}
li ul{
position: absolute
top: 30px
display: none
}
ul li a{
display: block
text-decoration: none
line-height: 20px
color: white
padding: 5px
background: black
margin: 0
text-align: center
font-family: Arial Helvetica
}
ul li a:hover{
background: b5001F (Bisa di tambahkan Pagar)
}
li:hover ul-koma- li.hover ul{
display: block
}
Dapat dilihat pada kode diatas ada beberapa format CSS yang mengatur tampilan tag <ul> dan <li> dimana tag-tag tersebut berfungsi untuk mengatur tampilan list menu.
Setelah itu buat sebuah buat sebuah file html dengan nama Home.html untuk menampilan style menu pada file CSS yang tadi dibuat. lsi file-nya sebagai seperti ini...
<html>
<head>
<link rel='stylesheet' type='text/css' href='gaya.css'/>
</head>
<body>
<ul>
<li><a href=>Menu 1</a></li>
<li><a href=>Menu 2</a>
<ul>
<li><a href=>Submenu 2A</a></li>
<li><a href=>Submenu 2B</a></li>
</ul>
</li>
<li><a href=>Menu 3</a>
<ul>
<li><a href=>Submenu 3A</a></li>
<li><a href=>Submenu 3B</a></li>
<li><a href=>Submenu 3C</a></li>
</ul>
</li>
<li><a href=>Menu 4</a>
<ul>
<li><a href=>Submenu 4A</a></li>
<li><a href=>Submenu 4B</a></li>
<li><a href=>Submenu 4C</a></li>
<li><a href=>Submenu 4D</a></li>
</ul>
</li>
</ul>
</body>
</html>
Tidak ada komentar:
Posting Komentar