Новости Joomla

0 Пользователей и 1 Гость просматривают эту тему.
  • 0 Ответов
  • 791 Просмотров
*

rubinded

  • Захожу иногда
  • 54
  • 0 / 0
Здравствуйте ребята! Мне для сайта нужно всплывающее меню. Я использовал элемент 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;
}
}
}
});
« Последнее редактирование: 06.06.2016, 13:40:15 от rubinded »
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Пункт меню Текстовый разделитель ведет на главную страницу

Автор zahar_92

Ответов: 8
Просмотров: 2407
Последний ответ 27.07.2023, 13:37:17
от ei-dos
[РЕШЕНО]Скрыть пункт меню на мобильных устройствах

Автор lexxbry

Ответов: 16
Просмотров: 4625
Последний ответ 23.05.2023, 07:22:49
от geral
Цвет фона меню

Автор IhorPH

Ответов: 7
Просмотров: 1082
Последний ответ 21.03.2023, 11:47:29
от marksetter
OffCanvas меню Helix Ultimate добавить текст к иконке

Автор Andre100

Ответов: 2
Просмотров: 2103
Последний ответ 20.03.2023, 12:42:49
от Andre100
OffCanvas меню

Автор Алексей Лоскутов

Ответов: 5
Просмотров: 2145
Последний ответ 13.02.2023, 20:20:37
от dashkov