Форум русской поддержки Joomla!® CMS
06.12.2016, 22:01:36 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Меню рубрикатор для главной страницы (Bouncy Navigation)

 (Прочитано 98 раз)
0 Пользователей и 1 Гость смотрят эту тему.
rubinded
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 34



« : 06.06.2016, 14:29:23 »

Здравствуйте ребята! Мне для сайта нужно всплывающее меню. Я использовал элемент 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, 14:40:15 от rubinded » Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet