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

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

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

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

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

  .example_shown {
	display:inline-block;
  }
  
  .example_hidden {
	display:none;
  }
  
  .example_shown:hover .example_hidden {
  	display:inline-block;
  }

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

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

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

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

	/*Обнуляем отступы*/
	ul, li {
		margin:0;
		padding:0;
		list-style-type:none;	
	}
	
	/*Задаём параметры блока, содержащего основное меню*/
	#menu {
		display:block;
		position:absolute;
		top:100px;
		left:50px;
			
	}
	
	/*Задаём стили для разделов нашего меню*/
	#menu > li {
		display:inline-block;
		height:20px;
		position:relative;
	}
	
	/*Стили для скрытого выпадающего меню*/
	#menu > li > ul {
		position:absolute;
		top:20px;
		display:none;	
	}
	
	/*Делаем скрытую часть видимой*/
	#menu > li:hover > ul {
		display:block;	
	}

В данных стилях я хочу акцентировать внимание на четырёх вещах:
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.

Результат

Каркас сделан. Как будут выглядеть кнопки — воля ваша.

В дополнение хочу сказать, что этот же способ годится для изготовления и выпадающего вверх меню. Единственное отличие в том, что параметр top меняется на параметр bottom.

Заключение

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

Статья взята с сайта: https://scriptsite.ru/