Сайттын баракчаларында ачылуучу менюлар мейкиндикти үнөмдөө жана веб-ресурстун структурасынын логикалык презентациясын камсыз кылуу үчүн колдонулат. Бул элементти жүзөгө ашыруунун көптөгөн жолдору бар, эң жөнөкөйлөрүнүн бири төмөндө келтирилген.
Ал зарыл
HTML жана CSS тилдерин билүү
Нускамалар
1 кадам
Менюнун HTML коду ичине баракчаларга шилтемелер жайгаштырылган тизме элементтерин (UL жана LI) колдонот. Анын курамында эч кандай татаал түзүлүш жок. Динамика CSSтин жардамы менен ишке ашырылат, анын сүрөттөө блогу түздөн-түз барактын баштапкы кодуна жайгаштырылат. Бул жерде өзгөчө эч нерсе деле жок, текстте белгилүү бир стилдик блоктордун максаттарына байланыштуу айрым түшүндүрмөлөр бар.
2-кадам
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitions // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ачылуучу меню * {
font-family: Verdana;
ариптин көлөмү: 14px;
} ul, li, a {
толтуруу: 0;
дисплей: блок;
чек: 0;
margin: 0;
} ul {
чек: 1px катуу #AAA;
туурасы: 150px;
тизме стили: жок;
background: #FFF;
} li {
background-color: #AAA;
кызмат: салыштырмалуу;
z-индекс: 9;
толтуруу: 1px;
}
li.folder {background-color: #AAA;}
li.folder ul {
абалы: абсолюттук;
top: 5px;
солдо: 111px; / * IE браузерлери үчүн * /
}
li.folder> ul {left: 140px;} / * башка браузерлер үчүн * / a {
толтуруу: 2px;
чек: 1px катуу #FFF;
текстти жасалгалоо: жок;
туурасы: 100%; / * IE браузерлери үчүн * /
color: # 000;
font-weight: bold;
}
li> a {width: auto;} / * башка браузерлер үчүн * / li a {
туурасы: 140px;
дисплей: блок;
} li a.submenu {
фон-түс: сары;
} / * Шилтемелер * /
a: hover {
чек ара түсү: боз;
background-color: # FF0000;
Кара түс;
}
li.folder a: hover {
background-color: # 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 Page
-
3. Папка
- 3.1 Баракча
- 3.2 бет
- 3.3 бет
- 4. Баракча
3-кадам
Бул кодго Internet Explorer браузерлеринин эски версияларына колдоо көрсөтсөңүз болот - ал JavaScriptтин жардамы менен ишке ашырылат (Питер Недерлоф тарабынан). Сиз файлды керектүү код менен жүктөп алышыңыз керек, мисалы, ушул шилтемеден - https://peterned.home.xs4all.nl/htc/csshover3.htc. Ал негизги баракча менен бир папкага жайгаштырылышы керек. Ал эми башкы барактын стилдеринин сүрөттөмөсүндө ага шилтеме кошуңуз - аны түздөн-түз стилдин ачылышынан кийин койсоңуз болот: / * эски IE браузерлери үчүн *
body {behavior: url ("csshover3.htc");}
