Sayt səhifələrindəki açılır menyular yerdən qənaət etmək və veb resursun strukturunun məntiqi təqdimatını təmin etmək üçün istifadə olunur. Bu elementi tətbiq etməyin bir çox yolu var, ən sadə üsullardan biri aşağıda verilmişdir.
Vacibdir
HTML və CSS dilləri haqqında əsas biliklər
Təlimat
Addım 1
Menyunun HTML kodu içərisinə səhifələrə keçidlərin yerləşdirildiyi daxil edilmiş siyahı elementlərindən (UL və LI) istifadə edir. Heç bir kompleks quruluş içermir. Dinamika, təsvir bloku birbaşa səhifənin mənbə koduna yerləşdirilmiş CSS vasitəsi ilə həyata keçirilir. Bunun üçün də xüsusi bir şey yoxdur, bundan əlavə mətndə müəyyən stil bloklarının məqsədinin bəzi izahları var.
Addım 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitions // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Açılır menyu * {
şrift ailəsi: Verdana;
şrift ölçüsü: 14px;
} ul, li, a {
dolgu: 0;
ekran: blok;
sərhəd: 0;
margin: 0;
} ul {
sərhəd: 1px möhkəm #AAA;
genişlik: 150px;
siyahı tərzi: yox;
arxa plan: #FFF;
} li {
fon rəngi: #AAA;
mövqe: nisbi;
z-indeks: 9;
dolgu: 1px;
}
li.folder {background-color: #AAA;}
li.folder ul {
mövqe: mütləq;
üst: 5 piksel;
solda: 111 piksel; / * IE brauzerləri üçün * /
}
li.folder> ul {left: 140px;} / * digər brauzerlər üçün * / a {
dolgu: 2px;
sərhəd: 1px möhkəm #FFF;
mətn bəzəyi: yox;
genişlik: 100%; / * IE brauzerləri üçün * /
rəng: # 000;
şrift ağırlığı: qalın;
}
li> a {width: auto;} / * digər brauzerlər üçün * / li a {
eni: 140px;
ekran: blok;
} li a.submenu {
arxa rəng: sarı;
} / * Links * /
a: hover {
haşiyə rəngi: boz;
arxa rəng: # FF0000;
rəng: qara;
}
li.qovluq a: hover {
arxa rəng: # FF0000;
} / * Qovluqlar * /
ul ul, li: hover ul ul {display: none;}
li.folder: hover {z-index: 10;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. Səhifə
-
2. Qovluq
- 2.1 Səhifə
-
2.2 Qovluq
- 2.2.1 Səhifə
- 2.2.2 Səhifə
- 2.2.3 Səhifə
- 2.3 Səhifə
-
3. Qovluq
- 3.1 Səhifə
- 3.2 Səhifə
- 3.3 Səhifə
- 4. Səhifə
Addım 3
Bu kodu Internet Explorer brauzerlərinin köhnə versiyaları üçün dəstək əlavə edə bilərsiniz - JavaScript istifadə edərək həyata keçirilir (Peter Nederlof tərəfindən). Sənədi lazımi kodla yükləməlisiniz, məsələn, bu linkdən - https://peterned.home.xs4all.nl/htc/csshover3.htc. Əsas səhifə ilə eyni qovluğa yerləşdirilməlidir. Və əsas səhifənin üslublarının təsvirində ona bir keçid əlavə edin - birbaşa açılış stili etiketindən sonra yerləşdirilə bilər: / * köhnə IE brauzerləri üçün *
bədən {davranış: url ("csshover3.htc");}
