Вопрос Как сделать, чтобы два меню открывались одинаково

Тема в разделе "Внешний вид, шаблоны, графика", создана пользователем lev, 17.09.2015.

  1. lev
    Offline

    lev специалист

    Регистрация:
    21.12.2007
    Сообщения:
    676
    Симпатии:
    40
    Пол:
    Мужской
    есть два меню топ и правое, том меню открывается при наведении, правое при нажатии.
    Правое закрывается при нажатии, топ закрывается когда курсор уйдет.

    Нашел как сделать чтобы открывались при наведении
    https://groups.google.com/forum/#!topic/twitter-bootstrap-stackoverflow/4bIzTmU89Ys

    Код (css):
    1. .dropdown-menu .sub-menu {
    2. left: 100%;
    3. position: absolute;
    4. top: 0;
    5. visibility: hidden;
    6. margin-top: -1px;
    7. }
    8.  
    9. .dropdown-menu li:hover .sub-menu {
    10. visibility: visible;
    11. }
    12.  
    13. .dropdown:hover .dropdown-menu {
    14. display: block;
    15. }
    16.  
    17. .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    18. margin-top: 0;
    19. }
    20.  
    21. .navbar .sub-menu:before {
    22. border-bottom: 7px solid transparent;
    23. border-left: none;
    24. border-right: 7px solid rgba(0, 0, 0, 0.2);
    25. border-top: 7px solid transparent;
    26. left: -7px;
    27. top: 10px;
    28. }
    29. .navbar .sub-menu:after {
    30. border-top: 6px solid transparent;
    31. border-left: none;
    32. border-right: 6px solid #fff;
    33. border-bottom: 6px solid transparent;
    34. left: 10px;
    35. top: 11px;
    36. left: -6px;
    37. }


    Нужно как сделать открытие и закрытие при нажатии
     
    Последнее редактирование: 18.09.2015
  2.  
  3. CB9T
    Offline

    CB9T Преподаватель по J! Команда форума

    Регистрация:
    21.05.2010
    Сообщения:
    2 464
    Симпатии:
    305
    Пол:
    Мужской
  4. lev
    Offline

    lev специалист

    Регистрация:
    21.12.2007
    Сообщения:
    676
    Симпатии:
    40
    Пол:
    Мужской
    Знаю что не работает даже в 3.5 это еще не решили может модулем и получиться сейчас пробую в топ загнать
    --- добавлено: 17.09.2015, первое сообщение размещено: 17.09.2015 ---
    самое смешное на их сайте это меню работает
    https://www.joomla.org/
    :eek:
    -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
    --- добавлено: 18.09.2015 ---
    Еще вариант но тоже близкий но не то :p
    Все равно без вставок в шаблон не вышло :(
    https://groups.google.com/forum/#!topic/twitter-bootstrap-stackoverflow/4bIzTmU89Ys

    mod_menu.zip
    В папку с шаблоном помещаем кастомизированный макет меню,стянул с джумлафорум) по пути /templates/prostostar/html/mod_menu .
    В дополнительных параметрах меню указать
    Альтернативный макет
    Код (CODE):
    1. bootstrap-dropdown


    А это "bootstrap-dropdown" в топ меню проставить, чтобы его не перелопатило :p

    Кстати ссылкам не надо проставлять "dropdown-toggle" ;)

    у меня работает
    http://foto-s.ru/
    :eek:
    --- добавлено: 18.09.2015 ---
    Если из кода
    Код (CODE):
    1. <script type="text/javascript">
    2.    (function($){
    3.     $(document).ready(function(){
    4.      $('.dropdown-toggle').dropdown();
    5.       // dropdown
    6.       $('.parent').addClass('dropdown');
    7.       $('.parent > a').addClass('dropdown-toggle');
    8.       $('.parent > a').attr('data-toggle', 'dropdown');
    9.      $('.parent > a').attr('data-target', '#');
    10.       $('.parent > a').append('<b class="caret"></b>');
    11.       $('.parent > ul').addClass('dropdown-menu');
    12.      $('.nav-child .parent').removeClass('dropdown');
    13.      $('.nav-child .parent .caret').css('display', 'none');
    14.       $('.nav-child .parent').addClass('dropdown-submenu');
    15.     });
    16.   })(jQuery);
    17. </script>

    удалить
    Код (CODE):
    1. $('.parent > a').append('<b class="caret"></b>');

    то в родительском пункте меню указываем CSS-класс ссылки
    Код (CODE):
    1. dropdown-toggle

    Что это дает не будет колыхаться меню если курсором водите по ним :rolleyes:
    -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
    --- добавлено: 18.09.2015 ---
    Есть еще вариант без jquery :D
    класс бокового меню
    Код (CODE):
    1. nav-pills nav-stacked

    класс топ меню
    Код (CODE):
    1. nav-pills


    Вам понадобиться всего две вещи:

    1. mod_menu2.zip
    В папку с шаблоном помещаем кастомизированный макет меню, стянул с Joomlaфорум) по пути /templates/prostostar/html/mod_menu .
    В дополнительных параметрах меню указать
    Альтернативный макет
    Код (CODE):
    1. bootstrap-dropdown

    во всех меню :eek:

    2.
    модуль Blank Module
    http://extensions.joomla.org/extension/core-enhancements/coding-a-scripts-integration/blank-module
    - с модулем просто указываешь позицию, отображать везде и отключаешь заголовок
    ЗЫ. Такой мод всегда полезен, как не обновлялся движок данная вставка будет нетронута, более тог можно отображать в разных местах, где считаете это удобным.

    и в "CSS + some Scripts etc for < head > section"

    Разместить CSS
    Код (CODE):
    1. <style>
    2. .dropdown-menu .sub-menu {
    3.     left: 100%;
    4.     position: absolute;
    5.     top: 0;
    6.     visibility: hidden;
    7.     margin-top: -1px;
    8. }
    9.  
    10. .dropdown-menu li:hover .sub-menu {
    11.     visibility: visible;
    12. }
    13.  
    14. .dropdown:hover .dropdown-menu {
    15.     display: block;
    16. }
    17.  
    18. .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    19.     margin-top: 0;
    20. }
    21.  
    22. .navbar .sub-menu:before {
    23.     border-bottom: 7px solid transparent;
    24.     border-left: none;
    25.     border-right: 7px solid rgba(0, 0, 0, 0.2);
    26.     border-top: 7px solid transparent;
    27.     left: -7px;
    28.     top: 10px;
    29. }
    30. .navbar .sub-menu:after {
    31.     border-top: 6px solid transparent;
    32.     border-left: none;
    33.     border-right: 6px solid #fff;
    34.     border-bottom: 6px solid transparent;
    35.     left: 10px;
    36.     top: 11px;
    37.     left: -6px;
    38. }
    39. </style>


    Важно "bootstrap-dropdown" ставить на главное меню, а на боковое не ставить

    Не чего больше :mad:
     

    Вложения:

    • mod_menu.zip
      Размер файла:
      4.2 КБ
      Просмотров:
      2
    • mod_menu2.zip
      Размер файла:
      4.3 КБ
      Просмотров:
      0
    Последнее редактирование: 21.09.2015

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

Загрузка...