Выпадающее меню на CSS
Люди часто используют JavaScript, чтобы сделать выпадающее меню. Но на самом деле это можно сделать на чистом CSS. И в этом уроке вы узнаете, как это сделать. Принцип работы Для начала, чтобы вы поняли принцип работы выпадающих элементов, разберём простой пример. Возьмём простой html-код для работы: 1 <div class=»example_shown»>Наведи на меня курсор > <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 1 2 3 4 5 6 7 8 9 10 11 12 13 14… Читать далее »