—»     —»   Простой эффект меню, применяющийся на YouTube
  Раздел: Меню и Навигация   Комментариев: 1  

Простой эффект меню, применяющийся на YouTube



Простой эффект меню, применяющийся на YouTube

Сегодня мы хотим рассказать вам о том, как можно воссоздать значительный эффект для меню, который вы уже наверняка встречали в левом боковом меню YouTube при просмотре видео (спрятанное под словом «Гид»). Меню состоит из небольшой иконки, ярлыка, и списка пунктов меню, которые появляются только после клика по иконке или ярлыку. После клика, иконка съезжает вправо, и ярлык перемещается вверх, позволяя отобразить пункты меню. Мы добавим еще кое-какие стили и эффекты, чтобы наше меню получилось немного более интересным.

Давайте приступим!

Разметка

Что касается 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">Account</a></div>
<ul>
<li><a class="dr-icon dr-icon-user" href="#">Xavier Densmore</a></li>
<li><a class="dr-icon dr-icon-camera" href="#">Videos</a></li>
<li><a class="dr-icon dr-icon-heart" href="#">Favorites</a></li>
<li><a class="dr-icon dr-icon-bullhorn" href="#">Subscriptions</a></li>
<li><a class="dr-icon dr-icon-download" href="#">Downloads</a></li>
<li><a class="dr-icon dr-icon-settings" href="#">Settings</a></li>
<li><a class="dr-icon dr-icon-switch" href="#">Logout</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 будет обозначен базовыми стилями – размером шрифта, высотой строки, цветом и габаритами. Нам нужно, чтобы он был гибким, но он не должен при этом становиться слишком большим или слишком маленьким, поэтому мы укажем еще и параметры max-width и min-width:

.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;
}

Разделение, которое будет содержать span-элемент с иконкой меню и ссылку, будет позиционировано абсолютно, а курсор мы выставим на значение pointer. Здесь нам также нужно указать параметр z-index, который гарантировал бы нам то, что ненумерованный список не будет торчать поверх всего остального:

.dr-menu > div  {
cursor: pointer;
position: absolute;
width: 100%;
z-index: 100;
}

Span-элемент иконки меню в нашем разделении trigger, также будет позиционирован абсолютно, и мы создадим здесь небольшой переход:

.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;
}

Когда мы кликаем по разделению trigger, элементу nav будет задан класс dr-menu-open. Иконка меню затем отъедет влево, а мы также сдвинем ее на расстояние собственной ширины, чтобы затем она могла вернуться обратно без преломлений:

.dr-menu.dr-menu-open > div .dr-icon {
color: #60a773;
left: 100%;
transform: translateX(-100%);
}

В конце нашего CSS-кода мы добавим к нашей иконке классы от IcoMoon. Иконка в span-элементе для иконки нашего меню будет немного отличаться, и мы воспользуемся псевдо-классом :after, чтобы добавить небольшой треугольник. Итак, давайте определим его следующим образом:

.dr-menu > div .dr-icon:after {
content: "\e008";
position: absolute;
font-size: 50%;
line-height: 3.25;
left: -10%;
opacity: 0;
}

Иконка будет позиционирована абсолютно, и мы расположим ее как надо, задав параметр left со значением -10%. Исходный уровень непрозрачности будет выставлен на 0, так как нам не нужно видеть ее, когда меню закрыто.

Как только открывается меню, иконка становится видимой:

.dr-menu.dr-menu-open > div .dr-icon:after {
opacity: 1;
}

Ярлык, который является анкором в нашем HTML, также получит некоторые базовые стили, и мы также зададим ему отступы, чтобы расположить его сразу рядом с иконкой меню. Мы также добавим переход, так как нам нужно анимировать ее, как только меню будет открыто. И сделаем мы это, переместив ее по оси 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%);
}

Ненумерованный список изначально будет невидим, так как мы зададим ему параметр непрозрачности со значением 0:

.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 trigger не накрывал его:

.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-blocks:

.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

Мы создадим небольшой скрипт, который позаботится обо всем функционале. Когда мы кликаем по разделению trigger, нам нужно, чтобы оболочка меню получила класс 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();

})();

И на этом всё! Мы надеемся, что вам понравилось данное руководство, и вы найдете ему применение!

Посмотреть демо | Скачать исходники
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 6699   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 30 апреля 2013 @ 22:26
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Хороший урок... больше понравилось сочетание цветов и шрифтов =)


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Подушки услада
Производство аппаратов на воздушной подушке, надувных моторных лодок и пр
asoniyaok.ru
Лор
Проведение высокотехнологичных операций. Высококлассные специалисты лоры
lor.ru
Купить гантели в москве дешево
Купить товары из любой точки мира с доставкой в Москву? Легко
mrsports.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930