Падащите менюта на страниците на сайта се използват за спестяване на място и осигуряване на логично представяне на структурата на уеб ресурс. Има много начини за внедряване на този елемент, един от най-простите е даден по-долу.
Необходимо е
Основни познания по езици HTML и CSS
Инструкции
Етап 1
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;
размер на шрифта: 14px;
} ul, li, a {
подплата: 0;
дисплей: блок;
граница: 0;
марж: 0;
} ul {
граница: 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 {
цвят на фона: жълт;
} / * Връзки * /
a: hover {
цвят на контура: сив;
фон-цвят: # 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 браузъри *
body {поведение: url ("csshover3.htc");}
