Joomla 3.x Меню на Bootstrap 3 плавное появление

Тема в разделе "Создание шаблона", создана пользователем djwolf, 22.07.2014.

  1. Offline

    djwolf Недавно здесь

    Регистрация:
    31.07.2011
    Сообщения:
    18
    Симпатии:
    0
    Пол:
    Мужской
    Всем привет, подскажите пожалуйста как сделать что бы дочерние меню появлялось плавно? тестовая площадка http://agenstvo.hol.es/
    Код который стоит сейчас

    Код (CODE):
    1. <script type="text/javascript">
    2. jQuery(document).ready(function(){
    3. jQuery('.parent').addClass('dropdown');
    4. jQuery('.parent > a').addClass('dropdown-toggle');
    5. jQuery('.parent > a').attr('data-toggle', 'dropdown');
    6. jQuery('.nav > .parent > a').attr('data-toggle','#');
    7. jQuery('.parent > a').append(' <span class="caret"></span>');
    8. jQuery('.parent > ul').addClass('dropdown-menu');
    9. jQuery('.nav-child .parent').removeClass('dropdown');
    10. jQuery('.nav-child .parent').addClass('dropdown-submenu');
    11. jQuery('.dropdown-submenu > a').removeAttr('class');
    12. jQuery('.dropdown-submenu > a').removeAttr('data-toggle', 'dropdown');
    13. jQuery('.dropdown-submenu > a > span').remove();
    14. });
    15. </script>

    Нашел на просторах интернета код но он видимо не подходит, в JS не силен
    Код (CODE):
    1. /* ========================================
    2.             Joomla3 DropDown Menu
    3.    ======================================== */
    4.  
    5. jQuery(document).ready(function(){
    6.    
    7.     // Bootstrap Menu-Class
    8.     $(document).ready(function(){
    9.         // dropdown
    10.         $('.nav .parent').addClass('dropdown');
    11.         $('.nav .parent > a').addClass('dropdown-toggle');
    12.         $('.nav .parent > a').attr('data-toggle','dropdown toggleMenu'); // .toggleMenu for Info dropdown Joomla3
    13.         $('.nav .parent > a').append('<span class="caret level1"></span>'); // .caret class one
    14.         $('.nav .parent > ul').addClass('dropdown-menu');
    15.         // ul and .caret Class .level1 / .level2 / .level3
    16.         $('ul.nav').addClass('level1');
    17.         $('.nav .parent ul.nav-child').addClass('level2').removeClass('level1');
    18.         $('.nav .parent > ul.nav-child ul').addClass('level3').removeClass('level2');
    19.         $('.nav .parent > ul.nav-child span.caret').addClass('level2').removeClass('level1');
    20.     });
    21.  
    22.     // Funktion Hovereffect
    23.     function menuEffekt(sublevel_ul){
    24.         if (!sublevel_ul.length) return;
    25.             $(sublevel_ul).find('ul').css({"display" : "none", "visibility" : "visible", "top" : "100%"});
    26.             $(sublevel_ul).find('ul ul').css({"display" : "none", "left" : "100%" , "top" : "0"});
    27.             $("ul.menu li").hover(function(){
    28.                 $(this).find('ul.dropdown-menu').first().stop(true, true).delay(200).fadeIn(500);
    29.             },function(){
    30.                 $(this).find('ul.dropdown-menu').first().stop(true, true).delay(200).fadeOut(500);
    31.             });
    32.     };
    33.  
    34.     $(document).ready(function(){
    35.         menuEffekt($("ul.menu li"));
    36.     });
    37.  
    38. });

     
  2.  
  3. shure348
    Offline

    shure348 Активист

    Регистрация:
    21.08.2012
    Сообщения:
    145
    Симпатии:
    27
    Пол:
    Мужской
    есть такое замечательное цсс свойство transition
    пример
    box {height: 20px; transition: heght 1s;}
    box:hover {height: 40px;}

    при наведении на box высота плавно за 1 сек изменится до 40

    так же можно и с появлением намутить.. добавить visibility
     
  4. Offline

    djwolf Недавно здесь

    Регистрация:
    31.07.2011
    Сообщения:
    18
    Симпатии:
    0
    Пол:
    Мужской
    Как можно сделать задержку, что бы при наведении меню некоторое время оставалось открытым?
     
  5. shure348
    Offline

    shure348 Активист

    Регистрация:
    21.08.2012
    Сообщения:
    145
    Симпатии:
    27
    Пол:
    Мужской
    опять же к transition добавляется замечательное свойство transition-delay - задержка анимации
     
  6. Offline

    djwolf Недавно здесь

    Регистрация:
    31.07.2011
    Сообщения:
    18
    Симпатии:
    0
    Пол:
    Мужской
    Решил вопрос дописанием кода в основной
    Код (CODE):
    1. <script type="text/javascript">
    2. jQuery(document).ready(function(){
    3. jQuery('.parent').addClass('dropdown');
    4. jQuery('.parent > a').addClass('dropdown-toggle');
    5. jQuery('.parent > a').attr('data-toggle', 'dropdown');
    6. jQuery('.nav > .parent > a').attr('data-toggle','#');
    7. jQuery('.parent > a').append(' <span class="caret"></span>');
    8. jQuery('.parent > ul').addClass('dropdown-menu');
    9. jQuery('.nav-child .parent').removeClass('dropdown');
    10. jQuery('.nav-child .parent').addClass('dropdown-submenu');
    11. jQuery('.dropdown-submenu > a').removeAttr('class');
    12. jQuery('.dropdown-submenu > a').removeAttr('data-toggle', 'dropdown');
    13. jQuery('.dropdown-submenu > a > span').remove();
    14. jQuery('ul.nav li.dropdown').hover(function() {
    15. jQuery(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn();
    16. }, function() {
    17. jQuery(this).find('.dropdown-menu').stop(true, true).delay(300).fadeOut();
    18. });
    19. });
    20. </script>
     

Поделиться этой страницей

Загрузка...