Как сделать плавно выпадающее меню в html

Как сделать плавно выпадающее меню в html
Как сделать плавно выпадающее меню в html
Как сделать плавно выпадающее меню в html
Как сделать плавно выпадающее меню в html

В сегодняшней статье я хотел бы рассказать, как создать на CSS2.1 и HTML выпадающее меню. Также я покажу один небольшой трюк, при помощи которого можно будет добавлять иконку «+» к элементам навигации в том случае, если в них скрыто выпадающее меню. Для этого мы воспользуемся псевдоэлементом :only-child.

Исходный код
Демо

Для начала мы создадим базовую структуру навигационного меню, состоящего из шести пунктов:

<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">WordPress</a></li> <li><a href="#">Graphic Design</a></li> <li><a href="#">Inspiration</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </nav>

Далее нам нужно добавить базовые CSS-стили для HTML горизонтального меню. Я оставил комментарии к каждому блоку кода:

/ задаем цвет фона для контейнера nav. / nav { margin: 100px 0; background-color: #E64A19; } / убираем отступы и поля, а также list-style для "ul", и добавляем "position:relative" / nav ul { padding:0; margin:0; list-style: none; position: relative; } / применяем inline-block позиционирование к элементам навигации / nav ul li { margin: 0px -7px 0 0; display:inline-block; background-color: #E64A19; } / стилизуем ссылки / nav a { display:block; padding:0 10px; color:#FFF; font-size:20px; line-height: 60px; text-decoration:none; } / изменяем цвет фона при наведении курсора / nav a:hover { background-color: #000000; }

После применения стилей у нас должно получиться нечто вроде этого:

Чтобы добавить выпадающий список к какому-либо из элементов HTML меню, нам нужно добавить <ul> внутрь элемента <li> для пункта, в котором нужно скрыть выпадающий список:

<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">WordPress</a> <!-- первый уровень выпадающего списка --> <ul> <li><a href="#">Themes</a></li> <li><a href="#">Plugins</a></li> <li><a href="#">Tutorials</a></li> </ul> </li> <li><a href="#">Graphic Design</a></li> <li><a href="#">Inspiration</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </nav>

Мы добавили новый неупорядоченный список с тремя пунктами списка внутрь второго элемента <li>, который отвечает за пункт меню WordPress. Обратите внимание на то, что мы добавили <ul> после анкорного тега (<a>).

Теперь добавим CSS-стили, чтобы выпадающий список был скрыт по умолчанию, и появлялся, когда посетитель наводит курсор мыши на соответствующий родительский элемент HTML меню для сайта. После приведенного выше CSS-кода добавьте следующий фрагмент:

/ скрываем выпадающие списки по умолчанию и задаем абсолютное позиционирование / nav ul ul { display: none; position: absolute; top: 100%; } / отображаем выпадающий список при наведении / nav ul li:hover > ul { display:inherit; } / первый уровень выпадающего списка / nav ul ul li { min-width:170px; float:none; display:list-item; position: relative; }

Если до этого момента вы все делали правильно, то при наведении курсора на пункт меню «WordPress» должны увидеть выпадающий список с тремя другими пунктами («Themes», «Plugins», «Tutorials»):

Чтобы добавить выпадающие списки, состоящие из нескольких уровней, этот процесс нужно повторить. Определяем пункт меню, из которого нужно сделать выпадающий список, и добавляем новый <ul> между тегами <li></li>.

Взгляните на приведенный ниже HTML-код, в котором мы добавляем второй уровень выпадающего списка к пункту меню «Tutorial», который находится внутри пункта «WordPress»:

<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">WordPress</a> <!-- первый уровень выпадающего списка --> <ul> <li><a href="#">Themes</a></li> <li><a href="#">Plugins</a></li> <li><a href="#">Tutorials</a> <!-- второй уровень выпадающего списка --> <ul> <li><a href="#">Stuff</a></li> <li><a href="#">Things</a></li> <li><a href="#">Other Stuff</a></li> </ul> <!—конец второго уровня выпадающего списка --> </li> </ul> <!—конец первого уровня выпадающего списка --> </li> <li><a href="#">Graphic Design</a></li> <li><a href="#">Inspiration</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </nav>

Чтобы вертикальное меню HTML отображалось корректно, нужно добавить еще пару строк CSS кода:

/ второй, третий и последующие уровни смещаем 2 и 3 уровни влево на значение длины первого уровня. / nav ul ul ul { position: absolute; top:0; left:100%; }

Если все сделано правильно, у вас должно получиться нечто вроде этого:

Этот процесс можно повторять, и добавлять новые уровни. Но не следует добавлять их к последнему элементу выпадающего списка, так как я сделал это лишь для примера.

Добавляем индикатор выпадающего списка

Перед тем, как сделать выпадающее меню в HTML до конца, разберемся с индикатором, который указывает на наличие выпадающего списка, прикрепленного к тому или иному пункту меню (знак «+»):

/ измените ' +' на любой другой символ, если нужно / li > a:after { content: ' +'; } li > a:only-child:after { content: ''; }

Для этого мы используем псевдоэлемент CSS3 (:only-child). В данном случае он проверяет, имеются ли в тегах <li> родительского элемента другие элементы. Если нет, то знак плюса просто убирается, так как по умолчанию он присутствует рядом со всеми пунктами. Видите + возле пунктов WordPress и Tutorials?

Значит, вы все сделали правильно.

В завершение

Многие для достижения подобного эффекта используют jQuery или другие библиотеки. Я считаю, что в этой статье приведен самый простой и легкий вариант. Но выбор за вами.

А как вы сделали меню на HTML? Пожалуйста, расскажите об этом в комментариях.

Перевод статьи “How to Create a Pure CSS Dropdown Menu” был подготовлен дружной командой проекта Сайтостроение от А до Я.

Популярное

Как сделать плавно выпадающее меню в html Как сделать плавно выпадающее меню в html Как сделать плавно выпадающее меню в html Как сделать плавно выпадающее меню в html Как сделать плавно выпадающее меню в html Как сделать плавно выпадающее меню в html Как сделать плавно выпадающее меню в html Как сделать плавно выпадающее меню в html Как сделать плавно выпадающее меню в html

Тоже читают:



Рисунки узоры орнаменты вышивка крестом

Как сшить шапку для красной шапочки своими руками

Ацетат натрия как сделать в домашних условиях

Из бумаги схемы домики новогодние

Двускатная крыша с мансардой своими руками