Сегодня мы покажем вам как создать простое меню, вроде того которое вы можете видеть слева на видеопортале YouTube при просмотре видео (там, где написано: "Гид"). Меню состоит из маленькой иконки меню, надписи и списка пунктов меню, которые появляются, когда вы кликаете на иконку меню. Мы добавим к нему некоторые стили и эффекты для того, чтобы сделать его немного более интересным.
Итак, приступим!
HTML-разметка
HTML-разметка будет состоять из контейнера NAV, в который мы добавим DIV, он будет содержать иконку меню и лэйбл. Для пунктов меню мы будем использовать неупорядоченный список:
<nav id="dr-menu" class="dr-menu">
<div class="dr-trigger"><span class="dr-icon dr-icon-menu"></span><a class="dr-label">Аккаунт</a></div>
<ul>
<li><a class="dr-icon dr-icon-user" href="#">Вася Пупкин</a></li>
<li><a class="dr-icon dr-icon-camera" href="#">Видео</a></li>
<li><a class="dr-icon dr-icon-heart" href="#">Избранное</a></li>
<li><a class="dr-icon dr-icon-bullhorn" href="#">Подписчики</a></li>
<li><a class="dr-icon dr-icon-download" href="#">Закачки</a></li>
<li><a class="dr-icon dr-icon-settings" href="#">Настройки</a></li>
<li><a class="dr-icon dr-icon-switch" href="#">Выйти</a></li>
</ul>
</nav>Каждый пункт меню будет иметь маленькую иконку, поэтому для этого мы зададим им всем соответствующие классы. Значки, которые мы будем использовать, взяты из IcoMoon.
ТЕПЕРЬ ДАВАЙТЕ ВЗГЛЯНЕМ НА CSS.
CSS
Обратите внимание, что CSS-код в статье не будет содержать никаких префиксов, но вы можете найти их в исходных файлах.
Во-первых, мы подключим наш шрифт иконок:
@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon.eot');
src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('../fonts/icomoon.woff') format('woff'),
url('../fonts/icomoon.ttf') format('truetype'),
url('../fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}Основной контейнер NAV будет иметь некоторые общие стили, такие как размер шрифта, высота строки, цвет, ширину и высоту. Мы хотим, чтобы меню было "резиновым", но мы не хотим, чтобы оно становилось слишком большим или слишком маленьким, поэтому мы установили максимальную и минимальную ширину:
.dr-menu {
width: 100%;
max-width: 400px;
min-width: 300px;
position: relative;
font-size: 1.3em;
line-height: 2.5;
font-weight: 400;
color: #fff;
padding-top: 2em;
}Блок, который содержит иконку меню и лэйбл, будет позиционироваться абсолютно, и мы установим вид курсора как "pointer". Для этого блока нужно задать высокое значение z-index, чтобы гарантировать, что маркированный список не перекроет его:
.dr-menu > div {
cursor: pointer;
position: absolute;
width: 100%;
z-index: 100;
}Иконка меню также будет позиционироваться абсолютно, и мы зададим для неё переход:
.dr-menu > div .dr-icon {
top: 0;
left: 0;
position: absolute;
font-size: 150%;
line-height: 1.6;
padding: 0 10px;
transition: all 0.4s ease;
}Когда мы кликаем на иконку, мы добавляем класс под названием "dr-menu-open" к тегу NAV, а значок меню затем перемещается влево:
.dr-menu.dr-menu-open > div .dr-icon {
color: #60a773;
left: 100%;
transform: translateX(-100%);
}В конце CSS-кода мы добавим наши классы с иконками из IcoMoon. Мы будем использовать псевдо-класс :before, чтобы добавить маленький треугольник. Итак, давайте определим это следующим образом:
.dr-menu > div .dr-icon:after {
content: "\e008";
position: absolute;
font-size: 50%;
line-height: 3.25;
left: -10%;
opacity: 0;
}Иконка будет позиционироваться абсолютно, и мы поместим её на место, задав слева отступ -10%. Первоначальная непрозрачность установлена равная 0, потому что мы не хотим видеть её в начале, когда меню закрыто.
Как только мы откроем меню, мы делаем её видимой:
.dr-menu.dr-menu-open > div .dr-icon:after {
opacity: 1;
}Ссылкам зададим некоторые общие стили, такие как отступы, так как рядом будем значок меню. Мы также добавим переход, потому что мы хотим немного оживить его, и как только мы открываем меню, то переместим его по Y-оси:
.dr-menu > div .dr-label {
padding-left: 3em;
position: relative;
display: block;
color: #60a773;
font-size: 0.9em;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 2.75;
transition: all 0.2s ease-in;
}
.dr-menu.dr-menu-open > div .dr-label {
transform: translateY(-90%);
}Неупорядоченный список первоначально будет невидимым:
.dr-menu ul {
padding: 0;
margin: 0 3em 0 0;
list-style: none;
opacity: 0;
position: relative;
z-index: 0;
pointer-events: none;
transition: opacity 0s linear 205ms;
}Когда мы открываем меню мы делаем его видимым с высоким z-index, чтобы DIV-переключатель не перекрывал его:
.dr-menu.dr-menu-open ul {
opacity: 1;
z-index: 200;
pointer-events: auto;
transition: opacity 0s linear 0s;
}Два перехода для открытия и закрытия меню. Когда мы открываем меню, мы хотим, чтобы оно появлялось сразу же, без задержки, и когда мы его закрываем, т.е. удаляем класс, то мы хотим, чтобы это происходило с задержкой. Эта задержка определяется задержкой последнего пункта в списке, как мы это увидим в ближайшее время.
Элементы списка также будут невидимыми и мы установим переход для непрозрачности:
.dr-menu ul li {
display: block;
margin: 0 0 5px 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.dr-menu.dr-menu-open ul li {
opacity: 1;
}Теперь, каждый элемент списка будет отображаться с различной задержкой: первый пункт будет исчезать сразу, а последний пункт в конце:
.dr-menu.dr-menu-open ul li:nth-child(2) {
transition-delay: 35ms;
}
.dr-menu.dr-menu-open ul li:nth-child(3) {
transition-delay: 70ms;
}
.dr-menu.dr-menu-open ul li:nth-child(4) {
transition-delay: 105ms;
}
.dr-menu.dr-menu-open ul li:nth-child(5) {
transition-delay: 140ms;
}
.dr-menu.dr-menu-open ul li:nth-child(6) {
transition-delay: 175ms;
}
.dr-menu.dr-menu-open ul li:nth-child(7) {
transition-delay: 205ms;
}
Ссылки будут иметь некоторые отступы, и мы будем устанавливать их как inline-блоки:
.dr-menu ul li a {
display: inline-block;
padding: 0 20px;
color: #fff;
}Также мы будем менять цвет при наведении:
.dr-menu ul li a:hover {
color: #60a773;
}И последнее, но не менее важное, давайте определим иконки псевдо-элементов:
.dr-icon:before,
.dr-icon:after {
position: relative;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.dr-menu ul .dr-icon:before {
margin-right: 15px;
}
.dr-icon-bullhorn:before {
content: "\e000";
}
.dr-icon-camera:before {
content: "\e002";
}
.dr-icon-heart:before {
content: "\e003";
}
.dr-icon-settings:before {
content: "\e004";
}
.dr-icon-switch:before {
content: "\e005";
}
.dr-icon-download:before {
content: "\e006";
}
.dr-icon-user:before {
content: "\e001";
}
.dr-icon-menu:before {
content: "\e007";
}И это все, что касается стилей. Давайте теперь взглянем на JavaScript.
JAVASCRIPT
Мы создадим небольшой скрипт, который будет заботиться о функциональности меню. Когда мы нажимаем на div с иконкой, мы хотим для блока-обертки задать класс "dr-menu-open". Так как мы будем анимировать иконку меню, перемешая её вправа, мы хотим, чтобы закрытие произошло только тогда, когда мы нажимаем на иконку меню, как и в меню на YouTube:
var YTMenu = (function() {
function init() {
[].slice.call( document.querySelectorAll( '.dr-menu' ) ).forEach( function( el, i ) {
var trigger = el.querySelector( 'div.dr-trigger' ),
icon = trigger.querySelector( 'span.dr-icon-menu' ),
open = false;
trigger.addEventListener( 'click', function( event ) {
if( !open ) {
el.className += ' dr-menu-open';
open = true;
}
}, false );
icon.addEventListener( 'click', function( event ) {
if( open ) {
event.stopPropagation();
open = false;
el.className = el.className.replace(/\bdr-menu-open\b/,'');
return false;
}
}, false );
} );
}
init();
})();[think=http://www.kolobok.us/smiles/standart/yahoo.gif] 😎 И вот и всё! Надеюсь, вам понравился этот урок, и вы найдете его полезным для себя![/think]
- Подпись автора