В последнее время все чаще можно встретить сайты для ресторанов, зачастую они очень красочные, ведь посетителя надо привлечь красочностью блюд. Но если вам заказали сделать такой сайт, и вы не знаете как оформить данный проект, а именно раздел меню, ведь это должен быть не просто скучный листок бумаги с ценами и непонятными названиями, а меню должно напоминать произведение искусства как и сами блюда. Как вы уже поняли, сегодня мы рассмотрим создания замечательного объемного меню для ресторана с эффектом разворота.

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

Шаг 1. HTML

Начнем с разметки, на первый взгляд разметка сложная, но это не так, нам нужен основной контейнер с классом “rm-container” и оболочкой внутри его. В оболочке будут находиться три панели. Для начала нам необходимо отобразить свернутое меню, за это будет отвечать контейнер с классом  ”rm-cover”. Последняя панель будет содержать класс “rm-right”.

Поместим в контейнер rm-cover и rm-right переднюю и заднюю сторону меню.

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

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

Обратите внимание на якорь с классом “rm-viewdetails” и атрибут данных “data-thumb”. Они используются в качестве контента для модального поля, которое появится при щелчке по ссылке.

В данном куске кода мы получаем позиционирование сопровождаемого элемента dd и миниатюры из атрибута данных и ссылки. С разметкой закончили, переходим к следующему шагу.

Шаг 2. CSS

Необходимо сделать все элементы анимированные, поэтому мы зададим основному контейнеру ширину со значением 1% и добавим CSS perspective.

Теперь предадим абсолютное позиционирование и 100% ширины и высоты.

Так как мы используем 3D perspective, нам нужно, чтобы стиль преобразования этих элементов был “preserve-3d”. Далее добавим задержку для закрытия меню.

Для средней оболочки добавим тень, также у нее будет самый низкий показатель z-index.

У правой части z-index будет выше, чем у средней части, но ниже чем у обложки. Также добавим небольшую задержку.

Для блоков с классами “rm-front”“rm-back” и “rm-inner”, будет использоваться фоновая текстура в виде бумаги, также добавим тень для них.

Теперь добавим свойства 3d, которые нужны для backface-visibility: hidden.

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

Добавим полупрозрачный градиент.

Немного повернем градиент для средней части по отношению к другой стороне.

Добавляем небольшой отступ для блока с контентом.

Мы будем использовать модальное наложение, которое будет невидимым. Для него  мы установим непрозрачность равную 0 и переведем его по оси Z:

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

У модального наложения также будет переход для преобразования и непрозрачности.

Всем вспомогательным элементам добавим тень.

Далее повернем обложку на -180 градусов по оси Y.

Теперь повернем правую оболочку, на 180 градусов, но здесь мы добавим задержку в 0.2 с.

Необходимо немного повернуть обложку и правую часть к внутреннему блоку.

Для данного случая мы установим задержку перехода в 0 секунд.

Теперь определим запросы для экранов мобильных устройств.

Добавим некоторые отступы для блока с контентом.

Теперь необходимо удалить вращение.

Установим фиксированное позиционирование для ля элемента rm-modal.

При клике будет появляться модальное наложение.

Со стилями разобрались, перейдем к следующему шагу.

Шаг 3. JavaScript

нам необходимо добавить кеширование элементов.

Подключим события для открытия/закрытия меню, а также чтобы показать дополнительные элементы.

Следует обратить ваше внимание, что в конце нам необходимо удалять классы 'rm-nodelay' и 'rm-in'. Это добавленные классы, для отображения деталей пунктов меню.

Заключительным шагом будет перевод основного контейнера по оси Z и немного поворачивание левой и правой панели.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: