Сайт беттеріндегі ашылмалы мәзірлер кеңістікті үнемдеу және веб-ресурс құрылымының логикалық көрінісін қамтамасыз ету үшін қолданылады. Бұл элементті жүзеге асырудың көптеген тәсілдері бар, ең қарапайымдарының бірі төменде келтірілген.
Бұл қажетті
HTML және CSS тілдерін білу
Нұсқаулық
1-қадам
Мәзірдің HTML-кодында парақтарға сілтемелер орналастырылған тізімнің элементтері (UL және LI) қолданылады. Оның құрамында күрделі құрылымдар жоқ. Динамика CSS көмегімен жүзеге асырылады, оның сипаттама блогы парақтың бастапқы кодына тікелей орналастырылады. Мұнда да ерекше ешнәрсе жоқ, сонымен қатар мәтінде белгілі бір стиль блоктарының мақсаттары туралы бірнеше түсіндірмелер бар.
2-қадам
<! DOCTYPE html PUBLIC «- // W3C // DTD XHTML 1.0 Өтпелі // EN»
«https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
Ашылмалы мәзір * {
қаріптер тобы: Вердана;
қаріп өлшемі: 14px;
} ul, li, a {
төсеме: 0;
дисплей: блок;
шекара: 0;
маржа: 0;
} ул {
шекара: 1px қатты #AAA;
ені: 150px;
тізім стилі: жоқ;
өң: #FFF;
} li {
өң-түс: #AAA;
позиция: салыстырмалы;
z-индексі: 9;
төсеме: 1px;
}
li.folder {background-color: #AAA;}
li.folder ul {
позиция: абсолютті;
жоғарғы: 5px;
сол жақта: 111px; / * IE браузерлері үшін * /
}
li.folder> ul {left: 140px;} / * басқа браузерлер үшін * / a {
төсеме: 2px;
шекара: 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 {display: none;}
li.folder: hover {z-index: 10;}
li: hover ul, li: hover li: hover ul {display: block;}
- 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 браузерлері үшін *
body {behavior: url («csshover3.htc»);}
