Membuat Menu dropdown dengan CSS
Kode HTML untuk listnya
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="">About Us</a>
<ul>
<li><a href="">The Team</a></li>
<li><a href="">History</a></li>
<li><a href="">Vision</a></li>
</ul>
</li>
<li><a href="">Products</a>
<ul>
<li><a href="">Download</a></li>
<li><a href="">Article</a></li>
</ul>
</li>
<li><a href="">Contact</a></li>
</ul>
]
Kode CSS untuk sylenya
ul {
list-style-type:none;
background-color:#4C787E;
margin: 0;
padding :0;
}
li ul{
display: none;
}
ul li{
float: left;
display: block;
position: relative;
}
ul li a{
display: block;
text-decoration:none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
border-left:1px;
background: #616D7E;
margin-left: 2px;
white-space: nowrap;
}
li a:hover{
background-color:#4C787E;
}
li:hover ul{
display: block;
float: none;
position: absolute;
}
li:hover li{
display: block;
float: none;
{
Untuk memanggilnya di html anda ketikkan baris berikut di bagian tag <head> anda
<link rel="stylesheet" type="text/css"href="almat_anda_menyimpan/nama_fileanda.css">
Untuk penjelasannya stlye css saya mungkin akan jelasin beberapa saja, karena jika sya jelasin semuanya bisa banyak buanget ne... :-p
untuk bagian taq <ul> berarti bagian <ul> di html akan di isi dengan style yang yang ditandai dengan ul di css.
list-style-type
Untuk memberi style pada list yang kita buat.Tedapat macam style type untuk list tersebut, diantaranya: square(style kotak), circle(style lingkaran),upper-alpha(untuk huruf besar),lower-alpha(untuk huruf kecil).Karena kali ini saya menggunakan property "none" berarti saya tidak menggunakan style apapun untuk list yang saya buat yang nantinya untuk membuat menu kita.
background-color
Untuk memberikan warna background untuk style yang kita buat.untuk memberikan warnanya kita dapat menggunakan warna-warna dalam bentuk hexa disamping warna-warna seperti blue, red, dll.misalnya: background-color:red,background-color: #ffffff; warna #ffffff berarti kita memberikan warna putih untuk backgroundnnya.
text-decoration
Untuk memberikan style untuk link di taq <a>.Terdapat beberapa style juga untuk text-decoration, diantaranya :underline (untuk garis bawah),line-through(garis melintasi huruf), blink(huruf berkedip), overline(garis di atas huruf).
float
Untuk mengatur posisi.Terdapat beberapa property yang biasanya digunakan seperti: left, right, dll
border
Untuk mengatur batas.terdapat beberapa property seperti border-left(border kiri), border-right(border kanan), border-top(border atas).Jika kita ingin mengatur border kanan, atas, kiri, bawah secara langsung tanpa menulis satu-satu(border-right, border-left,border-top, border-bottom) kita langsung dapat menggunakan properti :
border: 2px 3px 2px 3px
Maksudnya border tersebut di urut dari atas(2px), kanan(3px), bawah(2px), dan kiri(3px).
a: hover dan li: hover
Digunakan untuk mengisi style ketika taq<a> atau taq<li> dilewati oleh mouse.
ul li
Berarti style tersebut untuk taq <li> yang ada di dalam <ul>.
ul li a
Berarti stlye tersebut untuk taq <a> yang digunakan <li> yang berada di dalam <ul>.
Bingung?
----------------------------------------
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="">About Us</a>
<ul>
<li><a href="">The Team</a></li>
----------------------------------------
Coba kita liat sedikit kode html kita, tedapat taq <li> di dalam taq <ul>.Dan di dalam li tersebut tedapat taq<a>.
Jadi berarti untuk style
Syle
----------------------------------------
ul li a{
display: block;
text-decoration:none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
----------------------------------------
akan mengisi taq <li> du dalam <ul> yang tedapat taq <a>.
Hasilnya seperti gambar di atas :)
Wah, tampaknya sekian dulu deh tulisan saya.Soalnya nulisnya dah sambil ngantuk-ngantuk ne...hehehe
Moga membantu :)
test coment ah..
Posted by adromeda on May 24, 2010 at 03:17 PM WIT #
yoi, test juga
Posted by troya on May 24, 2010 at 03:18 PM WIT #