Все для веб-дизайнера
Как создать круглое меню для сайта на CSS3
Вы, наверняка, не раз задумывались, как можно создать нечто оригинально, то есть такое, что будет отличатся от других сайтов, и не будет повторяться. С каждым часом это становится сделать все труднее и труднее, ведь посетители становятся более требовательными, обращают внимание на мелочи. Но что если вы хотите креативно подойти к поставленной задаче, и создать, к примеру, меню для сайта не обычной горизонтальной или вертикальной формы, а круглой, да да, вы все правильно прочитали. В данном уроке мы рассмотрим процесс создания такого меню.
Идея такого меню достаточно простая, у вас есть небольшая кнопка, с указательным плюсом, при нажатии на которую происходит разворот кругового меню, кроме этого при выборе определенного подпункта оно будет вращаться в заданном направлении. Все это выглядит достаточно эффектно и радует глаз. Следует заметить, что данное меню будет работать только в последних версиях браузеров поддерживающих трансформации CSS3. И так, приступим.
Шаг 1. HTML
По обычаю начнем с разметки. Мы будем использовать чеки и ратио-кнопки, которые с помощью css, будут реагировать на вращение. Получаем такую разметку.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<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">...</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> |
С разметкой закончили, перейдем к следующему шагу.
Шаг 2. СSS
Нам необходимо, чтобы кнопки реагировали на нажатия, и были рабочими при этом, для этого мы будем использовать псевдо-класс :checked. Также будут применяться 3D трансформации, чтобы кнопка переворачивалась при включении.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
/* Для правильного позиционирования меню */ #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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
/* Когда элемент ввода отмечен, поворачиваем элементы 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, поэтому эффект реализуется старым трюком с рамкой.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
/* Стили для контейнера пунктов меню */ #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;); 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); } |
Теперь нам необходимо определить стили для наших информационных блоков и меток.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
/* Метки, которые содержат иконки. */ #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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
/* Вращаем пункты меню в нужное полжение, когда нажата кнопка мыши. */ #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; } |
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 18.11.2012 в 20:09, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
