Перестаньте постійно свідомо створювати якісь рамки, вилазьте з коробки і навчитеся використовувати окружності! Сьогодні ми займемося розробкою округлої навігації - меню, яке обертається навколо певних точок, коли користувач наводить курсор миші на анкорний посилання.
На шляху нам потрібно буде подолати кілька перешкод, що складаються з того, як краще структурувати наш HTML-код таким чином, щоб ми могли керувати ним віддалено, і як розташувати всі елементи так, щоб все працювало. Цим досить цікаво займатися, тому давайте приступати!
Подивитися демо | завантажити файли
Етап 1: Структуруємо HTML
Перед тим, як написати хоч щось на HTML, нам потрібно визначити структуру того, що ми збираємося створити. Для цього ми можемо відкрити Photoshop і створити простенький начерк того, як ми хочемо, щоб виглядало наше меню. Ось що у нас вийшло:
Кожен прямокутник зверху прив'язаний до однієї з 4 кіл всередині великого кола. Коли курсор миші наводиться на прямокутник, відповідна йому маленька окружність буде переміщена до верху меню. Знову ж таки, ми використовуємо ідеї «віддаленого» наведення, в якій користувач взаємодіє з однією областю, і це відбивається в інший.
Кожен раз, коли я займався розробкою віддаленого наведення, все правильно структурувати у мене виходило лише з третього разу. Це відбувається через те, як працюють CSS-селектори і, що більш важливо, через те, як поводиться псевдо клас hover. Давайте розглянемо наступний код:
Давайте припустимо, що ми все розташували таким чином, щоб при наведенні на анкорний посилання змінювався колір параграфа. Якщо ви розумієте, як працює віддалене наведення, то можете скористатися наступним CSS:
Як з'ясовується, це не спрацювало! У нашому CSS-селекторі нам потрібно зв'язати анкорний посилання, на яку буде наводитися курсор миші, з параграфом, але ж наші елементи знаходяться в двох різних div-елементах. І у нас немає можливості швидко і просто так високо піднятися на дерево DOM.
Так що ж нам робити? Відповідь полягає в реструктуризації HTML. На цей раз ми пов'язуємо два елементи на одному і тому ж рівні дерева.
Тепер наш елемент параграфа є родинним нашої анкорний посиланням, що означає, що у нас є простий спосіб зв'язати їх разом в нашому CSS-коді. Давайте подивимося, як це працює:
На цей раз ми повідомляємо браузеру, що потрібно реалізувати зміна кольору будь-якого елементу параграфа, який є родинним елементом анкорний посилання, на яку був наведений курсор миші.
Якщо ми застосуємо наші знання до цього сценарію, то ми можемо змусити структуру працювати. Почніть зі створення трьох div-елементів: оболонки, меню і окружності. Вкладіть меню всередину оболонки, а окружність всередину меню.
Усередині div'а меню для розміщення 4 наші анкорний посилання - кожну з унікальним класом. Всередину div'а окружності помістіть невпорядкований список, що містить числа від 1 до 4.
Ймовірно, все ще поки виглядає трохи заплутаним, і ви не зовсім розумієте, як всі ці частини пов'язані з начерком, який ми робили раніше, тому давайте додамо трохи візуальних ефектів, щоб ви зрозуміли, що тут відбувається.
Етап 2: CSS-код оболонки
Вищенаведений код представляє весь HTML, який нам потрібен для нашого маленького проекту. Велика частина нашої роботи розташовується в CSS. Щоб почати, давайте використаємо основний і позиціонує код:
Тут, в принципі, немає нічого складного, так як ми просто розкреслюють оболонку. Зверніть увагу, що тут -webkit-backface-visibility використовується для запобігання бага, який виникає і призводить до мерехтіння CSS-переходів при роботі в браузерах сімейства WebKit.
Етап 3: CSS окружності
Далі давайте перейдемо до розробки коду великому колу. Створити окружність за допомогою CSS досить просто, просто не забудьте вставити рівні значення параметрів ширини і висоти, а параметр border-radius виставляйте на, як мінімум, 50%. Все інше тут просто допомагає все правильно розставити.
Щоб наша окружність виглядала більш привабливо, ми додали внутрішню тінь. Нарешті, ми прив'язуємо перехід, щоб окружність анімувала обертання, яке буде відбуватися пізніше.
Якщо ми поглянемо на превью, то у нас повинна вийти велика окружність і кілька розкиданих елементів, які ми розташуємо далі.
В цьому етапі ми займемося оформленням пунктів меню. Щоб зробити це, вкажіть анкорний посилання, додайте поля і відступи, виставите параметр ширини і кольору, вкажіть text-decoration і оформите шрифт. Потім вкажіть положення при наведенні і додайте фоновий колір. Наш код буде таким:
Тепер, якщо ми подивимося на превью, то посилання в нашому меню будуть виглядати більш привабливо. Пункти списку як і раніше будуть розкидані, тому ми займемося ними далі.
Етап 5: CSS маленької окружності
Щоб створити маленькі кружечки, ми спочатку визначаємо пункти списку, і робимо все приблизно так само, як і в випадку з великим колом: робимо ширину і висоту рівними, і виставляємо border-radius на 50%. Також не забудьте прибрати табуляцію списку, встановити білий фон, і оформити шрифт за образом, який ви можете бачити нижче.
Тут починається складний момент. Вище ви задали кожного кола абсолютне позиціонування, і тепер нам потрібно розставити їх по місцях. Ми можемо вибрати кожну окрему окружність за допомогою nth-child, потім використовувати top і left, щоб розташувати їх там, де нам завгодно. Нарешті, нам потрібно зробити так, щоб верхня частина кожної цифри стикалася з зовнішнім кордоном великого кола. Таким чином, коли весь елемент обертається, число в самому верху завжди буде потрібною стороною вгору. Це можна реалізувати за допомогою css-трансформації.
Якщо ми подивимося на превью, все повинно виглядати досить привабливо. Але все ж є дещо, що ще потрібно виправити.
Етап 6: CSS внутрішньому колу
Спочатку наша ідея полягала не в тому, щоб у нас була одна велика окружність, - в ній також був ще один маленький коло. Ми можемо зробити це без будь-якого додаткового HTML-коду, замість цього ми скористаємося нашим старим другом - before. Створіть елемент до оболонки, виставите значення контенту на DS, зробіть з нього коло, як ми це вже робили раніше (тільки на цей раз використовуйте значення 130 пікселів), вирівняйте і оформите текст, перемістіть його поверх інших за допомогою z-index, і задайте йому місце розташування за допомогою абсолютного позиціонування.
Тепер все виглядає набагато краще! На цьому візуальне оформлення готове. Тепер нам потрібно «оживити» наше чадо!
Етап 7: CSS окружності при наведенні
Щоб змусити наш коло обертатися, нам потрібно використовувати трюк віддаленого наведення разом з CSS-трансформацією. Коли користувач наводить курсор на один з пунктів меню, весь елемент кола обертається, щоб відповідна цифра виявилася нагорі.
Найскладніша частина полягає в налагодженні селектора. Ми починаємо з самого вищого рівня, який містить як div circle, так і пункти меню (тобто, div menu). Потім ми скорочуємо наші опції в окремий дочірній елемент меню і визначаємо його при наведенні. Нарешті, ми повідомляємо браузеру, що нам потрібно запустити цей механізм при наведенні курсору миші по одному з родинних елементів з класом circle. Ось як це виглядає на практиці:
Це досить складний селектор, але він відмінно виконує роботу, і дозволяє нам повеселитися і поекспериментувати. Тепер, так як ми вказували окружність під цифрою 2, нам потрібно прокрутити весь div на 90 градусів. Також, з огляду на той факт, що нам потрібно обертати елемент проти годинникової стрілки, число буде негативним:
І на цьому все! Тепер ми просто використовуємо той же механізм для всіх чотирьох кіл. Починаємо обертання з 0, потім переходимо до -90, потім до -180 і, нарешті, до -270.
