Многоуровневое боковое меню

demosourse

Сегодня мы продолжим демонстрировать вам интересные экспериментальные скрипты. Как-то раз нами были опубликованы исходники меню. Теперь, мы его немного преобразовали и готовы поделиться с вами его нынешним состоянием. На этот раз меню появляется с боку страницы и там же раскрывается.

Сразу хотим обратить ваше внимание на то, что мы используем 3D Трансформации, так что меню работает только в современных браузерах. Для более старых версий, мы предусмотрели специальный код. То же самое и с JS.

Вот как выглядит HTML структура меню:

<!-- mp-menu -->
<nav id="mp-menu" class="mp-menu">
    <div class="mp-level">
        <h2 class="icon icon-world">All Categories</h2>
        <ul>
            <li class="icon icon-arrow-left">
                <a class="icon icon-display" href="#">Devices</a>

                <div class="mp-level">
                    <h2 class="icon icon-display">Devices</h2>
                    <ul>
                        <li class="icon icon-arrow-left">
                            <a class="icon icon-phone" href="#">Mobile Phones</a>

                            <div class="mp-level">
                                <h2>Mobile Phones</h2>
                                <ul>
                                    <li><a href="#">Super Smart Phone</a></li>
                                    <li><a href="#">Thin Magic Mobile</a></li>
                                    <li><a href="#">Performance Crusher</a></li>
                                    <li><a href="#">Futuristic Experience</a></li>
                                </ul>
                            </div>

                        </li>
                        <li class="icon icon-arrow-left">
                            <!-- ... -->
                        </li>
                        <li class="icon icon-arrow-left">
                            <!-- ... -->
                        </li>
                    </ul>
                </div>
            </li>
            <li><!-- ... --></li>
            <!-- ... -->
        </ul>
    </div>
</nav>
<!-- /mp-menu -->

…каждый уровень меню обвёрнут в контейнер с классом mp-level.

Для того чтобы меню не прокручивалось в высоту, мы воспользовались некоторой уловкой, и тут структура страницы будет такой:

<div class="container">
    <!-- Push Wrapper -->
    <div class="mp-pusher" id="mp-pusher">

        <!-- mp-menu -->
        <nav id="mp-menu" class="mp-menu">
            <!-- ... -->
        </nav>
        <!-- /mp-menu -->

        <div class="scroller"><!-- this is for emulating position fixed of the nav -->
            <div class="scroller-inner">
                <!-- site content goes here -->
                </div>
            </div><!-- /scroller-inner -->
        </div><!-- /scroller -->

    </div><!-- /pusher -->
</div><!-- /container -->

И указываем следующие стили:

html,
body,
.container,
.scroller {
    height: 100%;
}

.scroller {
    overflow-y: scroll;
}

.scroller,
.scroller-inner {
    position: relative;
}

.container {
    position: relative;
    overflow: hidden;
    background: #34495e;
}

Это позволит нам сохранить размеры меню на всю страницу, даже при её прокручивании. В общем, мы имитируем фиксированную позицию.

Вот так происходит вызов плагина:

new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );

Или так, если необходимо чтобы уровни меню оставались в вкладках:

new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ), {
    type : 'cover'
} );

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2013/08/13/multi-level-push-menu/
Перевел: Станислав Протасевич
Урок создан: 19 Августа 2013
Просмотров: 37424
Правила перепечатки

5 последних уроков рубрики "Для сайта"

  • Эффекты блочного раскрытия

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

  • 15 полезных .htaccess сниппета для сайта на WordPress

    Если вы хотите существенно повысить уровень безопасности вашего сайта на WordPress, то вам не избежать конфигурации файла .htaccess. Это позволит не только уберечься от целого ряда хакерских атак, но и организовать перенаправления, а также решить задачи связанные с кэшем.

  • 20 бесплатных тем для WordPress в стиле Material Design

    Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

  • 20 сайтов с креативным MouseOver эффектом

    Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.

  • 45+ бесплатных материалов для веб дизайнеров за август 2016

    Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

^ Наверх ^