Site sayfalarındaki açılır menüler, yerden tasarruf etmek ve bir web kaynağının yapısının mantıklı bir sunumunu sağlamak için kullanılır. Bu öğeyi uygulamanın birçok yolu vardır, en basitlerinden biri aşağıda verilmiştir.
Bu gerekli
Temel HTML ve CSS dilleri bilgisi
Talimatlar
Aşama 1
Menünün HTML kodu, içlerine sayfa bağlantılarının yerleştirildiği iç içe liste öğelerini (UL ve LI) kullanır. Karmaşık yapılar içermez. Dinamikler, açıklama bloğu doğrudan sayfanın kaynak koduna yerleştirilen CSS aracılığıyla uygulanır. Bu konuda özel bir şey de yok, ayrıca metin belirli stil bloklarının amacına ilişkin bazı açıklamalar içeriyor.
Adım 2
<! DOCTYPE html KAMU "- // W3C // DTD XHTML 1.0 Geçiş // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Aşağıya doğru açılan menü * {
yazı tipi ailesi: Verdana;
yazı tipi boyutu: 14 piksel;
} ul, li, bir {
dolgu: 0;
Ekran bloğu;
sınır: 0;
kenar boşluğu: 0;
} ul {
kenarlık: 1 piksel düz #AAA;
genişlik: 150 piksel;
liste stili: yok;
arka plan: #FFF;
} li {
arka plan rengi: #AAA;
pozisyon: göreceli;
z-endeksi: 9;
dolgu: 1 piksel;
}
li.folder {arka plan rengi: #AAA;}
li.klasör ul {
pozisyon: mutlak;
üst: 5 piksel;
sol: 111 piksel; / * IE tarayıcıları için * /
}
li.folder> ul {sol: 140px;} / * diğer tarayıcılar için * / a {
dolgu: 2 piksel;
kenarlık: 1 piksel düz #FFF;
metin-dekorasyon: yok;
genişlik: %100; / * IE tarayıcıları için * /
renk: # 000;
yazı tipi ağırlığı: kalın;
}
li> a {width: auto;} / * diğer tarayıcılar için * / li a {
genişlik: 140 piksel;
Ekran bloğu;
} li a.altmenü {
arka plan rengi: sarı;
} / * Bağlantılar * /
a: üzerine gelin {
sınır rengi: gri;
arka plan rengi: # FF0000;
siyah renk;
}
li.folder a: üzerine gelin {
arka plan rengi: # FF0000;
} / * Klasörler * /
ul ul, li: hover ul ul {ekran: yok;}
li.folder: üzerine gelin {z-endeksi: 10;}
li: vurgulu ul, li: vurgulu li: vurgulu ul {ekran: blok;}
- 1. Sayfa
-
2. Klasör
- 2.1 Sayfa
-
2.2 Klasör
- 2.2.1 Sayfa
- 2.2.2 Sayfa
- 2.2.3 Sayfa
- 2.3 Sayfa
-
3. Klasör
- 3.1 Sayfa
- 3.2 Sayfa
- 3.3 Sayfa
- 4. Sayfa
Aşama 3
Bu koda Internet Explorer tarayıcılarının eski sürümleri için destek ekleyebilirsiniz - JavaScript (Peter Nederlof tarafından) kullanılarak uygulanır. Dosyayı gerekli kodla, örneğin bu bağlantıdan indirmeniz gerekir - https://petterned.home.xs4all.nl/htc/csshover3.htc. Ana sayfa ile aynı klasöre yerleştirilmelidir. Ve ana sayfanın stillerinin açıklamasında, ona bir bağlantı ekleyin - açılış stili etiketinin hemen sonrasına yerleştirilebilir: / * eski IE tarayıcıları için *
gövde {davranış: url ("csshover3.htc");}
