3D меню для ресторанного сайта

Применение CSS 3D преобразования для компонент может принести больше реализма для плоских элементов сайта. В результате наших проб, создали  шаблон для ресторанного сайта, где открывается  3D  меню. Нажатие на связанные элементы откроет модальное окно, в  котором содержится белее подробная  информация о заказе.

ПОСМОТРЕТЬ ДЕМО                            СКАЧАТЬ  ИСХОДНИК

Так как это "Флаер" структура требует приличное количество места, мы добавим запрос средств массовой информации для небольших экранов, где все вернется на упрощенную структуру. То же самое будет применяться для браузеров, которые не поддерживают 3D-преобразования.

Эскизы и вкусные рецепты Майкл Natkin от herbivoracious.com .

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

Хорошо, так что давайте начнем!

CSS не будет содержать префиксы, но вы найдете их в исходнике.

РАЗМЕТКА

Наша структура будет состоять из основного контейнера с классом "RM-контейнер" и мы будем иметь оболочку внутри. Оболочка будет содержать три группы. Первоначально, мы только хотим видеть обложку сложенного меню, то есть разделение с классом "RM-обложка". 

<div id="rm-container" class="rm-container">

    <div class="rm-wrapper">

        <div class="rm-cover"></div>

        <div class="rm-middle"></div>

        <div class="rm-right"></div>

    </div><!-- /rm-wrapper -->

</div><!-- /rm-container -->

Внутри RM-обложка и RM-правая сторона, мы будем видеть переднюю и противоположную стороны:

<div class="rm-front">

    <div class="rm-content">

        <!-- Some content -->

    </div><!-- /rm-content -->

</div><!-- /rm-front -->

<div class="rm-back">

    <div class="rm-content">

        <!-- Some content -->

    </div><!-- /rm-content -->

    <div class="rm-overlay"></div>

</div><!-- /rm-back -->

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

В средней части меню будет просто еще одна оболочка  внутри, нет передней или задней части:

<div class="rm-inner">

    <div class="rm-content">

        <!-- Some content -->

    </div><!-- /rm-content -->

    <div class="rm-overlay"></div>

</div><!-- /rm-inner -->

Мы никогда не будем видеть заднюю часть этой  меню, так что нам не нужно будет создавать  эту структуру.

Содержание будет состоять из нескольких текстовых элементов, таких как списки определений для посуды и заголовки:

<div class="rm-content">

    <h4>Appetizers</h4>

    <dl>

        <dt>Bella's Artichokes</dt>

        <dd>Roasted artichokes with chipotle aioli and cream cheese</dd>

        <dt><a href="http://herbivoracious.com/2011/11/crostini-with-young-pecorino-grilled-figs-and-arugula-mint-pesto-recipe.html" class="rm-viewdetails" data-thumb="images/1.jpg">Green Love Crostini</a></dt>

        <dd>Crostini with young pecorino, grilled figs and arugula & mint pesto</dd>

        <dt>Focaccia di Carciofi</dt>

        <dd>Artichoke focaccia with fresh thyme</dd>

        <!-- ... -->

    </dl>

    <h4>Salads & More</h4>

    <dl>

        <!-- ... -->

    </dl>

</div><!-- /rm-content -->

Обратите внимание на якорь с классом "RM-viewdetails" и данных атрибута ". Мы будем использовать его в качестве содержимого для модального окна, которое появится при нажатии на ссылку:

<div class="rm-modal">

    <div style="background-image: url(images/1.jpg)" class="rm-thumb"></div>

    <h5>Green Love Crostini</h5>

    <p>Crostini with young pecorino, grilled figs and arugula & mint pesto</p>

    <a href="http://herbivoracious.com/2011/11/crostini-with-young-pecorino-grilled-figs-and-arugula-mint-pesto-recipe.html">See the recipe</a>

    <span class="rm-close-modal">x</span>

</div>

И это весь HTML, теперь, давайте посмотрим на стиль.

