Как создать анимированное выпадающее меню на CSS3

Как создать анимированное выпадающее меню на CSS3

От автора: Эта статья рассказывает о том, как создать простое выпадающее меню с простой анимацией, используя при этом только CSS3, без JavaScript.

 

Это анимированное выпадающее меню является усовершенствованной версией предыдущего выпадающего меню. Оно имеет практически такую же HTML структуру и базовые CSS стили.

HTML структура

Настоящее меню состоит из одного простого элемента div (с идентификатором (id) «top-menu») и ненумерованных вложенных списков внутри этого элемента. Ниже представлен HTML код подобной структуры:

CSS стили

Для настоящего меню CSS стили можно разделить на три логические группы:

Базовые CSS стили. Они называются «движком» анимированного выпадающего меню. Эти стили выполняют всю основную работу.

CSS стили для дизайна. Из самого названия становится понятно, что эти стили отвечают лишь за внешнее оформление анимированного выпадающего меню.

CSS стили для анимации. Как и в предыдущем случае, название говорит само за себя, т.е. эти стили создают анимацию меню.

Базовые CSS стили

Здесь нет необходимости объяснять, что они делают, т.к. они работают практически по такому же принципу, как и стили для предыдущего выпадающего меню, описанного в этой статье: Простое выпадающее меню на чистом CSS.

Демо-пример

CSS стили для дизайна

В дизайне меню используются две современные возможности CSS: блоки со скругленными углами и цветовая схема RGBA для полупрозрачного фона.

Стили данной группы были очень хорошо продуманы. Посмотрев на HTML разметку мы не увидим дополнительных CSS классов для ненумерованных списков, которые содержат внутри другие ненумерованные списки (вложенные списки) для построения подменю. В большинстве традиционных меню подобные CSS классы указывают на то, что некоторые элементы меню содержат подменю, и выделяют их таким образом, чтобы показать пользователю (посетителю сайта), что данные элементы меню могут раскрываться для отображения подменю, если пользователь наведет на них указателем мыши. Меню, представленное в данной статье, делает это автоматически, используя только CSS стили. Оно выделяет соответствующие элементы меню с помощью стрелок.

Демо-пример

CSS стили для анимации

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

Демо-пример

Заключение

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

Также, у данного меню есть одна очень удобная особенность: оно не имеет фиксированных параметров ширины, высоты и размеров шрифтов. Это позволяет каждому с легкостью изменить размер шрифта, и это не разрушит дизайн меню.

Ниже приведены CSS стили, которые изменяют размер шрифта у всего меню, без необходимости вносить правки в уже написанные стили меню:

Демо-пример

Источник: //basicuse.net/

Редакция: Команда webformyself.

Метки: , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии (3)