Կայքի էջերում բացվող ընտրացանկերը օգտագործվում են տարածք խնայելու և վեբ-ռեսուրսի կառուցվածքի տրամաբանական ներկայացում ապահովելու համար: Այս տարրը կյանքի կոչելու բազմաթիվ եղանակներ կան, ստորև բերված է ամենապարզներից մեկը:
Դա անհրաժեշտ է
HTML և CSS լեզուների հիմնական գիտելիքներ
Հրահանգներ
Քայլ 1
Theանկի HTML կոդն օգտագործում է տեղադրված ցուցակի տարրեր (UL և LI), որոնց ներսում տեղադրվում են հղումներ դեպի էջեր: Այն չի պարունակում որևէ բարդ կառուցվածք: Դինամիկան իրականացվում է CSS- ի միջոցով, որի նկարագրության բլոկը տեղադրվում է անմիջապես էջի սկզբնաղբյուրում: Դրանում նույնպես առանձնահատուկ բան չկա, բացի այդ, տեքստը պարունակում է որոշակի ոճային բլոկների նպատակի որոշ բացատրություններ:
Քայլ 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Բացվող ընտրացանկ * {
տառատեսակ-ընտանիք `Verdana;
տառատեսակի չափը ՝ 14 հատ;
} ուլ, լի, ա {
լիցքավորում ՝ 0;
ցուցադրում ՝ բլոկ;
եզրագիծ ՝ 0;
լուսանցք ՝ 0;
} ul {
եզրագիծ ՝ 1px պինդ #AAA;
լայնությունը `150px;
ցուցակի ոճ `ոչ մեկը;
ֆոն ՝ #FFF;
} լի {
ֆոն-գույն ՝ #AAA;
դիրքը ՝ հարաբերական;
z- ինդեքսը `9;
լիցքավորում ՝ 1 հատ;
}
li.folder {background-color: #AAA;}
լի. թղթապանակ ul {
դիրքը ՝ բացարձակ;
վերև ՝ 5 հատ;
ձախ: 111px; / * IE բրաուզերների համար * /
}
li.folder> ul {ձախ: 140px;} / * այլ զննարկիչների համար * / a {
լիցքավորում ՝ 2 հատ;
եզրագիծ ՝ 1px պինդ #FFF;
տեքստային զարդարանք. ոչ մեկը;
լայնությունը `100%; / * IE բրաուզերների համար * /
գույնը `# 000;
տառատեսակի քաշը `համարձակ;
}
li> a {width: auto;} / * այլ զննարկիչների համար * / li a {
լայնությունը `140px;
ցուցադրում ՝ բլոկ;
} li a.submenu {
ֆոնային գույն ՝ դեղին;
} / * Հղումներ * /
ա: սավառնել {
սահմանի գույնը `մոխրագույն;
ֆոնային գույն ՝ # FF0000;
գույնը `սև;
}
li.folder a: hover {
ֆոնային գույն ՝ # FF0000;
} / * Թղթապանակներ * /
ul ul, li: hover ul ul {ցուցադրում ՝ չկա;}
li.folder: hover {z-index: 10;}
li: hover ul, li: hover li: hover ul {ցուցադրում: բլոկ;}
- 1. էջ
-
2. Թղթապանակ
- 2.1 էջ
-
2.2 Թղթապանակ
- 2.2.1 Էջ
- 2.2.2 Էջ
- 2.2.3 Էջ
- 2.3 էջ
-
3. Թղթապանակ
- 3.1 էջ
- 3.2 էջ
- 3.3 էջ
- 4. էջ
Քայլ 3
Այս կոդին կարող եք աջակցություն ավելացնել Internet Explorer բրաուզերների հին տարբերակներին. Այն իրականացվում է JavaScript- ի միջոցով (Peter Nederlof): Դուք պետք է ներբեռնեք ֆայլը պահանջվող կոդով, օրինակ, այս հղումից - https://peterned.home.xs4all.nl/htc/csshover3.htc: Այն պետք է տեղադրվի հիմնական թղթապանակի նույն թղթապանակում: Իսկ հիմնական էջի ոճերի նկարագրության մեջ դրան հղում ավելացրեք. Այն կարող է տեղադրվել անմիջապես բացման ոճի հատկորոշիչից հետո. / * Հին IE բրաուզերների համար *
մարմին {վարքագիծ ՝ url ("csshover3.htc");}
