Здравствуйте ребята! Мне для сайта нужно всплывающее меню. Я использовал элемент Bouncy Navigation. Его можно просмотреть по ссылке
https://codyhouse.co/demo/bouncy-navigation/index.htmlВсе работает. Но не могу понять, как сделать так чтоб на странице было несколько кнопок вызова меню и они вызывали разные меню. У меня на главной странице несколько картинок (они служат разделами сайта): Авто, Гостиницы, Медицина и пр. Я сейчас "присобачил" меню Bouncy Navigation к картинке "Авто". При клике по ней всплывает меню с разделами: Атомойки, Автостоянки и пр. Как сделать так, чтоб при нажатии к примеру на картинку Медицина всплывало свое меню: Аптеки, Больницы и пр.?
Ребята, очень нужно!
Вот код самого меню:
<!-- .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;
}
}
}
});