@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);
}
