Всем, привет!
Сегодня в статье рассмотрим как свестать круговое меню на чистом CSS без использования JavaScript и JQuery.
Вок как это выглядит в жизни:
Для начала давайте создадим стуктуру меню. Наше меню будет сделано на основе вложенного списка, а кнопка меню это связка label + input[type=»checkbox»] (ранее я уже описывал данный подход в статье про Модальные окна на чистом 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 |
<ul> <li> <input type="checkbox" name="menu" id="menu"> <label for="menu"> <div class="burger_button"></div> </label> <ul> <li class="btn btn_Github"> <a href="#" title="GitHub"> <span alt="GitHub"></span> </a> </li> <li class="btn btn_Codepen"> <a href="#" title="Codepen"> <span alt="Codepen"></span> </a> </li> <li class="btn btn_StackOverflow"> <a href="#" title="Stack Overflow"> <span alt="Stack Overflow"></span> </a> </li> <li class="btn btn_Medium"> <a href="#" title="Medium"> <span alt="Medium"></span> </a> </li> <li class="btn btn_Figma"> <a href="#" title="Figma"> <span alt="Figma"></span> </a> </li> </ul> </li> </ul> |
Вы можете наблюдать в коде символы со знаком вопроса, не пугайтесь, это иконочный шрифт FontAwesome 6 Brand, позже увидите что это просто иконки меню.
Далее добавим стилей нашему меню:
|
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 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 |
@font-face { font-family: "Font Awesome 6 Brands"; src: url("https://site-assets.fontawesome.com/releases/v6.3.0/webfonts/fa-brands-400.woff2"); } //подключим и определим наш иконочный шрифт, далее именно этот шрифт мы применим к иконкам меню body { width: 100%; height: 100vh; margin: auto; display: flex; justify-content: center; align-items: center; background: #e5e5e5; } // задаем стили для нашего списка ul { display: block; width: 64px; height: 64px; margin: 0 auto; padding: 0; z-index: 0; } ul > li { display: block; width: 64px; height: 64px; position: relative; } // скрываем сам чекбокс #menu { display: none; } //задаем стили для label, внутри которого находится наша бургер-кнопка #menu ~ label { display: flex; width: 64px; height: 64px; border-radius: 50%; background: #fff; position: relative; justify-content: center; align-items: center; transition: all 0.2s ease-in-out; } #menu ~ label:hover { background: #ffe95f; } //задаем стили для бургер-кнопки с помощью псевдо-элементов ::before и ::after #menu ~ label .burger_button { display: block; width: 32px; height: 2px; background: #505050; position: absolute; transition: all 0.2s ease-in-out; } #menu ~ label .burger_button::before { content: ""; display: block; width: 100%; height: 100%; background: #505050; position: absolute; top: -11px; left: 0; transition: all 0.2s ease-in-out; } #menu ~ label .burger_button::after { content: ""; display: block; width: 100%; height: 100%; background: #505050; position: absolute; top: 11px; left: 0; transition: all 0.2s ease-in-out; } //задаем базовый стиль для подпунктов меню #menu ~ ul > .btn { position: absolute; z-index: -1; display: block; height: 50px; width: 50px; border-radius: 50%; background: #fff; top: 7px; left: 7px; transform-origin: 25px 25px; transition: all 0.5s ease-in-out; text-align: center; line-height: 50px; } #menu ~ ul > .btn:hover { background: #ffe95f; } #menu ~ ul > .btn:hover > a { color: #000; } #menu ~ ul > .btn > a { color: #505050; text-decoration: none; } //назначаем шрифт для наших иконок #menu ~ ul > .btn > a > span { transform: rotate(0deg); transition: all 0.5s ease-in-out; font-family: "Font Awesome 6 Brands"; font-size: 24px; cursor: pointer; } #menu ~ ul > .btn_Github > a > span, #menu ~ ul > .btn_Codepen > a > span, #menu ~ ul > .btn_StackOverflow > a > span, #menu ~ ul > .btn_Medium > a > span, #menu ~ ul > .btn_Figma > a > span { transform: rotate(0deg) translate(0px, 0px) scale(0.5) } #menu:checked ~ label { background: #ffdd0c; } #menu:checked ~ label:hover { background: #ffe95f; } //стили для бургер-кнопки в раскрытом состоянии #menu:checked ~ label > .burger_button { background: rgba(0, 0, 0, 0); } #menu:checked ~ label > .burger_button::before { transform: translateY(11px) rotate(45deg); } #menu:checked ~ label > .burger_button::after { transform: translateY(-11px) rotate(-45deg); } #menu:checked ~ ul > .btn { opacity: 1; } //трансформации иконок в раскрытом состоянии #menu:checked ~ ul > .btn_Github { transform: rotate(-180deg) translate(80px, 0px) scale(1); } #menu:checked ~ ul > .btn_Github > a > span { transform: rotate(180deg); } #menu:checked ~ ul > .btn_Codepen { transform: rotate(-135deg) translate(80px, 0px) scale(1); } #menu:checked ~ ul > .btn_Codepen > a > span { transform: rotate(135deg); } #menu:checked ~ ul > .btn_StackOverflow { transform: rotate(-90deg) translate(80px, 0px) scale(1); } #menu:checked ~ ul > .btn_StackOverflow > a > span { transform: rotate(90deg); } #menu:checked ~ ul > .btn_Medium { transform: rotate(-45deg) translate(80px, 0px) scale(1); } #menu:checked ~ ul > .btn_Medium > a > span { transform: rotate(45deg); } #menu:checked ~ ul > .btn_Figma { transform: rotate(0deg) translate(80px, 0px) scale(1); } #menu:checked ~ ul > .btn_Figma > a > span { transform: rotate(0deg); } |
Вот такие стили CSS у нас получились, теперь мы имеем достаточно простое и эффектное круговое меню на чистом CSS.
Для применения на сайтах еще можно добавить скрипты-обработчики нажатия вне иконок, чтобы закрывать меню.
Пробуйте, эксперементируйте и у вас обязательно получится!
Подписывайтесь на мой Telegram-канал – проводник в мир IT и Web-разработки. Уроки, лайфхаки, личные кейсы, ссылки и обзоры на полезные сервисы.
