10 февраля 2016      1299      0

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

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

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

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

<div class="example_shown">Наведи на меня курсор &gt; <div class="example_hidden">я - скрытая часть</div></div>

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

 .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

<ul id="menu">
    <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>

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

/*Обнуляем отступы*/
	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;	
	}

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

  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. Заключение

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

Все темы на сайте

© 2017 BorPost · Копирование материалов сайта без разрешения запрещено