Всем привет.
Была задачка сделать такой бургер менью.
У меня почти все готово но вот никак не получаетсья сделать круговое раскрытия этого менью. Как показано на ссылке.У меня весь менью скрываетсья и раскрываетсья только в хедере.И не круговой.Вот codepen ссылка.
Заранее прошу извинить если CSS кода слишком много больше сократить свой код я не смог потому что по другому не получилось бы показать суть проблемы.Если кто та может работать с SCSS то в codepen ссылке которой я указал наверху там весь SCSS можете там изменить и отправить ссылку суда.
const toggleAnimation = () => {
$('#droplet').toggleClass('active');
$('#menu').toggleClass('active');
$('#burger').toggleClass('active');
}
let below = false;
$(window).scroll(() => {
const Ypos = $(window).scrollTop();
if(Ypos > 50 && !below) {
below = true;
toggleAnimation();
} else if(Ypos < 50 && below) {
below = false;
toggleAnimation();
}
});
$(".menu-trigger").click(function() {
$(this).toggleClass('actived');
$("ul.menu li").slideToggle('fast');
})
body {
margin: 0;
padding: 0;
height: 1000px;
}
.header {
height: 47px;
position: relative;
width: 100%;
z-index: 5000;
font-family: "Poppins", Arial, Helvetica, sans-serif;
font-weight: normal;
letter-spacing: 3.4px;
text-align: center;
}
@media only screen and (max-width: 992px) {
.header {
font-size: 14px;
}
}
.header h1 {
margin: 0;
margin-left: 60px;
}
.header h1 a {
float: left;
line-height: 1.5;
width: auto;
max-height: 47px;
color: #fff;
}
.header h1 a img {
width: auto;
height: 47px;
}
.header nav {
width: 60%;
margin: 0 auto;
position: relative;
z-index: 5000;
}
@media only screen and (max-width: 992px) {
.header nav {
width: 70%;
}
}
.header nav .menu {
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
text-decoration: none;
-ms-flex-pack: distribute;
justify-content: space-around;
list-style-type: none;
margin: 0;
height: 47px;
line-height: 3;
}
.header nav .menu li a {
text-decoration: none;
color: #fff;
}
.header nav .menu #artistbtn a .fas {
left: 8%;
}
.header nav .menu #mediabtn {
position: relative;
}
.header nav .menu #mediabtn a .fas {
right: 37.5%;
}
.actived span {
background-color: red !important;
-webkit-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
}
.actived span:after {
top: -1px !important;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
.actived span:before {
top: -1px !important;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
.menu-trigger {
width: 40px;
height: 40px;
border-radius: 50%;
background: #444444;
position: fixed;
/*Opacity start*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=80);
-moz-opacity: 0.80;
-khtml-opacity: 0.8;
opacity: 0.8;
/*Opacity end*/
top: 3px;
right: 30px;
z-index: 5001;
display: none;
}
@media only screen and (max-width: 768px) {
.menu-trigger {
display: block;
}
}
.menu-trigger span {
top: 45%;
left: 25%;
-webkit-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.menu-trigger span:after {
top: 6px;
-webkit-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
left: 0%;
}
.menu-trigger span:before {
top: -6px;
-webkit-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
left: 0%;
}
.menu-trigger span, .menu-trigger span:after, .menu-trigger span:before {
width: 20px;
height: 2px;
background-color: #aaa;
position: absolute;
content: '';
}
.header {
background-color: #191919;
/*Opacity start*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=80);
-moz-opacity: 0.80;
-khtml-opacity: 0.8;
opacity: 0.8;
/*Opacity end*/
}
.header nav .menu #artistbtn a .fas, .header nav .menu #mediabtn a .fas {
position: absolute;
top: 55%;
color: #c9ac8c;
line-height: 20px;
}
#burger {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
#droplet.active {
-webkit-animation: droplet 0.5s forwards;
animation: droplet 0.5s forwards;
}
@keyframes droplet {
0% {
top: 10px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
top: 10px;
border-top-left-radius: 0px;
border-top-right-radius: 40px;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 30px;
}
30% {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
60% {
top: 34px;
}
100% {
top: 15px;
border-top-left-radius: 37px;
border-top-right-radius: 37.5px;
border-bottom-left-radius: 37.5px;
border-bottom-right-radius: 37.5px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
}
.header.active {
animation: burger 0.5s forwards;
}
@keyframes burger {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 0;
}
30% {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
20% {
opacity: 0;
}
100% {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
opacity: 1;
}
}
#burger.active {
-webkit-animation: burger 0.5s forwards;
animation: burger 0.5s forwards;
}
@keyframes burger {
0% {
transform: rotate(0deg);
opacity: 0;
}
30% {
transform: rotate(-45deg);
}
20% {
opacity: 0;
}
100% {
transform: rotate(-45deg);
opacity: 1;
}
}
.header.active > nav {
animation: menuCover 0.2s forwards;
}
.header.active {
animation: menu 0.2s forwards;
}
@keyframes menu {
0% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes menuCover {
0% {
border-radius: 0px;
top: 98px;
height: 0px;
}
75% {
border-radius: 500px / 50px;
top: 25px;
}
100% {
border-radius: 0px;
top: 0px;
height: 100px;
opacity: 0;
}
}
Помогите очень прошу.
Ответ
Круговое раскрытие можно сделать через clip-path.
$('.menu-btn').click(function(){
$('.header__nav').toggleClass('header__nav_fixed');
})
*{
box-sizing:border-box;
}
body{
margin:0;
background-color:#555;
}
.menu-btn{
position:relative;
z-index:2;
margin:0 0 0 auto;
}
header{
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 15px;
background-color:#fff;
}
.header__nav{
display:flex;
flex-wrap:wrap;
align-items:baseline;
list-style:none;
margin:0;
padding:0;
}
.header__nav li{
margin:0 10px 0 0;
}
.header__nav_fixed{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
padding:30px;
display:block;
background-color:#fff;
text-align:center;
animation:circle 2s linear;
animation-fill-mode:forwards;
clip-path:circle(20px at calc(100% - 20px) 20px);
}
.header__nav_fixed li{
margin:0 0 10px;
}
@keyframes circle{
to{
clip-path:circle(1000vw at calc(100% - 20px) 20px);
}
}
Комментариев нет:
Отправить комментарий