Делаем боковое меню как на YouTube

Сегодня мы посмотрим на то, как можно создать боковое меню как на YouTube при просмотре видео. Идея заключается в раскрытии меню после нажатия на специальную иконку.

HTML код

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

<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 оформление

В данных листингах, не будут перечислены браузерные префиксы, но полный код вы сможете найти в исходниках.

Для начала подключим шрифты:

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

Основному контейнеру зададим базовые стили такие как: размер шрифта, высоту строк, цвет и размеры. Меню должно быть довольно-таки гибким, поэтому так же зададим настройки 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;
}

Каждый элемент меню позиционируем абсолютно, а также меняем вид курсора при наведении на данные элементы. Так же для правильного позиционирования зададим 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;
}

При клике по иконке раскрытия меню зададим элементу nav класс “dr-menu-open”. После этого, иконку перемещаем влево:

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

Напоследок, реализуем добавление стрелки, после клика по иконке раскрытия меню:

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

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

Ссылки будет содержать небольшой отступ:

.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

Наш функционал будет работать благодаря следующему небольшому скрипту. При клике по иконке меню, мы назначим навигации класс “dr-menu-open”.

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();

})();

Вот и всё. Надеюсь, менюшка вам понравится и пригодится.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/EqT3shwvfZE/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Делаем боковое меню как на YouTube | | 2013-05-15 03:18:05 | | Статьи Web-мастеру | | Сегодня мы посмотрим на то, как можно создать боковое меню как на YouTube при просмотре видео. Идея заключается в раскрытии меню после нажатия на специальную иконку.HTML кодНаше меню будет создано с | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: