Animacja toggle paska navigacji - problemy

0

Próbowałem na wiele sposobów obejść problem rozsuwanego menu, ale za kazdym razem mam jakiś problem. Np. gdy używam

$(document).ready(function() 
{
 	$('.menu-toggle').toggle(
      function() 
      {
  		$('.menu-nav').show('blind', 'slow');
      },
      function() {
  		$('.menu-nav').hide('blind', 'slow');
     });
});

Navigacja pięknie rozwija i zwija się, ale przy rozszerzeniu strony do tej nie mobilnej znika całe menu navigacyjne, po prostu display:none ma nadrzędny priorytet i nadpisuje display:block z cssa.

Próbowałem też zrobić to z ToggleClass tyle że tam z kolei jest problem z animacją blind.

0

Nie każ nam zgadywać, pokaż pełen kod.

0
.container {
    overflow-y: hidden;
    max-height: 0;

    transition: max-height 0.5s ease;
}
.container.open {
    max-height: 1000px; /* approx */
}

To po prostu działa ;) Dzięki Kandif

1

Muszę się z wami podzielić bo znalażłem jeszcze lepszy pomysł "bardziej elegancki". Otóż tworzymy specjąlna klasę dla navigatorów, ponieważ navigatory domyślnie mają display:none, ponieważ sa schowane kiedy strona robi się responsywna. Doszedłem do wniosku że można zastosować toggle w jquery z tą różnicą że nadajemy akcję chowania display po zakończeniu chowania elementu metodą hide.

$(document).ready(function() 
{
    $('.menu-toggle').toggle(
      function() 
      {
        $('.collapse-nav').show('blind', 'slow');
      },
      function() {
        $('.collapse-nav').hide('blind', 'slow', function() {
    		$('.collapse-nav').css('display','');
  	 	});
     });
});

1 użytkowników online, w tym zalogowanych: 0, gości: 1