Как сделать выпадающий список в html при наведении – Элементы HTML форм — выпадающий список (теги select, option, optgroup), текстовое поле (textarea), а также применение label, fieldset и legend | Создание сайтов и заработок в сети

Leave a Comment / Html / By /

Содержание

Выпадающее меню на CSS

Люди часто используют JavaScript, чтобы сделать выпадающее меню. Но на самом деле это можно сделать на чистом CSS. И в этом уроке вы узнаете, как это сделать.

Принцип работы

Для начала, чтобы вы поняли принцип работы выпадающих элементов, разберём простой пример. Возьмём простой html-код для работы:

[code]<div>Наведи на меня курсор &gt; <div>я — скрытая часть</div></div>[/code]

и применим к этому коду такие стили:

[code lang=»css»] .example_shown {
display:inline-block;
}

.example_hidden {
display:none;
}

.example_shown:hover .example_hidden {
display:inline-block;
}[/code]

В css мы скрыли нужную часть текста, изменив его отображение на display:none;. При наведении курсора (:hover) на родительский элемент .example_shown у дочернего элемента .example_hidden меняется тип отображения на видимый. По такому принципу и строятся выпадающие меню.

Создание выпадающего меню

Теперь займёмся реализацией самого меню. Для его организации воспользуемся тегами списков ul и li

[code]<ul>
<li><a href=»#»>Раздел1</a></li>
<li><a href=»#»>Раздел2</a>
<ul>
<li><a href=»#»>Подраздел1</a></li>
<li><a href=»#»>Подраздел2</a></li>
<li><a href=»#»>Подраздел3</a></li>
</ul>
</li>
<li><a href=»#»>Раздел2</a>
<ul>
<li><a href=»#»>Подраздел1</a></li>
<li><a href=»#»>Подраздел2</a></li>
<li><a href=»#»>Подраздел3</a></li>
<li><a href=»#»>Подраздел4</a></li>
<li><a href=»#»>Подраздел5</a></li>
<li><a href=»#»>Подраздел6</a></li>
<li><a href=»#»>Подраздел7</a></li>
</ul>

</li>
</ul>[/code]

Как видно из кода, основной список с id = «menu» у нас будет отвечать за видимые разделы меню. В разделы мы вкладываем ещё один список ul, содержащий в себе выпадающие ссылки при наведении на заголовок раздела меню. Теперь применим к этому набору элементов следующие стили:

[code lang=»css»]/*Обнуляем отступы*/
ul, li {
margin:0;
padding:0;
list-style-type:none;
}

/*Задаём параметры блока, содержащего основное меню*/
#menu {
display:block;
position:absolute;
top:100px;
left:50px;

}

/*Задаём стили для разделов нашего меню*/
#menu &amp;gt; li {
display:inline-block;
height:20px;
position:relative;
}

/*Стили для скрытого выпадающего меню*/
#menu &amp;gt; li &amp;gt; ul {
position:absolute;
top:20px;
display:none;
}

/*Делаем скрытую часть видимой*/
#menu &amp;gt; li:hover &amp;gt; ul {
display:block;

}[/code]

В данных стилях я хочу акцентировать внимание на четырёх вещах:

  1. Обратите внимание на этот символ #menu > li в стилях. Он обозначает, что стили будут применяться не ко всем элементам li, расположенным внутри ul#menu, а только к тем, кто является непосредственным потомком тега ul#menu.
  2. У разделов меню позиционирование изменено на position:relative. Дело в том, что обычный тег с position:absolute ведёт отсчёт координат позиционирования от левого верхнего угла окна браузера. Но если такой тег вложить внутрь тега с position:relative, отсчёт будет вестись от угла этого тега.
    Таким образом, мы сможем привязать выпадающие списки не к какой-то координате относительно окна, а к координате относительно раздела основного меню. Собственно top:20px и задаёт смещение по вертикали от верхней границы главного раздела.
  3. Параметр top у #menu > li > ul должен равняться сумме параметров #menu > li таких как height + padding-top + padding-bottom. В данном случае последние два параметра не указаны, их значение наследуется из самого первого стиля и равно нулю. Значение height = 20. Значит отступ у нашего выпадающего списка будет равен 20 + 0 + 0 = 20px
  4. Когда мы переведём курсор на пункты выпавшего списка (#menu > li > ul > li), каждый элемент li этого списка будет попадать под событие наведения курсора hover. При этом он является вложенным в список ul, который в свою очередь вложен в #menu > li. Событие hover при этом будет передаваться от #menu > li > ul > li всем родительским элементам, в том числе и #menu > li. Из-за этого список не будет схлопываться обратно несмотря на то, что мы не держим курсор непосредственно над #menu > li.

    5. Заключение

    Выпадающие списки — довольно удобный способ разместить большое меню на маленьком пространстве. Но у этого способа есть колоссальный минус: он не будет работать на мобильных устройствах. Почему? Потому что у них в принципе нет понятия наведения курсора. У них есть клики, перетягивания. Но наведения курсора нет. Так что не забудьте об этих пользователях и сделайте для них отдельную реализацию меню.

    Обратите также внимание

Красивый выпадающий список для сайта — делаем выпадающий список