Переключить между divs и слайд-контентом в

Question

Я хотел бы переключить между div и сместить некоторые данные из каждого из них, внешний вид, который я пытаюсь воссоздать, - это навигация по сайту Helbak.

Я могу переключаться между divs, который хорош, но получение divs для скольжения, переключения и выцветания - это то, где мне нужна помощь. Если вы видите пример на сайте Helbak, я хочу, чтобы моя анимация работала одинаково. Я пытался заставить его работать, но я не могу заставить его работать как хельбак.

Вот отрывок из моего HTML:

<div class="navbar__menu__item navbar__menu__item--products"> 
     <a class="navbar__menu__item--js" href="#" data-target=".navbar__menu__dropdown--products">products <span><i class="fa fa-angle-down"></i></span></a> 
    </div> 

<div class="navbar__menu__dropdown navbar__menu__dropdown--js navbar__menu__dropdown--products"> 
    <ul> 
     <li><a href="">Link 1</a></li> 
     <li><a href="">Link 2</a></li> 
     <li><a href="">Link 3</a></li>   
    </ul> 
</div> 

Вот мой JS:

//Menu Dropdown 
$(".navbar__menu__item--js").click(function() { 
    var $target = $($(this).data('target')); 
    $(".navbar__menu__dropdown--js").not($target).slideUp(); 
    $($target).fadeToggle();   
}); 

Я добавил jsfiddle, чтобы показать, как он в настоящее время работает.

Answer 1

мне удалось получить немного ближе к тому, что вы хотите

https://jsfiddle.net/yc5bxu1f/1/

Однако вы можете сделать шаг назад и ломом, что вы делали до сих пор. Поскольку Helback использует переходы CSS.

https://css-tricks.com/almanac/properties/t/transition/

Чтобы дать вам некоторое представление о том, что они сделали. Они скрыли содержимое ul с холста top: -20em; или аналогично, и установите непрозрачность на 0.

Затем, когда вы нажимаете на фактический пункт меню .navbar__menu__item в вашем случае. Он переключает класс ul на open-state. Я бы предложил использовать слово в качестве слова.

поэтому ваш CSS будет выглядеть примерно так.

.navbar__menu__item { 
    /* Set up the style of the DIV and set it to transparent by default (depending on your Javascript support)*/ 
    opacity:0; 
    background-color:#ddd; 
    transition: opacity 0.5s ease-out; 
} 

.navbar__menu__item.active { 
    /* When a user clicks it make the div fadein */ 
    opacity:1; 
    transition: opacity 0.5s ease-in; 
} 

.navbar__menu__item > ul { 
    /* hide the content of the ul menu off canvas */ 
    top:-20em; 
    opacity:0; 
    transition: all 0.5s ease-out; 
} 

.navbar__menu__item.active > ul { 
    /* when the div is active this declaration should then have the effect of sliding down and fading in */ 
    top:0; 
    opacity:1; 
    transition: all 0.5s ease-in; 
} 

вы можете затем пара это с задержкой, так что он делает паузу, прежде чем скольжение пунктов меню после того, как ДИВ исчезла в.

Основная идея здесь в том, что состояние элемента определяется в CSS и все Javascript - это переключение каждого элемента с активным флагом. Это лучший способ сделать это как для памяти, так и для вашего собственного здравомыслия.

js будет выглядеть примерно так.