От автора: Эта статья рассказывает о том, как создать простое выпадающее меню с простой анимацией, используя при этом только CSS3, без JavaScript.
Это анимированное выпадающее меню является усовершенствованной версией предыдущего выпадающего меню. Оно имеет практически такую же HTML структуру и базовые CSS стили.
HTML структура
Настоящее меню состоит из одного простого элемента div (с идентификатором (id) «top-menu») и ненумерованных вложенных списков внутри этого элемента. Ниже представлен HTML код подобной структуры:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<div id="top-menu"> <ul> <li> <ul> <li><a href="#">Ruby</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li> <ul> <li><a href="#">CakePHP</a></li> <li><a href="#">Symfony</a></li> <li><a href="#">Zend</a></li> <li><a href="#">CodeIgniter</a></li> </ul> <a href="#">PHP</a> </li> <li><a href="#">JavaScript</a></li> <li><a href="#">C++</a></li> </ul> <a href="#">Languages</a> </li> <li> <ul> <li><a href="#">Chrome</a></li> <li> <ul> <li><a href="#">Mobile</a></li> <li><a href="#">Desktop</a></li> </ul> <a href="#">Opera</a> </li> <li><a href="#">IE</a></li> <li><a href="#">Firefox</a></li> <li><a href="#">Safari</a></li> </ul> <a href="#">Browsers</a> </li> <li> <ul> <li><a href="#">Windows</a></li> <li><a href="#">Linux</a></li> <li><a href="#">FreeBSD</a></li> <li><a href="#">Mac OS</a></li> </ul> <a href="#">Operation systems</a> </li> <li><a href="#">Others</a></li> </ul> </div> |
CSS стили
Для настоящего меню CSS стили можно разделить на три логические группы:
Базовые CSS стили. Они называются «движком» анимированного выпадающего меню. Эти стили выполняют всю основную работу.
CSS стили для дизайна. Из самого названия становится понятно, что эти стили отвечают лишь за внешнее оформление анимированного выпадающего меню.
CSS стили для анимации. Как и в предыдущем случае, название говорит само за себя, т.е. эти стили создают анимацию меню.
Базовые CSS стили
Здесь нет необходимости объяснять, что они делают, т.к. они работают практически по такому же принципу, как и стили для предыдущего выпадающего меню, описанного в этой статье: Простое выпадающее меню на чистом CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
#top-menu ul { margin: 0px; padding: 0px; list-style: none; } #top-menu > ul > li { float: left; } #top-menu > ul > li > ul { top: 100%; left: 0; } #top-menu li { position: relative; } #top-menu a { display: block; white-space: nowrap; } #top-menu ul li li ul { top: 0; left: 100%; } #top-menu ul ul { visibility: hidden; position: absolute; } #top-menu li:hover > ul { visibility: visible; } |
CSS стили для дизайна
В дизайне меню используются две современные возможности CSS: блоки со скругленными углами и цветовая схема RGBA для полупрозрачного фона.
Стили данной группы были очень хорошо продуманы. Посмотрев на HTML разметку мы не увидим дополнительных CSS классов для ненумерованных списков, которые содержат внутри другие ненумерованные списки (вложенные списки) для построения подменю. В большинстве традиционных меню подобные CSS классы указывают на то, что некоторые элементы меню содержат подменю, и выделяют их таким образом, чтобы показать пользователю (посетителю сайта), что данные элементы меню могут раскрываться для отображения подменю, если пользователь наведет на них указателем мыши. Меню, представленное в данной статье, делает это автоматически, используя только CSS стили. Оно выделяет соответствующие элементы меню с помощью стрелок.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
#top-menu { padding: 0 5px; } #top-menu, #top-menu > ul { background-color: #9DA4AD; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #top-menu:after { content: ""; clear: both; display: block; } #top-menu a { text-decoration: none; color: #FFFFFF; padding: 5px 10px 5px 10px; line-height: 1.2; } #top-menu > ul > li > a { padding: 5px 10px; margin: 2px 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #top-menu > ul > li > ul + a { padding-bottom: 7px; margin-bottom: 0; } #top-menu > ul > li > ul + a:after { content: " \25bc"; } #top-menu > ul > li:hover > a { background-color: #4672B3; } #top-menu > ul > li:hover > ul + a { -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } #top-menu > ul > li > ul { min-width: 100%; background-color: rgb(70, 114, 179); background-color: rgba(70, 114, 179, 0.8); } #top-menu > ul > li li > ul + a:after { content: " \25b6"; } #top-menu > ul > li > ul > li:last-child, #top-menu > ul > li > ul { -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } #top-menu ul li li:hover, #top-menu ul li li ul, #top-menu ul li li ul li:hover { background-color: rgb(124, 147, 178); background-color: rgba(124, 147, 178, 0.8); } |
CSS стили для анимации
Это последняя группа стилей и она содержит в себе наименьшее количество правил по сравнению с предыдущими группами. Она создает простую анимацию для появляющихся подменю.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
#top-menu > ul > li > ul, #top-menu ul li li ul { -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms; transition: all 300ms; } #top-menu > ul > li > ul { top: 400%; opacity: 0; } #top-menu > ul > li:hover > ul { top: 100%; opacity: 1; } #top-menu ul li ul li ul { left: 400%; opacity: 0; } #top-menu ul li ul li:hover ul { left: 100%; opacity: 1; } |
Заключение
Анимированное выпадающее меню, описанное в данной статье, является настолько простым, насколько это возможно. Как было отмечено ранее, оно показывает стрелки для элементов меню, имеющих подменю, и делает это автоматически, упрощая тем самым его использование.
Также, у данного меню есть одна очень удобная особенность: оно не имеет фиксированных параметров ширины, высоты и размеров шрифтов. Это позволяет каждому с легкостью изменить размер шрифта, и это не разрушит дизайн меню.
Ниже приведены CSS стили, которые изменяют размер шрифта у всего меню, без необходимости вносить правки в уже написанные стили меню:
1 2 3 |
#top-menu a { font-size: 22px; } |
Источник: //basicuse.net/
Редакция: Команда webformyself.
Комментарии (3)