Вам понадобится
  • Базовые знания языков HTML и CSS
Инструкция
1
HTML-код меню использует вложенные друг в друга элементы списков (UL и LI), внутрь которых помещены ссылки на страницы. Никаких сложных конструкций он не содержит. Динамика реализована средствами CSS, блок описания которого помещен непосредственно в исходный код страницы. В нем тоже нет чего-то особенного, кроме того в тексте есть некоторые пояснения назначения тех или иных стилевых блоков.
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<meta content="text/html; charset=windows-1251" http-equiv="Content-Type" />
<title>Раскрывающееся меню</title><style type="text/css"> * {
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;} </style></head><body bgcolor="Teal"> <ul id="menu">
<li><a href="page1.0.html">1. Страница</a></li>
<li class="folder">
<a href="page2.0.html" class="submenu">2. Папка</a>
<ul>
<li><a href="page2.1.html">2.1 Страница</a></li>
<li class="folder">
<a href="page2.2.html" class="submenu">2.2 Папка</a>
<ul>
<li><a href="page2.2.1.html">2.2.1 Страница</a></li>
<li><a href="page2.2.2.html">2.2.2 Страница</a></li>
<li><a href="page2.2.3.html">2.2.3 Страница</a></li>
</ul>
</li>
<li><a href="page2.3.html">2.3 Страница</a></li>
</ul>
</li>
<li class="folder">
<a href="page3.0.html" class="submenu">3. Папка</a>
<ul>
<li><a href="page3.1.html">3.1 Страница</a></li>
<li><a href="page3.2.html">3.2 Страница</a></li>
<li><a href="page3.3.html">3.3 Страница</a></li>
</ul>
</li>
<li><a href="page4.0.html">4. Страница</a></li>
</ul></body>
</html>
3
В этот код можно добавить поддержку устаревших версий браузеров Internet Explorer - она реализована с использованием JavaScript-сценария (автор - Peter Nederlof). Вам нужно скачать файл с нужным кодом, например по этой ссылке - http://peterned.home.xs4all.nl/htc/csshover3.htc. Его надо поместить в ту же папку, где лежит основная страница. А в описание стилей основной страницы добавьте ссылку на него - ее можно разместить непосредственно после открывающего тега стилей:/* для старых браузеров IE */
body {behavior: url("csshover3.htc");}