Круговое меню на чистом CSS

Всем, привет!

Сегодня в статье рассмотрим как свестать круговое меню на чистом CSS без использования JavaScript и JQuery.

Вок как это выглядит в жизни:

Для начала давайте создадим стуктуру меню. Наше меню будет сделано на основе вложенного списка, а кнопка меню это связка label + input[type=»checkbox»] (ранее я уже описывал данный подход в статье про Модальные окна на чистом CSS)

<ul>

<li>

</label>

<ul>

</a>

</li>

</a>

</li>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</li>

</ul>

Вы можете наблюдать в коде символы со знаком вопроса, не пугайтесь, это иконочный шрифт FontAwesome 6 Brand, позже увидите что это просто иконки меню.

Далее добавим стилей нашему меню:

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-разработки. Уроки, лайфхаки, личные кейсы, ссылки и обзоры на полезные сервисы.

Добавить комментарий Отменить ответ