CODEWITHSUNDEEP
jqueryhtmlcsscss-animations
Halnex
Halnex

Reputation: 4536

Fold out effect for list items on hover one after the other

I am trying to display a list-item menu whenever the user hovers over the burger menu. So far it is working as expected, when I hover over the icon, the list-items appear.

But there's no animation attached to them, they just appear out of no where. I would like to add a folding animation but I have no idea how to do that.

Something similar to Paperfold JS which I have tried to use but was not successful, maybe because it's outdated (2 years old)? So I reverted back to doing it manually.

Another example of the effect I'm aiming at is this website http://lempens-design.com

There's also another small "bug" that when I hover over the div of the menu icon and try to move the cursor to the list-items below, they disappear. I have to hover over the menu icon several times to be able to have the list-items stay active and in-focus.

DEMO https://jsfiddle.net/fupu02kh/1/

HTML

<header id="top-left-fixed-block">
  <div class="header-logo">
    <img src="http://placehold.it/120x120" width="120" alt="Logo" class="">
  </div>
  <nav class="navigation">
    <div class="navButton btn-menu paperfold-toggle">
      <a href="#">
        <div class="hamburger" id="hamburger-1">
          <span class="line"></span>
          <span class="line"></span>
          <span class="line"></span>
        </div>
      </a>
      <ul class="subnav" style="width: 0px; overflow: hidden">
        <li class="menu_about" style="height: 0px"></li>
        <li class="menu_team" style="height: 0px"></li>
        <li class="menu_mission" style="height: 0px"></li>
      </ul>
    </div>
  </nav>
</header>

CSS

#top-left-fixed-block {
    width: 177px;
    height: auto;
    text-align: center;
    position: fixed;
    z-index: 999;
    top: 5%;
    left: 5%;
    -webkit-transition: all 900ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition: all 900ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition: all 900ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition: all 900ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
#top-left-fixed-block .header-logo {
    padding: 15px;
    background-color: #191617;
}
#top-left-fixed-block .navButton:first-child {
    margin-right: 1px;
}
#top-left-fixed-block .navButton {
    background-color: #ed1c24;
    width: 88px;
    margin-top: 1px;
    float: left;
    transition: all 0.5s ease-out;
}
#top-left-fixed-block .navButton:hover {
    background-color: white;
    transition: all 0.5s ease-out;
}
#top-left-fixed-block .navButton:hover a {
    color: #191617;
}
#top-left-fixed-block ul.subnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 147px;
    position: absolute;
    margin-top: 3px;
    border: 0;
    overflow: visible;
    -webkit-perspective: 200px;
    -moz-perspective: 200px;
    -ms-perspective: 200px;
    perspective: 200px;
}
#top-left-fixed-block .subnav > li {
    width: 100%;
    background-color: #191617;
    /*-webkit-transform-origin: center top;
    transform-origin: center top;
    transform: rotateX(89deg);*/
    height: 144px;
    overflow: hidden;
    margin-bottom: 1px;
    position: relative;
    border: 0px solid white;
}
#top-left-fixed-block .subnav > li:first-child {
    background-color: #704663;
}
#top-left-fixed-block .subnav > li:nth-child(2) {
    background-color: #a98e62;
}
#top-left-fixed-block .subnav > li:nth-child(3) {
    background-color: #3f8093;
}

.navButton a {
    color: white;
    font-size: 34px;
    padding-top: 5px;
}

.hamburger .line {
    width: 50px;
    height: 5px;
    background-color: #ecf0f1;
    display: block;
    margin: 8px auto;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#top-left-fixed-block .navButton:hover .hamburger .line {
    background-color: #191617;
}
.hamburger:hover{
    cursor: pointer;
}

#hamburger-1.is-active .line:nth-child(2){
    opacity: 0;
}

#hamburger-1.is-active .line:nth-child(1){
    -webkit-transform: translateY(13px) rotate(45deg);
    -ms-transform: translateY(13px) rotate(45deg);
    -o-transform: translateY(13px) rotate(45deg);
    transform: translateY(13px) rotate(45deg);
}

#hamburger-1.is-active .line:nth-child(3){
    -webkit-transform: translateY(-13px) rotate(-45deg);
    -ms-transform: translateY(-13px) rotate(-45deg);
    -o-transform: translateY(-13px) rotate(-45deg);
    transform: translateY(-13px) rotate(-45deg);
}

JS

$(".hamburger").hover(function(){
  $(this).toggleClass("is-active");
});

$('.navButton').mouseenter(function() {
  $('ul.subnav').css("width", "177px").css("overflow", "visible");
  $('ul li.menu_about').css("height", "144px");
  $('ul li.menu_team').css("height", "144px");
  $('ul li.menu_mission').css("height", "144px");
});
$('.navButton').mouseleave(function() {
  $('ul.subnav').css("width", "0px").css("overflow", "hidden");
  $('ul li.menu_about').css("height", "0px");
  $('ul li.menu_team').css("height", "0px");
  $('ul li.menu_mission').css("height", "0px");
});

Upvotes: 0

Views: 264

Answers (1)

Manuel Cheța
Manuel Cheța

Reputation: 500

Try with this updated code. I edited your code ( some CSS and JS).

jsfiddle.net/fupu02kh/2/

$('.navButton').hover(function() {
  $("ul.subnav").slideToggle();
});

Upvotes: 1

Related Questions