Membuat Sub Menu dengan CSS
- Minggu, 17 Juni 2012
- Tutorial IT
- Cetak
Halo Sahabat Pintar!
Jumpa lagi di kolom tutorial IT! Kali ini kita akan belajar untuk membuat sub menu pada web menggunakan CSS. Bagi yang belum tahu, silakan baca artikel sebelumnya di sini tentang Dasar CSS dan Cara Penggunaan CSS.
Nah, sekarang kita akan belajar membuat sub menu dengan menggunakan HTML dan CSS.
HTML menu kondisi awal, di bagian body:
<ul>
<li><a href=”URL 1″>MENU 1</a>
<ul>
<li><a href=”URL sub 1″>Sub menu 1</a></li>
<li><a href=”URL sub 2″>Sub menu 2</a></li>
<li><a href=”URL sub 3″>Sub menu 3</a></li>
</ul>
</li>
<li><a href=”URL 2″>MENU 2</a></li>
<li><a href=”URL 3″>MENU 3</a></li>
</ul>
bentuknya seperti
Untuk menghilangkan list style pada menu drop down, di bagian title, tambahkan script CSS berikut:
#menuku ul {
list-style: none;
}
akan menjadi seperti
Untuk membuat menu-menu tersebut tampil secara horizontal dari kiri:
#menuku li {
float: left;
}
sehingga menjadi seperti:
Karena kita ingin sub menu muncul hanya ketika pointer berada diatas menu utama, maka kita perlu menyembunyikan bagan list dari sub menu tersebut.
#menuku ul ul {
visibility:hidden;
width:100px;
}
Agar sub menu tersebut muncul ketika menu utama disorot, maka kita buat struktur CSS seperti berikut:
#menuku ul li:hover ul,
#menuku ul a:hover ul{
visibility:visible;
}
Kita akan mengatur sedikit tampilan dari menu-menu tersebut agar terlihat lebih menarik
#menuku li a {
background-color:#000000;
height: 2em;
width: 149px;
display: block;
border: 0.1em solid #dcdce9;
color: #ffffff;
text-decoration: none;
text-align: center;
}
Download File HTMLnya plus CSS di sini
Nah, seru kan? Simak terus ya Tutorial IT di LKP KEMBAR!
Jika Sahabat Pintar berminat untuk mengikuti workshop/kursus komputer, baik pemrograman web, desain (Corel, Photoshop, Dreamweaver, Flash), ms office, page maker, in design, blog, dsb, silakan hubungi:
JL. Solo-Yogya km.30 Jombor Ceper Klaten
Telp (0272) 3154 777
5 KEUNGGULAN LKP KEMBAR:
- Pengajar yang ramah dan berpengalaman
- Harga terjangkau dan bisa dicicil
- Waktu yang fleksibel
- Sertifikat berizin resmi Dinas Pendidikan dan Dinas Sosial Tenaga Kerja dan Transmigrasi (Izin Dinas Pendidikan nomor 602/LKP/11.2012, dan Izin Dinas Sosial Tenaga Kerja dan Transmigrasi Nomor: 563/2424.A/14.)
- Dijamin BISA!!! Untuk semua umur dan kalangan.
Jangan lupa..ada program seru IT CAMP loh selama liburan, 2-7 Juli 2012 pk 09.00-10.30..di mana kita bisa membuat berbagai kreasi IT menarik! 🙂
