Как сделать подменю
- Меню с выпадающими разделами подменю: структура и преимущества
- Пример реализации меню с выпадающими разделами
- Использование опции поддержки устаревших браузеров
- Добавление дополнительного файла csshover.htc
Меню с выпадающими разделами подменю: структура и преимущества
Меню с выпадающими разделами подменю - это удобный инструмент, который используется при верстке сайтов для наглядного представления структуры разделов и подразделов, при этом сэкономив место на странице. Этот механизм относительно прост в реализации и может быть легко встроен в веб-страницу.
Пример реализации меню с выпадающими разделами
Ниже приведен полный исходный код страницы, который демонстрирует простое выпадающее меню с подразделами. Описание стилей размещено непосредственно в тексте страницы. Этот вариант реализации меню не требует сложных конструкций и может быть легко понят и изменен.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Простое выпадающее меню с подразделами</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
* { font-family: arial; font-size: 16px; }
/* для старых браузеров IE */
body {behavior: url("csshover.htc");}
ul,li,a { display: block; margin: 0; padding: 0; border: 0; }
ul { width: 150px; border: 1px solid silver; background: white; list-style: none; }
li { position: relative; padding: 1px; background-color: silver; z-index: 9; }
li.folder {background-color: silver;}
li.folder ul { position: absolute; left: 111px; /* только для IE */ top: 5px; }
li.folder>ul {left: 140px;} /* для остальных */
a { padding: 2px; border: 1px solid white; text-decoration: none; color: Black; font-weight: bold; width: 100%; /* для IE */ }
li>a {width: auto;} /* для остальных */
li a { display: block; width: 140px; }
li a.submenu { background-color: yellow; }
/* Главы */
a:hover { border-color: gray; background-color: red; color: black; }
li.folder a:hover { background-color: red; }
/* Разделы */
li.folder:hover {z-index: 10;}
ul ul, li:hover ul ul {display: none;}
li:hover ul, li:hover li:hover ul {display: block;}
</style>
</head>
<body bgcolor="Teal">
<ul id="menu">
<li><a href="#">1. Глава</a></li>
<li class="folder">
<a href="#" class="submenu">2. Раздел</a>
<ul>
<li><a href="#">2.1 Глава</a></li>
<li class="folder">
<a href="#" class="submenu">2.2 Раздел</a>
<ul>
<li><a href="#">2.2.1 Глава</a></li>
<li><a href="#">2.2.2 Глава</a></li>
<li><a href="#">2.2.3 Глава</a></li>
</ul>
</li>
<li><a href="#">2.3 Глава</a></li>
</ul>
</li>
<li class="folder">
<a href="#" class="submenu">3. Раздел</a>
<ul>
<li><a href="#">3.1 Глава</a></li>
<li><a href="#">3.2 Глава</a></li>
<li><a href="#">3.3 Глава</a></li>
</ul>
</li>
<li><a href="#">4. Глава</a></li>
</ul>
</body>
</html>
Использование опции поддержки устаревших браузеров
Если у вас есть желание использовать опцию поддержки уже устаревших модификаций браузеров, то в блок описания стилей следует добавить дополнительную строку. Это позволит вашему меню работать корректно в старых версиях браузеров Internet Explorer.
<style type="text/css">
/* для старых браузеров IE */
body {behavior: url("csshover.htc");}
</style>
Добавление дополнительного файла csshover.htc
Чтобы ваше меню работало полностью, необходимо создать отдельную страницу под названием csshover.htc и поместить ее в ту же директорию, где находится основная страница. Этот файл содержит скрипт, который обеспечивает поддержку выпадающего меню в старых браузерах.
В итоге, меню с выпадающими разделами подменю является эффективным способом организации информации на веб-странице. Оно позволяет удобно представить структуру разделов и подразделов, при этом экономя место на странице. Реализация такого меню не требует особых навыков и может быть легко адаптирована под потребности вашего сайта.
