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

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

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

Используя CSS3, вы можете легко скрывать и показывать под-элементы. Это не только сделает ваш код проще, но и упростит его дальнейшую модификацию. Также, вы сможете создавать анимацию типа «скольжение» даже не имея навыков программирования.

В данной статье я покажу вам, как создать меню в стиле «Metro», в котором скрывается и показывается текст меню под иконками каждый раз, когда по ним проводят курсором мыши. Что же, начнем!

Для успешного выполнения практики по данной статье, вам понадобится:

  • Набор из 80 иконок;
  • Время и терпение.

То, что должно получиться в итоге:

выпадающее меню на CSS3

Скачать исходные файлы

Просмотреть демонстрацию

Структура файлов

Структура файлов

Структура файлов нашего проекта будет состоять из четырех папок и одного HTML-файла:

  • index.html – наш основной файл, содержащий всю разметку;
  • папка img – для хранения изображений и иконок;
  • папка fonts –для хранения шрифтов, загружаемых с помощью CSS-файла (примечание: если вы выберете веб-шрифт, например, от сервиса Google Fonts, то необходимости в этой директории нет);
  • папка css – для хранения стилевых файлов CSS.

Подготовка иконок меню

Скачайте набор из 80 иконок. В данной статье мы будем использовать следующие иконки:

  • Home;
  • User;
  • Portfolio;
  • Chat;
  • Envelope.

Чтобы найти нужные иконки, откройте файл PSD из архива и найдите слои с соответствующими названиями.

Итак, перетащите иконку Home в новый PSD-файл в Photoshop. Затем выберите пункт меню «Image -> Canvas Size» и добавьте область в 16 пикселей слева.

Убедитесь, что якорь установлен вправо, как на картинке ниже:

PSD-файл

После этого, поместите иконку User справа. Убедитесь, что вы располагаете новую иконку точно справа на нужном расстоянии.

Это можно сделать, нажав комбинацию клавиш Ctrl+A на клавиатуре и кликнув по кнопке «align right edges», находящейся на панели инструментов Align сверху:

align right edges
Align сверху

Далее повторите то же самое для остальных иконок и не забудьте в конце нажать кнопку сохранения в качестве png-файла:

сохранения

HTML-разметка

Добавим doctype HTML5 и несколько ссылок в секцию <head> нашего HTML-документа, тем самым подключив CSS-файлы:

<meta charset="utf-8" />
CSS3 Pop Out Menu
                <link href="css/normalize.css" rel="stylesheet" />
                <link href="css/style.css" rel="stylesheet" media="screen" />

Элементы меню находятся внутри контейнера div с классом container и сгруппированы в неупорядоченный список.

Каждый элемент имеет класс box, имеет внутри себя теги <a> и <h2> (для заголовка элемента):

<div class=»container»>
<ul class=»icon-menu»>
    <li class=»icon-box home»><a href=»#»>
</a>
<h2>Home</h2>
<a href=»#»>
 </a></li>
    <li class=»icon-box aboutme»><a href=»#»>
</a>
<h2>About Me</h2>
<a href=»#»>
 </a></li>
    <li class=»icon-box portfolio»><a href=»#»>
</a>
<h2>Portfolio</h2>
<a href=»#»>
 </a></li>
    <li class=»icon-box blog»><a href=»#»>
</a>
<h2>Blog</h2>
<a href=»#»>
 </a></li>
    <li class=»icon-box contact»><a href=»#»>
</a>
<h2>Contact</h2>
<a href=»#»>
 </a></li>
</ul>
</div>

Теперь, наша HTML-разметка готова и должна напоминать нечто похожее:

HTML-разметка

CSS

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

@font-face
{
    font-family: Museo500-Regular;
    src: url('../fonts/Museo500-Regular.otf');
}

Теперь добавим стили для настройки общего вида: background с шестнадцатеричным значением #263544 и font face со значением Museo 500. Затем, установим несколько стилей для тегов <a> и <h2>:

