Animation when expanding item in a sidebar

Question

Animation when expanding item in a sidebar

Navigation

#1 by (1 votes)

0

How to create a right (of items) scrolling effect when expanding a menu option, inside a sidebar? Is it possible to do it using only CSS?

I tried to use transition but I did not succeed.

css3 front-end

asked by anonymous 11.02.2017 / 04:09

1 answer

Genexus is not generating the files for compilation Deleting spaces in excess of a text

score 1 · Accepted Answer

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><ulclass="intern">
      <li>Texto</li>
      <li>Texto</li>
      <li>Texto</li>  
    </ul>
  </li>
  <li>Texto</li>
  <li>Texto</li>  
</ul>