Animation when expanding item in a sidebar

Asked

Viewed 252 times

0

How to create a right shift effect (of the items) when expanding a menu option within a sidebar? You can do this using CSS only?

I tried to use "Transition" but was unsuccessful.

css3 front-end
  • 1

    Put the code you have so far clearly.

  • This is the code I currently have: . side-Nav>li>ul>li>a { Animation-Duration: . 5s; Animation-name: move; } @keyframes move { from { margin-left: 0%; } to { margin-left: 5%; } } I want to get this result: https://mighty-ravine-84144.herokuapp.com/html/static/dashboards-videos.html

  • 1

    and which would be HTML?

  • I cannot post the content.. is exceeding the character limit. But it is correct. In the sense of expanding ul (Collapse).. I’m just not getting the effect on the submenu items.

1 answer

1


CSS3 TRANSITION

Applying transitions is possible with CSS3 Transition and applying to your case:

$("a").click(function() {
  if($(".intern").css("height") != "100px") {
    $(".intern").css("height", "100px");
    $(".intern li").css("marginLeft", "0px");
  }
  
  else {
    $(".intern").css("height", "0px");
    $(".intern li").css("marginLeft", "-52px");
  }
});
li {
  padding: 7px;
  list-style: none;
}

a {
  cursor: pointer;
  color: #38C;
}

.intern {
  transition: all 0.52s;
  height: 0px;
  overflow: hidden;
}

.intern li {
  transition: all 0.52s;
  margin-left: -52px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Texto</li>
  <li>Texto</li>
  <li><a>Texto</a>
    <ul class="intern">
      <li>Texto</li>
      <li>Texto</li>
      <li>Texto</li>  
    </ul>
  </li>
  <li>Texto</li>
  <li>Texto</li>  
</ul>

  • Perfect! Thank you Thiago. Just to complement: I was able to solve this way: @keyframes move { 0% { opacity:0; -Webkit-Transform:translateX(-20%); Transform:translateX(-20%) } 100% { opacity:1; -Webkit-Transform:translateX(0); Transform:translateX(0) } }

Browser other questions tagged css3 front-end

You are not signed in. Login or sign up in order to post.