Выдвыгающееся сверху меню с 3D эффектом
В данном уроке мы создадим анимированное 3D навигационное меню (с иконками) с использованием только CSS3 (без JavaScript). Задействуем мощные эффекты CSS3, такие как перспектива, трансформации, градиенты и переходы. Чтобы увидеть меню в действии нужно поместить курсор мыши на голубой элемент вверху страницы.
Разметка HTML
Сначала определим структуру HTML.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>3D меню, сдвигающееся сверху | Матреиалы сайта RUSELLER.COM</title> <link href="/css/layout.css" rel="stylesheet" type="text/css" /> <link href="/css/menu.css" rel="stylesheet" type="text/css" /> </head> <body class="menu_body"> <!-- Элемент основного меню --> <div class="menu"> <ul> <li><a href="#"><img src="/images/1.png" /></a></li> <li><a href="#"><img src="/images/2.png" /></a></li> <li><a href="#"><img src="/images/3.png" /></a></li> <li><a href="#"><img src="/images/4.png" /></a></li> <li><a href="#"><img src="/images/5.png" /></a></li> <li><a href="#"><img src="/images/6.png" /></a></li> <li><a href="#"><img src="/images/7.png" /></a></li> </ul> </div> <div class="page_content"> <div class="shade"></div> <div class="box"> <div class="header">Заголовок</div> <div class="body"> ... </div> <div class="footer">Нижний колонтитул</div> </div> <div class="box"> <div class="header">Заголовок</div> <div class="body"> ... </div> <div class="footer">Нижний колонтитул</div> </div> </div> </body> </html>
В теле документа у нас имеются два элемента: menu и page_content. Основная идея заключается в разделении страницы на две секции. Главное меню состоит из элементов неупорядоченного списка. Каждый элемент имеет свое изображение.
Страница также содержит теневой элемент (который не видим по умолчанию) и остальной код (в демонстрации используются два прямоугольника с заголовком, текстом и нижним колонтитулом).
CSS
Меню работает почти во всех современных браузерах (кроме IE). Лучший результат получается в Firefox и Chrome.
Сначала определим правила для элемента body
:
.menu_body { /* Перспектива */ -webkit-perspective: 1500px; -moz-perspective: 1500px; -ms-perspective: 1500px; -o-perspective: 1500px; perspective: 1500px; }
Он добавил перспективу на нашу страницу. Теперь нужно написать базовые правила для меню и содержания:
.menu, .page_content { /* Схема вывода, трансформация и переход */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition: -webkit-transform 0.5s ease; -moz-transition: -moz-transform 0.5s ease; -ms-transition: -ms-transform 0.5s ease; -o-transition: -o-transform 0.5s ease; transition: transform 0.5s ease; } /* Элемент основного меню (которое появляется сверху) */ .menu { background-color: #002edb; display: block; position: fixed; width: 100%; height: 148px; z-index: 1; /* Трансформация */ -webkit-transform: rotateX(-45deg) translateY(-95%); -moz-transform: rotateX(-45deg) translateY(-95%); -ms-transform: rotateX(-45deg) translateY(-95%); -o-transform: rotateX(-45deg) translateY(-95%); transform: rotateX(-45deg) translateY(-95%); } /* Изменяем цвет фона и вращаем элемент основного меню при наведении курсора мыши */ .menu:hover { background-color: #4169ff; /* CSS3 transform */ -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } /* Остальное содержание страницы */ .page_content { padding: 20px 0 0; }
Обратите внимание, что мы используем свойства rotateX и translateY для скрытия/ вывода основного меню. Теперь добавим правила для неупорядоченнного списка с изображениями:
/* Основное меню - свойства UL-LI */ .menu ul { display: block; margin: 0 auto; overflow: hidden; position: relative; width: 1036px; } .menu ul li { float: left; list-style: none outside none; margin: 10px; /* Переход */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .menu ul li:hover { background-color: #7e00d6; /* Скругление углов */ -webkit-border-radius: 64px; -moz-border-radius: 64px; -ms-border-radius: 64px; -o-border-radius: 64px; border-radius: 64px; }
Используем переход для наших изображений - будет меняться цвет и радиус. Когда курсор мыши находится в меню, страница будет становиться немного темнее (будем использовать затеняющий элемент с градиентом):
/* Затеняющий элемент страницы (невидим по умолчанию) */ .page_content .shade { display: block; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; visibility: hidden; width: 100%; z-index: 1000; /* Линейный градиент */ background: -moz-linear-gradient(top, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%); background: -webkit-gradient(linear, top top, bottom top, color-stop(0%,rgba(0,0,0,0.15)), color-stop(100%,rgba(0,0,0,0.65))); background: -webkit-linear-gradient(top, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%); /* Трансформация */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
В завершение нужно вывести затеняющий элемент и повернуть page_content при наведении курсора мыши на меню:
/* Когда курсор мыши находится над меню, поворачиваем page_content вниз */ .menu:hover ~ .page_content { /* CSS3 transform */ -webkit-transform: rotateX(-45deg) translateY(80px); -moz-transform: rotateX(-45deg) translateY(80px); -ms-transform: rotateX(-45deg) translateY(80px); -o-transform: rotateX(-45deg) translateY(80px); transform: rotateX(-45deg) translateY(80px); } /* Когда курсор мыши находится над меню, выводим тень */ .menu:hover ~ .page_content .shade { opacity: 1; visibility: visible; }
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/SI1vASEX2IE/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Дураки ставят вопросы чаще, чем пытливые люди Горький Максим - (1868-1936) - русский писатель, литературный критик и публицист, общественный деятель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.