Обратите внимание, что мы не будем вдаваться в оформление элементов текста или внутренней части содержания. Вместо этого мы сосредоточимся на 3D-структуре, переход классы и запросы средств массовой информации.

CSS

Мы хотим, чтобы наше меню менялось в соответствии от размера монитора, поэтому мы установим ширину главного контейнера  в процентах, и, поскольку мы хотим создать 3D эффект, некоторые перспективы:

.rm-container {

    width: 33%;

    height: 700px;

    max-width: 370px;

    margin: 0 auto 40px auto;

    position: relative;

    perspective: 1600px;

    color: #2a323f;

}

Обложка да и все страницы (крышка, средняя часть и правая часть) будут иметь полную ширину и высоту, и мы будем позиционировать их вместе:

.rm-wrapper,

.rm-wrapper > div {

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    position: absolute;

    text-align: center;

    transform-style: preserve-3d;

}

Обложка  нуждается в более высоком  Z-индексе, чем все остальные части и мы установим преобразования происхождение, чтобы она была на левом краю (слева в центре). Переход задержка, когда мы закрываем меню. Переход на открытом состоянии будет содержать другое значение:

.rm-wrapper .rm-cover {

    z-index: 100;

    transform-origin: 0% 50%;

    transition-delay: 0.2s;

}

В средней части будет  самый низкий Z-индекс из всех трех частей, и мы добавим тонкие тени:

.rm-wrapper .rm-middle {

    z-index: 50;

    box-shadow: 0 4px 10px rgba(0,0,0,0.7);

}

Правая часть будет иметь Z-индекс, который выше, чем в средней части, но ниже, чем у обложки. Происхождение преобразование будет по правому краю (справа в центре) и не будет никакой задержки перехода, когда мы закрываем меню:

.rm-wrapper .rm-right {

    z-index: 60;

    transform-origin: 100% 50%;

    transition-delay: 0s;

}

Внутренние подразделы, которые находятся, с классами "RM-фронт", "RM-назад" и "RM-внутреннее" будут иметь текстуру бумаги в качестве фона, и мы добавим вставкой тень окна, для имитации декоративной границы:

.rm-wrapper > div > div {

    background: #fff url(../images/white_paperboard.jpg);

    width: 100%;

    height: 100%;

    position: absolute;

    padding: 30px;

    box-shadow:

        inset 0 0 0 16px #fff,

        inset 0 0 0 17px #e6b741,

        inset 0 0 0 18px #fff,

        inset 0 0 0 19px #e6b741,

        inset 0 0 0 20px #fff,

        inset 0 0 0 21px #e6b741;

}

Теперь, давайте добавим важные свойства 3D. Передняя и задняя поверхность содержит множество скрытых элементов:

.rm-container .rm-front,

.rm-container .rm-back {

    backface-visibility: hidden;

}

Давайте повернем  Backfaces так, чтобы они отразились позади передней части:

.rm-container .rm-back {

    transform: rotateY(-180deg);

}

Наложение вообще будет почти прозрачным градиентом от светлого - до немного темнее:

.rm-overlay {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    pointer-events: none;

    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 100%);

}

Для среднего наложения мы добавим градиент с другой стороны:

.rm-middle .rm-overlay {

    background: linear-gradient(to right, rgba(0,0,0,0) 64%, rgba(0,0,0,0.05) 100%);

}

Давайте добавим обводку для раздела содержания:

.rm-content {

    padding: 20px;

}

Модальный слой будет невидимым: мы установим непрозрачность до 0, указатель событий нет, и мы переведем его на Z-оси:

.rm-modal {

    position: absolute;

    z-index: 10000;

    width: 120%;

    margin-left: -10%;

    top: 50%;

    padding: 40px;

    background: #fff url(../images/white_paperboard.jpg);

    box-shadow:

        inset 0 0 0 16px #fff,

        inset 0 0 0 17px #e6b741,

        inset 0 0 0 18px #fff,

        inset 0 0 0 19px #e6b741,

        inset 0 0 0 20px #fff,

        inset 0 0 0 21px #e6b741,

        0 4px 20px rgba(0,0,0,0.4);

    opacity: 0;

    pointer-events: none;

    transform: translateZ(1000px);

}

Идея состоит в том, чтобы показать модальное окно, когда мы нажимаем на одну из ссылок в меню. Мы будем масштабировать меню вниз и сделаем появление  модального окна «сверху». Эта концепция вдохновлена ​​концепцией модальных окон Хаким эль-Хаттаба Avgrund .

Давайте добавим несколько переходов и определим  некоторые классы для открытия меню.

Во-первых, мы добавим  переход к оболочке (для масштабирования его при открытии модального окна) и страниц обложки, т.е. наши три части меню (для анимации "открытие" / вращение):

.. rm-wrapper, rm-wrapper> DIV {переход: все 0.6 простоту входа-выхода;}

Модальное окно  также будет иметь переход на преобразование (уменьшать) и его прозрачность:

.rm-modal {

    transition:

        transform 0.6s ease-in-out,

        opacity 0.6s ease-in-out;

}

.rm-container.rm-open .rm-wrapper > div {

    box-shadow: 0 4px 5px -3px rgba(0,0,0,0.6);

}

Обложка будет открываться (без задержки) -180 градусов по оси ординат. Так как мы определили происхождение преобразования, чтобы быть слева и в центре, она откроется слева:

.rm-container.rm-open .rm-cover {

    transform: rotateY(-180deg);

    transition-delay: 0s;

}

Правая часть будет открываться на 180 градусов, но здесь мы добавим переход  с задержкой  0,2 с, потому что мы хотим, чтобы обложка открывалась первой:

.rm-container.rm-open .rm-right {

    transform: rotateY(180deg);

    transition-delay: 0.2s;

}

Когда мы нажимаем на один из пунктов меню, который является якорем, мы добавим еще один класс под названием "RM-В":

.rm-container.rm-in .rm-wrapper {

    transform: translateZ(-500px);

}

Обложка и правая часть будет повернута немного вовнутрь:

.rm-container.rm-in .rm-cover {

    transform: rotateY(-150deg);

}

.rm-container.rm-in .rm-right {

    transform: rotateY(150deg);

}

Мы должны установить переход задержку в 0 секунд  для этого случая:

.rm-container.rm-in .rm-cover,

.rm-container.rm-in .rm-right,

.rm-container.rm-nodelay .rm-right {

    transition-delay: 0s;

}

Класс "RM-NoDelay" является экстра-классом, что нам нужно для правой части меню, когда мы закрываем модальное окно. Помните, это был переходный период задержки, когда мы открываем меню.

Модальное окно появится, переводя его на 0px на Z-оси и увеличении прозрачности в 1:

.rm-container.rm-in .rm-modal {

    transform: translateZ(0px);

    opacity: 1;

    pointer-events: auto;

}

Давайте определим некоторые запросы средств массовой информации для небольших экранов и устройств. Первый запрос СМИ будет просто изменить размер оболочки:

@media screen and (max-width: 1110px) {

    .rm-container {

        height: 800px;

    }

}

Так как мы сделали оболочку не фиксированной, она будет нуждаться в большей высоте для того, чтобы содержать текст.
Для этого мы просто установить высоту оболочки для авто, задаем для нее 100% ширины и определим максимальную ширину:

