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

13 октября 2013 | Опубликовано в css | 4 Комментариев »

Сегодня мы хотим поделиться с вами экспериментальным многоуровневым меню, которое может стать полезным для сайтов с большим количеством контента (например, интернет-магазинов). В результате получается меню, которое может содержать теоретически бесконечное количество вложенных подменю. Когда вы открываете подменю, главное меню частично скрывается под ним. При необходимости этот срез может быть видимым или же нет. Если нет — то подменю полностью покрывает своего «родителя».

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

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

Демо Загрузить материалы

Будем использовать следующую вложенную структуру для меню:

<!-- 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">
    <!-- Обертка -->
    <div class="mp-pusher" id="mp-pusher">

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

        <div class="scroller"><!-- подражание фиксированному позиционированию -->
            <div class="scroller-inner">
                <!-- Контент сайта -->
                </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;
}

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

Вот, как плагин можно назвать:

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

Or, if the submenus should cover the previous levels:
new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ), {
    type : 'cover'
} );

Для демо-версии мы использовали красивые Linicons от Sergey Shmidt, которые созданы с помощью IcoMoon app.

Надеемся, вы нашли это меню полезным и применимым в ваших проектах.

Перевод — Дежурка.

Автор — Mary Lou.

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

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые