Presentation 3 - Membuat menu menggunakan cascading style sheets (css)
Download as PPTX, PDF0 likes1,574 views
Dokumen ini menjelaskan cara membuat menu drop down menggunakan HTML dan CSS untuk halaman web. Selain itu, dokumen memberikan instruksi langkah demi langkah untuk mengatur submenu, termasuk menampilkan dan menyembunyikannya saat kursor diarahkan. Pengguna diminta untuk menyimpan semua file yang dibuat untuk digunakan dalam pertemuan selanjutnya.
Presentation 3 - Membuat menu menggunakan cascading style sheets (css)
- 1. DROP DOWN MENU DENGAN CSS
- 2. Drop down menu adalah teknik yang digunakan untuk membuat sub menu pada main menu halaman web.
- 3. Contoh Menu Drop Down:
- 4. Struktur dasar dari menu dropdown yang akan kita buat menggunakan stuktur HTML, ketik perintah berikut (simpan dengan nama mnuser.html ) :
- 5. Jalankan file mnuser.html di browser maka hasilnya akan seperti dibawah ini :
- 6. Buatlah file css dengan nama mnuser.css (simpan di satu folder dengan file mnuser.html), ketik perintah berikut :
- 7. Buka file mnuser.html, kemudian tambahkan perintah berikut : Perintah yang ditambahkan
- 8. Jalankan file mnuser.html di browser maka hasilnya akan seperti dibawah ini : Submenu
- 9. Untuk menyembunyikan ul li (submenu). Buka file mnuser.css, kemudian tambahkan perintah berikut : Perintah yang ditambahkan
- 10. Jalankan file mnuser.html di browser maka hasilnya akan seperti dibawah ini : Submenu produk (Elektronik dan Furniture) disembunyikan
- 11. Untuk membuat menu menjadi horizontal dengan display block. Buka file mnuser.css, kemudian tambahkan perintah berikut :
- 12. Jalankan file mnuser.html di browser maka hasilnya akan seperti dibawah ini :
- 13. Untuk memunculkan submenu jika kursor diarahkan ke menu utama. Buka file mnuser.css, kemudian tambahkan perintah berikut :
- 14. Jalankan file mnuser.html di browser maka hasilnya akan seperti dibawah ini : Submenu (Elektronik dan Furniture) akan muncul jika mouse diarahkan ke menu Produk
- 15. Untuk memunculkan blok jika kursor diarahkan ke menu utama. Buka file mnuser.css, kemudian tambahkan perintah berikut :
- 16. Jalankan file mnuser.html di browser maka hasilnya akan seperti dibawah ini : Jika mouse diarahkan ke menu Produk akan muncul blok
- 17. Untuk style awal seblum cursor mouse di arahkan ke menu utama. Buka file muser.css, kemudian tambahkan perintah berikut :
- 18. Jalankan file mnuser.html di browser maka hasilnya akan seperti dibawah ini : Jika mouse diarahkan ke menu produk, blok submenu yang tampil belum rata. Blok belum rata
- 19. Untuk meratakan sub menu kanan kiri. Buka file mnuser.css, kemudian tambahkan perintah berikut :
- 20. Jalankan file mnuser.html di browser maka hasilnya akan seperti dibawah ini : Blok sudah rata
- 21. Tambahkan menu dibawah ini : LOGIN seperti contoh Catatan: Simpan semua latihan yang sudah Anda buat dan jangan sampai hilang. Karena masih ada kaitannya dengan pertemuan selanjutnya..!!!!