@media screen and (max-width: 960px) {

    .rm-container {

        width: 100%;

        height: auto;

        max-width: 460px;

    }

Все внутренние разделы больше не будет абсолютными, а станут относительными, и мы назначим им 100% ширины, и установите высоту в авто:

.rm-wrapper,

.rm-wrapper > div,

.rm-wrapper > div > div {

    position: relative;

    width: 100%;

    height: auto;

}

Для содержания разделов понадобится некоторое поле:

.rm-wrapper > div > div{

    margin-bottom: 10px;

    box-shadow:

        inset 0 0 0 16px #fff,

        inset 0 0 0 17px #e6b741,

        inset 0 0 0 18px #fff,

        inset 0 0 0 19px #e6b741,

        inset 0 0 0 20px #fff,

        inset 0 0 0 21px #e6b741,

        0 3px 5px rgba(0,0,0,0.2);

}

Давайте удалим вращение:

.rm-container .rm-back,

.rm-container.rm-open .rm-cover,

.rm-container.rm-open .rm-right {

    transform: rotateY(0deg);

}

Нам не нужны больше пометки:

.rm-overlay, .rm-middle .rm-overlay {

    display: none;

}

И мы определим фиксированное положение для модального окна, так что оно всегда было сверху, когда мы прокручиваем страницу:

.rm-container .rm-modal {

    position: fixed;

    width: 80%;

    top: 100px;

    left: 50%;

    margin: 0 0 0 -40%;

    transform: translateZ(0px);

    transition: opacity 0.6s ease-in-out 0s;

}

    .rm-container.rm-in .rm-cover,

    .rm-container.rm-in .rm-right,

    .rm-container.rm-in .rm-wrapper {

        transform: rotateY(0deg);

        transition-delay: 0s;

    }

}

И это все важные стили. Для браузеров, которые не поддерживают 3D-преобразования, мы будем использовать почти такой же стиль. Так как мы используем Modernizr , мы просто добавим эти классы снова. нет-csstransforms3d (который будет добавлен к телу).

Теперь, давайте добавим несколько строк JavaScript.

JAVASCRIPT

Мы начнем с кэширования некоторых элементов:

    // main container

var $container = $( '#rm-container' ),                     

    // the cover, middle and right panels

    $cover = $container.find( 'div.rm-cover' ),

    $middle = $container.find( 'div.rm-middle' ),

    $right = $container.find( 'div.rm-right' ),

    // open and close elements

    $open = $cover.find('a.rm-button-open'),

    $close = $right.find('span.rm-close'),

    // the links for each recipe (photo and details)

    $details = $container.find( 'a.rm-viewdetails' ),

События на открытие / закрытие меню, а также для показа детали каждого элемента (модального окна) инициализируются:

init = function() {

        initEvents();

    },

initEvents = function() {

    $open.on( 'click', function( event ) {

        openMenu();

        return false;

    } );

    $close.on( 'click', function( event ) {

        closeMenu();

        return false;

    } );

    $details.on( 'click', function( event ) {

        $container.removeClass( 'rm-in' ).children( 'div.rm-modal' ).remove();

        viewDetails( $( this ) );

        return false;

    } );

},

Чтобы открыть / закрыть меню мы будем добавлять / удаление "RM-открытый» класс от $ контейнера. Помните, что это класс, где переходы определены.

openMenu = function() {

    $container.addClass( 'rm-open' );

},

closeMenu = function() {

    $container.removeClass( 'rm-open rm-nodelay rm-in' );

},

Наконец, если вы нажмите, чтобы увидеть подробности элемента, в модальном окне будет показано изображение и текст для этого элемента. Мы переводим основной контейнер на Z-оси (и отрегулируем верхнее поле для того, чтобы оно было в центре):

viewDetails = function( recipe ) {

    var title = recipe.text(),

        img = recipe.data( 'thumb' ),

        description = recipe.parent().next().text(),

        url = recipe.attr( 'href' );

    var $modal = $( '<div class="rm-modal"><div class="rm-thumb" style="background-image: url(' + img + ')"></div><h5>' + title + '</h5><p>' + description + '</p><a href="' + url + '">See the recipe</a><span class="rm-close-modal">x</span></div>' );

    $modal.appendTo( $container );

    var h = $modal.outerHeight( true );

    $modal.css( 'margin-top', -h / 2 );

    setTimeout( function() {

        $container.addClass( 'rm-in rm-nodelay' );

        $modal.find( 'span.rm-close-modal' ).on( 'click', function() {

            $container.removeClass( 'rm-in' );

        } );  

    }, 0 );

};

Я надеюсь, вам понравился этот урок, и вы найдете его полезным!

ПОСМОТРЕТЬ  ДЕМО                                 СКАЧАТЬ  ИСХОДНИК

Ссылка на источник