Телепорт
» » » Адаптивное многоуровневое меню

Адаптивное многоуровневое меню

Адаптивное многоуровневое меню


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

Примечание: данное меню будет работать только в тех браузерах, которые оснащены поддержкой соответствующих css-свойств.

Структура меню содержит ненумерованный список, в который можно вносить любое количество подсписков:
<div id="dl-menu" class="dl-menuwrapper">
    <button>Open Menu</button>
    <ul class="dl-menu">
        <li>
            <a href="#">Item 1</a>
            <ul class="dl-submenu">
                <li class="dl-back"><a href="#">back</a></li>
                <li><a href="#">Sub-Item 1</a></li>
                <li><a href="#">Sub-Item 2</a></li>
                <li><a href="#">Sub-Item 3</a></li>
                <li>
                    <a href="#">Sub-Item 4</a>
                    <ul class="dl-submenu">
                        <li class="dl-back"><a href="#">back</a></li>
                        <li><a href="#">Sub-Sub-Item 1</a></li>
                        <li><a href="#">Sub-Sub-Item 2</a></li>
                        <li><a href="#">Sub-Sub-Item 3</a></li>
                    </ul>
                </li>
                <li><!-- ... --></li>
                <!-- ... -->
            </ul>
        </li>
        <li><!-- ... --></li>
        <li><!-- ... --></li>
        <!-- ... -->
    </ul>
</div><!-- /dl-menuwrapper -->

Анимации определяются в классах animation:
.dl-menu.dl-animate-out-1 {
    animation: MenuAnimOut1 0.4s linear forwards;
}
 
@keyframes MenuAnimOut1 {
    50% {
        transform: translateZ(-250px) rotateY(30deg);
    }
    75% {
        transform: translateZ(-372.5px) rotateY(15deg);
        opacity: .5;
    }
    100% {
        transform: translateZ(-500px) rotateY(0deg);
        opacity: 0;
    }
}
 
.dl-menu.dl-animate-in-1 {
    animation: MenuAnimIn1 0.3s linear forwards;
}
 
@keyframes MenuAnimIn1 {
    0% {
        transform: translateZ(-500px) rotateY(0deg);
        opacity: 0;
    }
    20% {
        transform: translateZ(-250px) rotateY(30deg);
        opacity: 0.5;
    }
    100% {
        transform: translateZ(0px) rotateY(0deg);
        opacity: 1;
    }
}

А плагин запускается следующим образом:
$( '#dl-menu' ).dlmenu({
    animationClasses : { in : 'animation-class-name', out : 'animation-class-name' }
});

Надеемся, этот эксперимент вам понравился, и вдохновил вас на собственные проекты!


Скачивание доступно только для зарегистрированных
НАШИ НОВОСТИ
Опубликовано 04 апрель 2014
Представляю вашему вниманию шаблон онлайн кинотеатра с глубокой настройкой под свои нужны OST-ARENA.RU Читать далее...
Опубликовано 18 март 2014
Представляю вашему вниманию, адаптивный новостной шаблон Reades News. Адаптивный дизайн подразумевает, что шаблон будет одинаково корректно отображаться во всех устройствах. Шаблон отлично подойдет для медийных новостей и не только. Обязательно посмотрите видеозапись работы Читать далее...
Опубликовано 16 март 2014
Дизайн Zerotheme, адаптирован для DLE 10.1 by Yurets. Шаблон zBoomMusic позиционируется как шаблон для музыкального портала или музыкального блога. Вверху шаблона расположен слайдер, под слайдером Топ новостей, далее последние добавленные новости. Читать далее...