Как сделать раскрывающееся меню?

Раскрывающееся меню на страницах сайтов используется для экономии пространства и логически обоснованного представления структуры веб-ресурса. Способов реализовать этот элемент много, один из наиболее простых приведен ниже.

Вам понадобится

• Базовые знания языков HTML и CSS

Инструкция

HTML-код меню использует вложенные друг в друга элементы списков (UL и LI), внутрь которых помещены ссылки на страницы. Никаких сложных конструкций он не содержит. Динамика реализована средствами CSS, блок описания которого помещен непосредственно в исходный код страницы. В нем тоже нет чего-то особенного, кроме того в тексте есть некоторые пояснения назначения тех или иных стилевых блоков.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Раскрывающееся меню * {

font-family: Verdana;

font-size: 14px;

} ul,li,a {

padding: 0;

display: block;

border: 0;

margin: 0;

} ul {

border: 1px solid #AAA;

width: 150px;

list-style: none;

background: #FFF;

} li {

background-color: #AAA;

position: relative;

z-index: 9;

padding: 1px;

}

li.folder {background-color: #AAA;}

li.folder ul {

position: absolute;

top: 5px;

left: 111px; /* для браузеров IE */

}

li.folder>ul {left: 140px;} /* для остальных браузеров */ a {

padding: 2px;

border: 1px solid #FFF;

text-decoration: none;

width: 100%; /* для браузеров IE */

color: #000;

font-weight: bold;

}

li>a {width: auto;} /* для остальных браузеров */ li a {

width: 140px;

display: block;

} li a.submenu {

background-color: yellow;

} /* Ссылки */

a:hover {

border-color: gray;

background-color: #FF0000;

color: black;

}

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 Страница

• 3. Папка

  • 3.1 Страница
  • 3.2 Страница
  • 3.3 Страница

• 4. Страница

В этот код можно добавить поддержку устаревших версий браузеров Internet Explorer - она реализована с использованием JavaScript-сценария (автор - Peter Nederlof). Вам нужно скачать файл с нужным кодом, например по этой ссылке - http://peterned.home.xs4all.nl/htc/csshover3.htc. Его надо поместить в ту же папку, где лежит основная страница. А в описание стилей основной страницы добавьте ссылку на него - ее можно разместить непосредственно после открывающего тега стилей:/* для старых браузеров IE */

body {behavior: url("csshover3.htc");}

Оцените статью!