Меню рубрикатор для главной страницы (Bouncy Navigation) - Joomla 3.x: Шаблоны, разметка и макеты вывода

<!-- .cd-section -->
<div class="cd-bouncy-nav-modal">
	<nav>
		<ul class="cd-bouncy-nav">
			<li><a href="/index.php/ru/avto/avtomojki-poltavy">Автомойки</a></li>
			<li><a href="/index.php/ru/avto/avtosalony-poltavy/avtosalony-poltavy-po-markam">Автосалоны</a></li>
			<li><a href="#0">Автостоянки</a></li>
			<li><a href="#0">Автозаправки</a></li>
			<li><a href="#0">Автошколы</a></li>
			<li><a href="#0">СТО</a></li>
			<li><a href="#0">Автозапчасти</a></li>
			<li><a href="#0">Автотюнинг</a></li>
		</ul>
	</nav><a href="#0" class="cd-close">Close modal</a></div>
<!-- cd-bouncy-nav-modal -->

<a class="cd-bouncy-nav-trigger"><img src="images/main_menu/auto.jpg" alt="" class="img-responsive" /></a>

.cd-bouncy-nav-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s 0.6s, visibility 0s 0.9s;
}
.cd-bouncy-nav-modal.fade-in {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.1s 0s, visibility 0s 0s;
}
.cd-bouncy-nav li {
  transform: translateY(100vh);
}
.fade-in .cd-bouncy-nav li {
  animation: cd-move-in 0.4s;
  animation-fill-mode: forwards;
}
@keyframes cd-move-in {
  0% {
    transform: translateY(100vh);
  }
  65% {
    transform: translateY(-1.5vh);
  }
  100% {
    transform: translateY(0vh);
  }
}

jQuery(document).ready(function($){
	var is_bouncy_nav_animating = false;
	//open bouncy navigation
	$('.cd-bouncy-nav-trigger').on('click', function(){
		triggerBouncyNav(true);
	});
	//close bouncy navigation
	$('.cd-bouncy-nav-modal .cd-close').on('click', function(){
		triggerBouncyNav(false);
	});
	$('.cd-bouncy-nav-modal').on('click', function(event){
		if($(event.target).is('.cd-bouncy-nav-modal')) {
			triggerBouncyNav(false);
		}
	});

	function triggerBouncyNav($bool) {
		//check if no nav animation is ongoing
		if( !is_bouncy_nav_animating) {
			is_bouncy_nav_animating = true;
			
			//toggle list items animation
			$('.cd-bouncy-nav-modal').toggleClass('fade-in', $bool).toggleClass('fade-out', !$bool).find('li:last-child').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
				$('.cd-bouncy-nav-modal').toggleClass('is-visible', $bool);
				if(!$bool) $('.cd-bouncy-nav-modal').removeClass('fade-out');
				is_bouncy_nav_animating = false;
			});
			
			//check if CSS animations are supported... 
			if($('.cd-bouncy-nav-trigger').parents('.no-csstransitions').length > 0 ) {
				$('.cd-bouncy-nav-modal').toggleClass('is-visible', $bool);
				is_bouncy_nav_animating = false;
			}
		}
	}
});