Страницы

Поиск по вопросам

вторник, 10 декабря 2019 г.

Круговое открытие фиксированного бургер меню

#javascript #jquery #css 


Всем привет.

Была задачка сделать такой  бургер меню.

У меня почти все готово но вот никак не получаеться сделать круговое открытие этого
меню. Как показано на ссылке.У меня весь меню скрывается и открывается только в хедере.И
не  круговой.Вот  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;
  }
}








Помогите очень прошу.


Ответы

Ответ 1


Круговое раскрытие можно сделать через 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);    
  }
}



  
  ≡

Автор: на
Ярлыки: , , ,

Комментариев нет:

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

Подписаться на: Комментарии к сообщению (Atom)