6

Всем привет.

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

У меня почти все готово но вот никак не получаеться сделать круговое открытие этого меню. Как показано на ссылке.У меня весь меню скрывается и открывается только в хедере.И не круговой.Вот 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;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header" id="menu">
    <h1 class="logo clearfix"><a href="#"><img src="#"></a></h1>
    <nav>
        <ul class="menu">
            <li id="artistbtn"><a href="#">Blue<i class="fas fa-sort-down rotate-art"></i></a></li>
            <li><a href="#">Red</a></li>
            <li><a href="#">White</a></li>
            <li id="mediabtn"><a href="#">2017<i class="fas fa-sort-down rotate-media"></i></a></li>
            <li><a href="#">Green</a></li>
            <li><a href="#">Gray</a></li>
        </ul>
    </nav>
</header>
<!--burger menu-->
<div class="menu-trigger" id="droplet">
    <span id="burger"></span>
</div>

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

3
  • 1
    похожая анимация: Rounded Animated Navigation
    – exvayn
    4 июл 2018 в 7:22
  • @exvayn спасибо постараюсь интегрировать
    – Randall
    4 июл 2018 в 7:23
  • 1
    очень понравился вопрос: "...раскрытия фиксированного бургер менью " Такое не каждый день прочитаешь) 11 июл 2018 в 15:22

1 ответ 1

6
+50

Круговое раскрытие можно сделать через 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);    
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <ul class="header__nav">
    <li><a href="#">Blue</a></li>
    <li><a href="#">Red</a></li>
    <li><a href="#">White</a></li>
    <li><a href="#">2017</a></li>
    <li><a href="#">Green</a></li>
    <li><a href="#">Gray</a></li>
  </ul>
  <span class="menu-btn">≡</span>
</header>

4
  • спасибо я понял..Если будет другой более четкий ответ я приму его
    – Randall
    5 июл 2018 в 10:05
  • ладно присужу приз вам другово ответа нету =(
    – Randall
    13 июл 2018 в 7:10
  • А что не устраивало-то?
    – zhurof
    13 июл 2018 в 7:12
  • Уже награду я дал думаю дискуссия на эту тему не имеет смысла.
    – Randall
    13 июл 2018 в 7:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.