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

Сегодня мы бы хотели представить вам экспериментальную версию многоуровневого меню. Основная задача данной реализации сэкономить место на странице. Каждое под-меню будет появляться в отдельном блоке, в то время как блок “родитель” будет исчезать. Данное меню является “резиновым”, так что без проблем его можно внедрять в адаптивный макет.

Само меню представляет из себя ненумерованный список, содержащий другие списки.

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

Анимация осуществляется при помощи CSS:

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

Надеюсь, вам понравится данный пример!


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

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

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



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

Многоуровневое адаптивное меню | | 2013-05-16 13:28:39 | | Статьи Web-мастеру | | Сегодня мы бы хотели представить вам экспериментальную версию многоуровневого меню. Основная задача данной реализации сэкономить место на странице. Каждое под-меню будет появляться в отдельном блоке, | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: