Вращающееся меню на CSS
В данном уроке мы рассмотрим экспериментальную версию меню, реализованную с помощью трансформаций и переходов. Идея заключается в организации круглой кнопки, при нажатии на которую выводится дополнительное кольцо, разбитое на сегменты с с иконками действий. Каждый такой сегмент и является пунктом меню.
В проекте используется достаточно много правил CSS3, но, что удивительно, он хорошо работает во многих браузерах. Opera при попытке запуска кода выдает ряд ошибок (из-за плохой поддержки ) трансформаций. Также переходы не поддерживаются в Internet Explorer 9, а остальные браузеры успешно справляются с задачей.
Разметка HTML
Для реализации эффекта нам нужно использовать несколько особенностей CSS. Но сначала определим разметку HTML. Будем использовать несколько чекбоксов и радио кнопок, которые в тандеме с CSS будут проверяться на нажатие. We can then have a label anywhere else in the code that links up to those corresponding radio buttons, and use the labels as block elements to design normally. Then it’s just a small step to use .checkbox:checked
to alter the CSS of other elements on click.
Для демонстрации меню использовался шрифт с иконками Symbolset.
Разметка HTML для меню:
<div id="menu"> <input type="checkbox" id="on-check" name="on-check" /> <label id="on-button" for="on-check"> <span><span class="ss-plus"><!-- Разместите иконку плюса здесь, если вы не используете специальный шрифт --></span></span> <span><span class="ss-hyphen"><!-- Разместите иконку минуса здесь, если вы не используете специальный шрифт --></span></span> </label> <input type="radio" id="info-home" name="radio-check" /> <input type="radio" id="info-compass" name="radio-check" checked /> <input type="radio" id="info-heart" name="radio-check" /> <input type="radio" id="info-rss" name="radio-check" /> <input type="radio" id="info-refresh" name="radio-check" /> <input type="radio" id="info-star" name="radio-check" /> <div id="menu-items"> <div class="middle"> <div class="top"> <span class="bg-piece"> </span> <label class="ss-home" for="info-home"><!-- Разместите иконку главной страницы здесь, если вы не используете специальный шрифт --></label> <span class="bg-piece"> </span> <label class="ss-compass" for="info-compass"><!-- Разместите иконку компаса здесь, если вы не используете специальный шрифт --></label> <span class="bg-piece"> </span> <label class="ss-heart" for="info-heart"><!-- Разместите иконку сердца здесь, если вы не используете специальный шрифт --></label> </div> <div class="bottom"> <span class="bg-piece"> </span> <label class="ss-rss" for="info-rss"><!-- Разместите иконку RSS, если вы не используете специальный шрифт --></label> <span class="bg-piece"> </span> <label class="ss-refresh" for="info-refresh"><!-- Разместите иконку обновления здесь, если вы не используете специальный шрифт --></label> <span class="bg-piece"> </span> <label class="ss-star" for="info-star"><!-- Разместите иконку звезды здесь, если вы не используете специальный шрифт --></label> </div> </div> </div> <div class="info home-info">Вернуться домой</div> <div class="info compass-info">Куда двигаемся?</div> <div class="info heart-info">Любимое</div> <div class="info rss-info">RSS</div> <div class="info star-info">Доминирование в вселенной</div> <div class="info refresh-info">Обновление</div> <div class="faux-shadow"> </div> </div>
CSS
Для того, чтобы обеспечить реакцию на нажатие кнопки мыши, будем комбинировать для основных свойства CSS, селектор родственников и псевдо класс :checked
. Также будут применяться 3D трансформации, чтобы кнопка переворачивалась при включении. Основные стили просто изменяют внешний вид меню.
/* Для правильного позиционирования меню */ #menu { position: relative; width: 230px; margin: 0px auto; top: 100px; left: 37px; } /* Используем свойство overflow: hidden;, поэтому надо создать имитацию тени */ .faux-shadow { position: absolute; content: " "; width: 150px; height: 150px; top: 0px; left: 0px; box-shadow: 0 0 50px rgba(0,0,0,0.3); border-radius: 300px; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -ms-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear; z-index: -9999; } /* Кнопка в центре меню служит для активации меню */ #on-button { border-radius: 100px; width: 150px; height: 150px; color: #fff; float: left; box-sizing: border-box; -moz-box-sizing: border-box; cursor: pointer; background-color: #313b3d; pointer-events: none; font-size: 5em; text-shadow: 0 1px 1px rgba(0,0,0,0.3); box-shadow: inset 0 -125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2); } /* При наведении курсора мыши */ #on-button:hover { box-shadow: inset 0 125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2); } /* При нажатии кнопки мыши*/ #on-button:active { box-shadow: inset 0 125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2), inset 0 0 30px rgba(0,0,0,0.3); } /* Элемент spans внутри кнопки будет вращаться */ #on-button > span { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; -webkit-transition: -webkit-transform 0.2s linear; -moz-transition: -moz-transform 0.2s linear; -ms-transition: -moz-transform 0.2s linear; -o-transition: -moz-transform 0.2s linear; transition: -moz-transform 0.2s linear; display: block; width: 122px; height: 122px; background: #313b3d; border-radius: 120px; pointer-events: auto; position: absolute; z-index: 3; top: 0; left: 0; box-sizing: border-box; -moz-box-sizing: border-box; padding: 34px; margin: 14px; box-shadow: inset 0 -112px 100px -100px rgba(0, 0, 0, 0.5); } /* Изменение тени при наведении курсора мыши, что бы она соответствовала тени контейнера */ #on-button:hover > span { box-shadow: inset 0 112px 100px -100px rgba(0, 0, 0, 0.5); } /* Вращение последнего элемента span, чтобы он был перевернутым */ #on-button > span:last-of-type { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); } /* Добавляем псевдо элемент с белым фоном, который будет создавать иллюзию, что кнопка имеет отверстие */ #on-button:after { position: absolute; content: " "; top: 0; left: 0; width: 120px; height: 120px; margin: 15px; border-radius: 120px; background: #fff; z-index: 2; }
Затем мы проверяем отмечен ли чекбокс. Используется селектор родственников, чтобы получить нужный элемент div
.
/* Когда элемент ввода отмечен, поворачиваем элементы span вокруг на 180 градусов */ #on-check:checked + #on-button > span:first-of-type { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); } #on-check:checked + #on-button > span:last-of-type { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } /* Также изменяем ширину и высоту тени */ #on-check:checked ~ .faux-shadow { width: 300px; height: 300px; top: -75px; left: -75px; } /* Элементы div с информацией не выводятся для неотмеченных кнопок */ #menu #on-check:not(:checked) ~ .info { opacity: 0; } /* Выводим дополнительную информацию с задержкой 0.4s, чтобы пункты меню закончили анимацию растягивания */ #menu #on-check:checked ~ .info { -webkit-transition: all 0.2s linear 0.4s; -moz-transition: all 0.2s linear 0.4s; -ms-transition: all 0.2s linear 0.4s; -o-transition: all 0.2s linear 0.4s; transition: all 0.2s linear 0.4s; } /* Растягиваем пункты меню, когда кнопка нажата */ #on-check:checked ~ #menu-items { width: 300px; height: 300px; left: -75px; top: -75px; }
Далее изменяется текущий контейнер меню. Он растягивается из-за кнопки, когда кнопка нажата. Элемент div
в сочетании с 3D трансформацией работает только в Chrome, поэтому эффект реализуется старым трюком с рамкой.
/* Стили для контейнера пунктов меню */ #menu-items { width: 150px; height: 150px; border-radius: 250px; background: #aaa; position: absolute; top: 0; left: 0; z-index: -99; overflow: hidden; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); box-shadow: 0 0 15px rgba(0,0,0,0.3); -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -ms-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear; } /* Меню разделено на две части: верх и низ. */ #menu-items .top, #menu-items .bottom { width: 100%; float: left; z-index: 1; height: 50%; } #menu-items .bottom { top: 50%; } /* Средняя часть увеличивается для фиксации ошибки, выражающейся в выходе содержания за рамки при установленном свойстве overflow: hidden; */ #menu-items .middle { height: 100%; white-space: nowrap; } /* Стили для фонового элемента. Данный контейнер ничего не делает. */ #menu-items .middle .bg-piece { width: 33.3%; height: 100%; text-align: center; display: inline-block !important; background: #eee; font-size: 2.5em; position: absolute; display: block; } /* Очень важно, чтобы все части фона находились в правильном положении. Ниже привденный код служит для указанной цели. */ #menu-items .middle > div .bg-piece:nth-of-type(2) { position: absolute; width: 0; height: 0; } #menu-items .middle .bottom .bg-piece:nth-of-type(2):after, #menu-items .middle .top .bg-piece:nth-of-type(2):after { content: " "; position: absolute; border-color: transparent transparent #eee transparent; border-width: 148px; border-style: solid; top: -142px; left: 0px; z-index: 999; } #menu-items .middle .top .bg-piece:nth-of-type(2):after { border-color: #eee transparent transparent transparent; top: -5px; left: 0; } #menu-items .middle .top .bg-piece:nth-of-type(1) { box-shadow: inset -125px 0 36px -35px rgba(0, 0, 0, 0.1), inset -7px -161px 72px rgba(0, 0, 0, 0.1); } #menu-items .middle .top .bg-piece:nth-of-type(3) { box-shadow: inset 125px 0 36px -35px rgba(0, 0, 0, 0.1), inset -7px -161px 72px rgba(0, 0, 0, 0.1); } #menu-items .middle > div .bg-piece:nth-of-type(1) { width: 50%; box-shadow: inset -125px 0 36px -35px rgba(0, 0, 0, 0.1); } #menu-items .middle > div .bg-piece:nth-of-type(3) { width: 50%; right: 0; box-shadow: inset 125px 0 36px -35px rgba(0, 0, 0, 0.1); }
Теперь определим стили для информационных блоков и меток. Нужно разместить все на свои места, что достаточно трудно и требует точной настройки значений.
/* Метки, которые содержат иконки. */ #menu-items label { position: absolute; z-index: 9999999; font-size: 2em; border-radius: 5px; cursor: pointer; text-shadow: 1px 1px 0 rgba(255,255,255,0.1); } /* при наведении курсора они подсвечиваются синим. */ #menu-items label:hover { text-shadow: 0 0 15px #a6d8f4; } /* Блок информации, который появляется при выборе меню. */ #menu .info { opacity: 0; position: absolute; left: 55px; top: -136px; display: inline-block; background-color: #d2d2d2; padding: 10px; color: #343434; z-index: 9999999; font: normal normal 1.5em Arial, sans-serif; background: #eee; border: 1px solid #ddd; font-weight: bold; border-radius: 8px; box-shadow: inset 0px 40px 200px -30px rgba(255, 255, 255, 1), 0px 0px 20px rgba(0, 0, 0, 0.1); } /* маленькая стрелка для блока меню. */ #menu .info:after { position: absolute; content: " "; top: 37px; left: 8px; border-color: #f3f3f3 transparent transparent transparent; border-width: 10px; border-style: solid; } /* Рамка для стрелки. */ #menu .info:before { position: absolute; content: " "; top: 38px; left: 8px; border-color: #ddd transparent transparent transparent; border-width: 10px; border-style: solid; } /* Скрываем ради кнопки и чекбоксы. */ #menu input[type='checkbox'], input[type='radio'] { display: none; } /* Позиционируем иконки. */ #menu-items .top .ss-home { top: 90px; left: 34px; } #menu-items .top .ss-heart { top: 90px; left: 241px; } #menu-items .top .ss-compass { top: 21px; left: 137px; } #menu-items .bottom .ss-rss { top: 181px; left: 35px; } #menu-items .bottom .ss-star { top: 181px; left: 243px; } #menu-items .bottom .ss-refresh { top: 249px; left: 139px; }
И в завершение остается только повернуть иконки в нужное положение, а также убедиться, что при активировании пункта меню иконка становится правильно. Снова используется селектор родственников и псевдо-класс :checked
.
/* Вращаем пункты меню в нужное полжение, когда нажата кнопка мыши. */ #info-home:checked ~ #menu-items, #menu-items .top .ss-heart { -webkit-transform: rotateZ(66deg); -moz-transform: rotateZ(66deg); -ms-transform: rotateZ(66deg); -o-transform: rotateZ(66deg); transform: rotateZ(66deg); } #info-heart:checked ~ #menu-items, #menu-items .top .ss-home { -webkit-transform: rotateZ(-66deg); -moz-transform: rotateZ(-66deg); -ms-transform: rotateZ(-66deg); -o-transform: rotateZ(-66deg); transform: rotateZ(-66deg); } #info-rss:checked ~ #menu-items, #menu-items .bottom .ss-star { -webkit-transform: rotateZ(114deg); -moz-transform: rotateZ(114deg); -ms-transform: rotateZ(114deg); -o-transform: rotateZ(114deg); transform: rotateZ(114deg); } #info-star:checked ~ #menu-items, #menu-items .bottom .ss-rss { -webkit-transform: rotateZ(-114deg); -moz-transform: rotateZ(-114deg); -ms-transform: rotateZ(-114deg); -o-transform: rotateZ(-114deg); transform: rotateZ(-114deg); } #info-refresh:checked ~ #menu-items, #menu-items .bottom .ss-refresh { -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } /* --------------------------------------------------------------- */ /* Выделяем выбранный пункт. */ #info-home:checked ~ #menu-items .ss-home, #info-heart:checked ~ #menu-items .ss-heart, #info-rss:checked ~ #menu-items .ss-rss, #info-star:checked ~ #menu-items .ss-star, #info-refresh:checked ~ #menu-items .ss-refresh, #info-compass:checked ~ #menu-items .ss-compass { text-shadow: 0 0 15px #3facf2; color: #24434f; } /* Делаем видимым блок информации по нажатию кнопки мыши. */ #info-home:checked ~ .home-info, #info-heart:checked ~ .heart-info, #info-rss:checked ~ .rss-info, #info-star:checked ~ .star-info, #info-refresh:checked ~ .refresh-info, #info-compass:checked ~ .compass-info { opacity: 1; }
Готово!
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/yUtjK9BmgZo/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Полезнее знать несколько мудрых правил, которые всегда могли бы служить тебе, чем выучиться многим вещам, для тебя бесполезным Сенека Луций Анней - (1 до н. э. / 1 н. э.- 65 н. э.) - римский государственный деятель, писатель, философ |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.