body {background: #263544; font-family: Museo500-Regular;}
a{text-decoration: none;}
h2 {color: #fff; font-size: 22px; margin: 0 24px;}

Теперь, напишем стили для контейнеров иконок, в которых мы будем скрывать текст меню. Используя неупорядоченный список, определим класс icon-menu, где будем хранить все наши иконки меню.

Следующим будет класс icon-box с размерами 120 на 120 пикселей. Далее, обратимся по имени класса к каждому пункту меню и изменим для каждого из них значение свойства background:

ul.icon-menu {margin-top:29px;}
li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px;position: relative; margin-bottom: 3px;}
li.icon-box.home {background: #e74c3c;}
li.icon-box.aboutme {background: #1dd0ad;}
li.icon-box.portfolio {background: #3498db;}
li.icon-box.blog {background: #f1c40f;}
li.icon-box.contact {background: #f39c12;}
.icon-box h2{Museo500-Regular; font-size: 20px; text-shadow: 1px 1px 2pxrgba(150, 150, 150, 1);}
.icon-box a {display: block;}

Затем, установим позиции иконок меню, используя спрайтовое изображение. Мы будем использовать тег <span> и присваивать иконку согласно классам для манипуляции позицией спрайтового изображения:

span.icon {display: inline-block; background: url('../img/icon-sprites.png')no-repeat;  width: 32px; height: 32px; margin: 43px 45px;}
span.icon.home {background-position: 0px 0px;}
span.icon.aboutme {background-position: -36px 0px;}
span.icon.portfolio {background-position: -72px 0px;}
span.icon.blog {background-position: -109px 0px;}
span.icon.contact {background-position: -145px 0px;}

Для имени пункта меню будем использовать тег <h2>. Зададим ему position в значении absolute и подвинем влево. Используя свойство z-index, скроем текст под иконкой и контейнером.

Используя атрибут transition, мы можем добавить эффект плавной замены одного стиля другим без использования Flash-анимации или JavaScript.

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

.icon-box.home h2 {
     z-index: -999;
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
     background: #E74C3C;
     line-height: 120px;
     width: 120px;
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
        border-left: 3px solid #a7382d;
 
}
 
.icon-box.home a:hover h2 {
    opacity: 1; left: 120px; margin: 0;
    text-align: center;
 
}
 
.icon-box.aboutme h2 {
     z-index: -999;
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
     background: #1dd0ad;
     line-height: 120px;
     width: 120px;
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    border-left: 3px solid #0d866e;
}
 
.icon-box.aboutme a:hover h2 {
    opacity: 1; left: 120px; margin: 0;
    text-align: center;
 
}
 
.icon-box.portfolio h2 {
     z-index: -999;
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
     background: #3498db;
     line-height: 120px;
     width: 120px;
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    border-left: 3px solid #2177b1;
}
 
.icon-box.portfolio a:hover h2 {
    opacity: 1; left: 120px; margin: 0;
    text-align: center;
 
}
 
.icon-box.blog h2 {
     z-index: -999;
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
     background: #f1c40f;
     line-height: 120px;
     width: 120px;
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    border-left: 3px solid #b8960e;
}
 
.icon-box.blog a:hover h2 {
    opacity: 1; left: 120px; margin: 0;
    text-align: center;
 
}
 
.icon-box.contact h2 {
     z-index: -999;
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
     background: #f39c12;
     line-height: 120px;
     width: 120px;
     -webkit-transition: all  .3s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    border-left: 3px solid #bc780d;
}
 
.icon-box.contact a:hover h2 {
    opacity: 1; left: 120px; margin: 0;
    text-align: center;
 
}

Вот собственно и все! С помощью приведенного выше кода, вы получаете то же самое, что было показано в демонстрационном примере в начале статьи.

Заключение

Использование CSS3 имеет много преимуществ. Все, что вы раньше не могли делать без программирования, например анимацию, теперь возможно реализовать без сценариев JavaScript.

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

Надеюсь, статья вам понравилась, и вы извлекли для себя полезный опыт. Встретимся в следующий раз!

Перевод статьи «How to Create a CSS3 Pop-Out Menu Without Learning Programming» был подготовлен дружной командой проекта Сайтостроение от А до Я.