1

Возможно у кого-то есть время посмотреть этот пример. Почему меню по клику на гамбургер снизу вверх выезжает? Нужно, чтобы плавно вниз съезжало.

$(document).ready(function() {

	$(".hamburger").click(function() {
		$(this).toggleClass("is-active")
		$(".main-nav").slideToggle();
	});
});
.top-line__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ccc;
}

.phone a {
    font-size: 20px;
    color: #000;
    text-decoration: none;
}

.main-nav__list {
    display: flex;
    list-style-type: none;
}

.main-nav__list li + li {
    margin-left: 22px;
}

.main-nav__list li + li a {
    color: #000;
}

.main-nav__list .active .main-nav__link {
    color: #F09E10;
    border-bottom: 1px solid #F09E10;
}

.main-nav__link {
    color: #fff;
    text-decoration: none;
}

.main-nav__link:hover {
    color: #F09E10;
    border-bottom: 1px solid #F09E10;
}

.hamburger {
    padding: 15px 15px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
}

.hamburger:hover {
    opacity: 0.7;
}

.hamburger-box {
    width: 40px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #000;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -10px;
}

.hamburger-inner::after {
    bottom: -10px;
}

.hamburger--squeeze .hamburger-inner {
    transition-duration: 0.075s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--squeeze .hamburger-inner::before {
    transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}

.hamburger--squeeze .hamburger-inner::after {
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--squeeze.is-active .hamburger-inner {
    transform: rotate(45deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}

.hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-line">
    <div class="wrapper">
       <div class="top-line__container">
         <a href="#" class="logo"><img src="img/Logo.png" alt="alt"></a>
       <nav class="main-nav">
        <ul class="main-nav__list">
           <li class="active"><a href="#" class="main-nav__link">Главная</a></li>
            <li><a href="#" class="main-nav__link">О компании</a></li>
            <li><a href="#" class="main-nav__link">Оценка</a></li>
            <li><a href="#" class="main-nav__link">Сделки M&A</a></li>
            <li><a href="#" class="main-nav__link">Бухгалтерские услуги</a></li>
            <li><a href="#" class="main-nav__link">Контакты</a></li>
        </ul>
     </nav>
     <div class="phone">
       <a href="tel:+7495009956">
         <span>+7 (495) 00-99-56</span>
       </a>
      </div>
      <a class="hamburger hamburger--squeeze">
        <span class="hamburger-box">
          <span class="hamburger-inner"></span>
        </span>
         </a>
</div>

1 ответ 1

2
$(document).ready(function() {
    $(".hamburger").click(function() {
        $(this).toggleClass("is-active")
        $(".main-nav").slideToggle(1000);
    });
});

Попробуй так: .slideToggle(1000). Думаю поможет. В скобках создается время анимации )

1
  • Спасибо за помощь, но там проблема была в другом, нужно было просто поменять местами блоки через флекс ордер, и все заработало как нужно. 4 июл 2017 в 21:28

Ваш ответ

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

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