Ağaç menüsü için HTML kodu

içerik

Bir ağaç menüsü tasarlarken, geliştiricilerin bir sitenin farklı içerik bölümlerini sınıflandırması gerekir. Örneğin, bir ürün satış sitesi, ürünleri kategorilere ayırmak için içlerinde ek alt bölümleri olan her bir ürün türü için bölümlere sahip olabilir. Bazen web geliştiricileri, sitenin içeriğini düzenlemek için alt dizinleri kullanırlar; bu durumda, her dizin, menü ağacındaki daha yüksek düzeydeki bir öğeye karşılık gelebilir. Her menü öğesi en sonunda aşağıdaki örnek koddaki gibi bir HTML bağlantısı olacaktır: Giyim

Bu kod, web sitesinin kök dizininde bulunan "giyim" adında bir klasörü bağlar. Hiçbir sayfa belirtilmediğinden, bağlantı bu dizindeki dizin sayfasını açacaktır. Ağaç menüsünün kıyafet bölümünde, ürünler aşağıdaki gibi belirli sayfalara bağlanabilir: Pantolon

listeleri

HTML ağacı menüleri genellikle listeleri içerir. Aşağıdaki arama örneği, numarasız listeleri kullanarak bir menü gösterir:

• giyim
• • pantolon
  • Ceketler
• Hediyeler
• • gıda
  • Yenilik öğeleri
  • DVD'ler

Bu menüde "giyim" ve "hediyeler" için iki adet birinci seviye bölüm bulunmaktadır. Bunların her biri içinde listedeki ek öğelerdir. Listedeki her öğe karmaşık siteler için başka bir liste içerebilir, bir ağaç menüsü çeşitli düzeylerde derinlik içerebilir. Daha üst düzey bir öğeye tıklamak, kullanıcıyı sayfanın o bölümünün sayfasına götürecektir, belirli bir öğenin üzerine tıklamak sizi bir bölüm içindeki belirli bir sayfaya gönderecektir.

stil

Çoğu site kendi menülerinde stil sayfaları kullanır. CSS kodu içinde, geliştiriciler, tasarım dahil olmak üzere menünün görünümüne ve listedeki her öğenin görünür özelliklerine farklı yönler belirleyebilir. Web tarayıcıları genellikle birçok geliştiricinin göstermemeyi tercih ettiği varsayılan liste öğelerinde mermi gösterir. Aşağıdaki CSS kodu örneği şunu göstermektedir:

ul {list-style-type: none; }

Belirli bir mermi stilini seçmek için, kod aşağıdaki gibi olacaktır: ul {list-style-type: square;}

Geliştiriciler, isteğe bağlı olarak bir ağaç menüsünde farklı düzeylerdeki listelere sınıf özniteliklerini ekleyebilir ve her biri için CSS'yi uyarlayabilir.

Komut dosyası yazılıyor

Birçok web sitesi ağaç menüleriyle etkileşimi geliştirmek için JavaScript işlevlerini kullanır. Geliştiriciler, bunları kullanarak belirli öğelerin başlangıçta kullanıcıya görünmeyeceğini belirtebilir. Örneğin, en üst düzey listedeki bir öğeye tıklamak, başlangıçta dinamik görünmeye neden olabilir. JavaScript işlevleri, tarayıcının göstermesini veya gizlemesini söylemek için sunum özelliğini veya bir öğenin görünürlüğünü kullanabilir. Aşağıdaki kod, listede gizlenen bir öğenin yapılandırmasını gösterir: element.style.visibility = "hidden";

Aşağıdaki alternatif, sunu özelliğini kullanır: element.style.display = "none";