0

Como criar um efeito de deslocamento a direita (dos itens) ao expandir uma opção de menu, dentro de um sidebar? É possível fazer usando apenas CSS?

Tentei usar "transition" mas não obtive sucesso.

4
  • 1
    Posta o código que tu tens até o momento de forma clara. 11/02/2017 às 12:47
  • Este é o código que eu tenho atualmente: .side-nav>li>ul>li>a { animation-duration: .5s; animation-name: move; } @keyframes move { from { margin-left: 0%; } to { margin-left: 5%; } } Eu quero obter este resultado: mighty-ravine-84144.herokuapp.com/html/static/…
    – fnx
    11/02/2017 às 13:21
  • 1
    e o qual seria HTML? 11/02/2017 às 13:23
  • não consigo postar o conteúdo.. está excedendo o limite de caracteres. Mas está correto. No sentido de expandir a ul (collapse).. Só não estou conseguindo o efeito nos itens do submenu.
    – fnx
    11/02/2017 às 13:27

1 Resposta 1

1

CSS3 TRANSITION

Aplicar transições é possível com CSS3 Transition e aplicando ao seu caso:

$("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>

1
  • Perfeito! Obrigado Thiago. Só para complementar: também consegui solucionar desta forma: @keyframes move { 0% { opacity:0; -webkit-transform:translateX(-20%); transform:translateX(-20%) } 100% { opacity:1; -webkit-transform:translateX(0); transform:translateX(0) } }
    – fnx
    11/02/2017 às 13:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .