Slidedown effect with menus li

Question

Slidedown effect with menus li

Navigation

#1 by (0 votes)

0

I'm trying to create an effect using css and jquery for a menu where it will have the effect of "slidedown" when clicked on a particular link, but even that I put the list inside a div com height: 0 it keeps popping up.

I have tried to put overflow: auto hidden in ul and li but without success.

$('.open-link').on('click', function() {
  $('.box').toggleClass('open');
});

$('.open-link').on('click', function() {
  $('.box').toggleClass('open');
});

.box {
  width: 200px;
  border: 1px solid blue;
  height: 0;
}

.box ul li {
  overflow: auto;
}

.open {
  animation: open-menu .7s linear;
}

@keyframes open-menu {
  from { height: 0; }
  to { height: 200px; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="box">
  <ul>
    <li>Hello</li>
    <li>World</li>
  </ul>
</div>
<button class="open-link">Abrir</button>

I would also like to know how I can do the animation and not "zera it" but keep the final state after the animation.

jquery css

asked by anonymous 26.01.2017 / 15:39

1 answer

What are the php operators -, = and ::? [duplicate] Javascript and asp.net [vb] webforms session

score 0 · Accepted Answer

I do not think animation is necessary in css. You can do this:

$('.open-link').on('click', function() {
  $('.box').toggleClass('open');
});

.box {
  width: 200px;
  border: 1px solid blue;
  max-height: 0;
  overflow: hidden;
  transition: all .7s linear;
}
.box ul li {
  overflow: auto;
}

.open {
  max-height: 500px; /* ajustar aqui para uma altura que saibas que nunca há de chegar */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="box">
  <ul>
    <li>Hello</li>
    <li>World</li>
  </ul>
</div>
<button class="open-link">Abrir</button>

I also remember that you can only do it with jQuery:

$('.open-link').on('click', function() {
  $('.box').slideToggle(300);
});

.box {
  width: 200px;
  border: 1px solid blue;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="box">
  <ul>
    <li>Hello</li>
    <li>World</li>
  </ul>
</div>
<button class="open-link">Abrir</button>