Archiwum tagu: animowane menu

Animowane/rozwijane menu

W jQuery można stworzyć całkiem fajne efekty animacji. Dzisiaj przedstawiam animowane/rozwijane menu.

jquery_43

ZOBACZ ANIMOWANE/ROZWIJANE MENU

Korzystając z jQuery możemy użyć elementów <h3> i <p> do ukrywania i pokazywania paragrafów poniżej znaczników pozycji.

<script type="text/javascript">
$(document).ready(function(){
  $(".accordion p").hide();
  $(".accordion h3").click(function(){
    $(this).next("p").slideToggle("slow")
     .siblings("p:visible").slideUp("slow");
    $(this).toggleClass("active");
    $(this).siblings("h3").removeClass("active");
  });
});
</script>

Oczywiście, jeżeli chcesz, aby animacja była szybsza, musisz zmodyfikować slideToggle i slideUp, czyli wprowadzasz 'normal' lub 'fast'. Możesz również po prostu użyć liczby całkowitej w milisekundach, czyli .slideUp(500) dla pół sekundy na przejście.

Teraz musimy użyć poniższego kodu HTML. To całkiem proste, musimy mieć wszystkie elementy div.accordion i pary <h3>/<p> w środku.

<div class="accordion">
  <h3>Item One</h3>
  <p>Lorem ipsum dolor sit amet.</p>
  <h3>Item Number Two</h3>
  <p>Lorem ipsum dolor sit amet.</p>
  <h3>Here is Item Three</h3>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Więcej na: WebDesignerWall