Kode HTML untuk menu pohon

Konten

Saat mendesain menu pohon, pengembang perlu mengkategorikan bagian konten yang berbeda dari suatu situs. Misalnya, situs penjualan produk dapat memiliki bagian untuk setiap jenis produk dengan subbagian tambahan di dalamnya untuk membagi produk ke dalam kategori. Terkadang, pengembang web menggunakan subdirektori untuk mengatur konten situs, dalam hal mana setiap direktori bisa sesuai dengan elemen tingkat yang lebih tinggi dalam struktur menu. Setiap item menu pada akhirnya akan menjadi tautan HTML, seperti dalam kode contoh berikut: Pakaian

Kode ini menautkan folder bernama "pakaian", yang terletak di direktori akar situs web. Karena tidak ada halaman yang diindikasikan, tautan akan membuka halaman indeks di direktori itu. Di bagian pakaian menu pohon, item dapat ditautkan ke halaman tertentu, sebagai berikut: Celana panjang

Daftar

Menu pohon HTML biasanya melibatkan daftar. Contoh pemanggilan berikut menunjukkan menu menggunakan daftar yang tidak diberi nomor:

• Pakaian
• • Celana panjang
  • Jaket
• Hadiah
• • Makanan
  • Barang Baru
  • DVD

Menu ini berisi dua bagian tingkat pertama untuk "pakaian" dan "hadiah". Dalam masing-masing ini adalah item tambahan dalam daftar. Setiap item dalam daftar dapat berisi daftar lain untuk situs yang rumit, menu pohon dapat melibatkan beberapa level kedalaman. Mengklik pada elemen tingkat yang lebih tinggi akan membawa pengguna ke halaman dari bagian halaman tersebut, mengklik item tertentu akan mengirim Anda ke halaman tertentu dalam suatu bagian.

Gaya

Sebagian besar situs menggunakan style sheet di menu mereka. Dalam kode CSS, pengembang dapat mendikte aspek yang berbeda untuk tampilan menu, termasuk desain, serta karakteristik yang terlihat dari setiap item dalam daftar. Browser web biasanya menampilkan butir dalam daftar item default, yang banyak pengembang pilih untuk tidak ditampilkan. Contoh kode CSS berikut menunjukkan ini:

ul {list-style-type: none; }

Untuk memilih gaya peluru tertentu, kodenya adalah sebagai berikut: ul {list-style-type: square;}

Pengembang dapat secara opsional menambahkan atribut kelas ke daftar pada tingkat yang berbeda dalam menu pohon, mengadaptasi CSS untuk masing-masing.

Menulis naskahnya

Banyak situs web menggunakan fungsi JavaScript untuk meningkatkan interaktivitas dengan menu pohon. Dengan menggunakannya, pengembang dapat menentukan bahwa barang-barang tertentu tidak terlihat oleh pengguna pada awalnya. Misalnya, mengeklik item di daftar tingkat teratas dapat menyebabkan awal untuk muncul secara dinamis. Fungsi JavaScript dapat menggunakan properti presentasi atau visibilitas elemen untuk memberi tahu browser untuk ditampilkan atau disembunyikan. Kode berikut menunjukkan konfigurasi item dalam daftar yang tersembunyi: element.style.visibility = "hidden";

Alternatif berikut menggunakan properti presentasi: element.style.display = "none";