Как сделать выпадающее меню html
- Как создать меню сайта без использования скриптов
- Составьте структуру меню
- Оформите структуру с помощью html-тэгов
- Поместите меню в блок и укажите идентификатор
- Создайте списки и добавьте ссылки
- Задайте свойства списков и элементов
- Настройте внешний вид меню
Как создать меню сайта без использования скриптов
При создании меню сайта можно столкнуться с проблемой ограниченности пространства, необходимостью экономить место и избегать нагромождения лишней информации. Все это удобно решается элементами, которые скрываются, когда не нужны. Если хочется избежать использования скриптов, такое меню можно создать с помощью средств html и css.
Составьте структуру меню
Сначала необходимо определить структуру меню и расположить элементы в удобном порядке для будущего пользователя. Подумайте над понятными и грамотными названиями разделов. Определите пункты, которые должны быть выпадающими, и подпункты, которые будут в этих выпадающих списках.
Оформите структуру с помощью html-тэгов
Для создания меню используйте html-тэги. Ниже приведен пример структуры меню:
<div id="vmenu">
<ul>
<li><a href="#">Ссылка 1.</a></li>
<li><a href="#">Ссылка 2.</a>
<ul>
<li><a href="#">Пункт 2.1.</a></li>
<li><a href="#">Пункт 2.2.</a></li>
<li><a href="#">Пункт 2.3.</a></li>
</ul>
</li>
<li><a href="#">Ссылка 3.</a>
<ul>
<li><a href="#">Пункт 3.1.</a></li>
<li><a href="#">Пункт 3.2.</a></li>
<li><a href="#">Пункт 3.3.</a></li>
<li><a href="#">Пункт 3.4.</a></li>
</ul>
</li>
</ul>
</div>
Поместите меню в блок и укажите идентификатор
Поместите все меню в блок `< div>` и задайте ему идентификатор `id`, чтобы можно было присваивать особенности только этому блоку, не затрагивая остальные. Укажите в идентификаторе некое имя, свойства для которого опишите в следующих шагах.
Создайте списки и добавьте ссылки
Создайте списки с помощью тэгов `< ul>` и `< li>`. Для каждого пункта меню добавьте ссылку, заключив ее в тэг `< a>`. Присвойте ссылкам адрес страницы, на которую будет указывать ссылка.
Задайте свойства списков и элементов
Используя css, задайте свойства для списков и элементов меню. Ниже приведен пример:
#vmenu ul {
margin:0px;
padding:0px;
list-style:none;
width:250px;
}
#vmenu ul li {
position:relative;
}
#vmenu li ul {
position:absolute;
left:250px;
top:0;
display:none;
}
#vmenu ul li a {
display:block;
padding:5px;
text-decoration:none;
color:#606060;
background:#d8d8d8;
}
#vmenu li:hover ul {
display:block;
}
Настройте внешний вид меню
По желанию можно настроить цвета или изображения для фона, добавить горизонтальные черты, изменить шрифт ссылок и другие свойства, определяющие внешний вид меню.
Обратите внимание, что данный метод решения может не работать для старых версий браузера Internet Explorer.
