CODEWITHSUNDEEP
javascriptjqueryhtmltoggleslidetoggle
fnk
fnk

Reputation: 291

Toggle between divs and slide content in

I would like to toggle between divs and slide some content in from each of them, the look I am trying to recreate is the navigation on the Helbak website.

I am able to toggle between the divs which is good but getting the divs to slide, toggle and fade is where I need help. If you see the example on the Helbak site, I want my animation to work in the same way. I have tried to make it work but I can't get it to work like helbak.

Here is a snippet of my 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>

Here is my JS:

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

I have added a jsfiddle to show how it currently works.

Upvotes: 0

Views: 167

Answers (1)

xam
xam

Reputation: 408

I've managed to get a little closer to what you want

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

However you may want to step back and scrap what you've done so far. As Helback are using CSS transitions.

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

To give you some idea of what they have done. They have hidden the ul content off canvas top:-20em; or similar and set the opacity to 0.

Then when you click on the actual menu item .navbar__menu__item in your case. It toggles the class of the ul to open-state. I'd suggest active as the word to use.

so your CSS will look something like.

.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;
}

you can also then couple this with a delay so that it pauses before sliding in the menu items after the div has faded in.

The core idea here is that the state of the element is defined in CSS and all Javascript does is toggle each element with an active flag. Its a better way to do it for both memory and your own sanity.

the js would look something like this.

$(function(){
  var $menuItem = $('.navbar__menu__item');

  $menuItem.each(function(){
    var $this = $(this)
    $this.on('click', function(){
      $this.addClass('active')
    })
  })
})

Upvotes: 1

Related Questions