Выпадающее меню по клику

Тема в разделе "Изменение шаблона (кастомизация)", создана пользователем Лузер, 03.03.2015.

  1. Лузер
    Offline

    Лузер Тариф: Спонсор ⇒ Спонсор форума ⇐

    Регистрация:
    12.01.2015
    Сообщения:
    55
    Симпатии:
    0
    Пол:
    Мужской
    Всем привет. Хочу сделать,чтоб выпадающее меню на сайте было не по фокусу а по клику. Нашел на сайте бутстрапа то что мне нужно ,пример кнопка "еще"

    57211b7ca9f2.png
    Но ума не приложу как это все применить к меню.
    Когда на какой-либо страничке прописываю этот код все работает,но как сделать меню такого типа не понимаю.
    Шаблон протостар,я так понял там все эти бутсраповские штучки встроены,подскажите пожалуйста как реализовать
     
  2.  
  3. draff
    Offline

    draff Russian Joomla! Team Команда форума

    Регистрация:
    17.01.2011
    Сообщения:
    6 044
    Симпатии:
    519
    Пол:
    Мужской
    Сначала скопируй шаблон , чтобы при обновлении не потерять изменения.
    Потом создаешь модуль меню,тип Menu и в дополнительных параметрах указываешь суффикс класса меню , с пробелом вначале
    nav-pills . Также укажи показывать подпункты.
    п.с.
    Думаю тема будет востребована многими . Прикреплю
     
    CB9T нравится это.
  4. Лузер
    Offline

    Лузер Тариф: Спонсор ⇒ Спонсор форума ⇐

    Регистрация:
    12.01.2015
    Сообщения:
    55
    Симпатии:
    0
    Пол:
    Мужской
    nav-pills у меня вписано,меню выглядить так-же как на скрине,но пункт меню с подпунктами у меня другой,то-есть подпункты выпадают при наведении мышки,а я хочу чтоб они выпадали по клику на кнопку
     
  5. draff
    Offline

    draff Russian Joomla! Team Команда форума

    Регистрация:
    17.01.2011
    Сообщения:
    6 044
    Симпатии:
    519
    Пол:
    Мужской
    Кликать пробовал ?
     
  6. Лузер
    Offline

    Лузер Тариф: Спонсор ⇒ Спонсор форума ⇐

    Регистрация:
    12.01.2015
    Сообщения:
    55
    Симпатии:
    0
    Пол:
    Мужской
    draff,может мы друг друга не понимаем. Как мне создать кнопку в меню,чтоб тыкнув на нее всплывали подпункты
    ccaa1f1c9fce.png
    в идеале конечно вариант с двойной кнопкой,одна на всю категорию другая на подпункты

    971f983264e8.png
    Но мне хотя бы первый вариант сделать
     
  7. draff
    Offline

    draff Russian Joomla! Team Команда форума

    Регистрация:
    17.01.2011
    Сообщения:
    6 044
    Симпатии:
    519
    Пол:
    Мужской
    Факт . Расписываю свои действия- подвожу курсор к родительскому пункту меню, выводятся подпункты,но не фиксируются .
    Кликаю по родительскому пункту меню, о чем я тебя и спрашивал,а ты не написал четкий ответ,а начинаешь воду лить.
    После клика , выводятся ссылки подменю.
    Чтобы сделать вид как на нижнем скрине, нужно еще и jquery
    Код (javascript):
    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>-->
     
  8. Лузер
    Offline

    Лузер Тариф: Спонсор ⇒ Спонсор форума ⇐

    Регистрация:
    12.01.2015
    Сообщения:
    55
    Симпатии:
    0
    Пол:
    Мужской
    Извиняюсь)
    Когда кликаю на пункт меню,перехожу туда,какой путь указан в этом пункте меню(материал,материалы,перетыкал все варианты),как мне сделать его просто кнопкой с нужным мне названием,для вызова подменю я не понял. Все остальное как у вас,при наведении всплывают подпункты но не фиксируются
    --- добавлено: 03.03.2015, первое сообщение размещено: 03.03.2015 ---
    За скрипт большое спасибо,буду думать куда его сунуть:)
     
  9. draff
    Offline

    draff Russian Joomla! Team Команда форума

    Регистрация:
    17.01.2011
    Сообщения:
    6 044
    Симпатии:
    519
    Пол:
    Мужской
    Тип меню - Системные ссылки -Разделитель
     
  10. Лузер
    Offline

    Лузер Тариф: Спонсор ⇒ Спонсор форума ⇐

    Регистрация:
    12.01.2015
    Сообщения:
    55
    Симпатии:
    0
    Пол:
    Мужской
    draff,мне уже неудобно перед вами,неужели я все так криво обьясняю,мне нужен пункт меню как например в админке джумла
    7a801446e3e7.png
    тыкнул-открылось подменю

    С разделителем ничего не вышло,висит просто название пункта меню и при наведении мышки всплывают подпункты
     
  11. draff
    Offline

    draff Russian Joomla! Team Команда форума

    Регистрация:
    17.01.2011
    Сообщения:
    6 044
    Симпатии:
    519
    Пол:
    Мужской
    Не не, подожди. ))
    В шаблоне prostostar/index.php блок,куда будет выводится горизонтальное меню с суффиксом (пробел)na-pills
    Код (PHP):
    1. <?php if ($this->countModules('position-1')) : ?>
    2. <div class="dropdown">
    3. <jdoc:include type="modules" name="position-1" style="none" />
    4. </div>
    5. <?php endif; ?>

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

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

    Вложения:

    • mod_menu.zip
      Размер файла:
      2.1 КБ
      Просмотров:
      38
    lev и Лузер нравится это.
  12. Лузер
    Offline

    Лузер Тариф: Спонсор ⇒ Спонсор форума ⇐

    Регистрация:
    12.01.2015
    Сообщения:
    55
    Симпатии:
    0
    Пол:
    Мужской
    draff, Вот теперь по настоящему Спасибо,все очень понятно,получилось с первого раза))
    Все сработало,осталось чуть стиль под себя подогнать с этим надеюсь справлюсь. Одна деталь,в пункте меню (тот из которого выпадают подпункты) я выбираю какой-либо материал,с нужным мне названием,так и задумано? Перехода по нему не происходит конечно,но он дает мне название самого пункта,в принципе меня устраивает
    --- добавлено: 03.03.2015, первое сообщение размещено: 03.03.2015 ---
    d5cd89bdfc28.png

    Все вышло как и хотелось) Еще раз спасибо draff ! за суету,извиняюсь что помучал)
     
    Последнее редактирование: 05.03.2015
  13. draff
    Offline

    draff Russian Joomla! Team Команда форума

    Регистрация:
    17.01.2011
    Сообщения:
    6 044
    Симпатии:
    519
    Пол:
    Мужской
    Не материал.Так не будет прямого доступа перейти.
    Тип меню Блог категории, где подпункты и будешь назначать ссылками на материалы этой категории.
     
  14. lev
    Offline

    lev специалист

    Регистрация:
    21.12.2007
    Сообщения:
    676
    Симпатии:
    40
    Пол:
    Мужской
    Похожий вариант ;)
    http://www.joomla-css.nl/en/create-...dify-the-base-template/create-a-dropdown-menu
    --- добавлено: 11.09.2015, первое сообщение размещено: 11.09.2015 ---
    pillsdropdown_demo.jpg
    --- добавлено: 12.09.2015 ---
    Кто поможет разобраться с этим:
    http://www.bootstrapmenumod.net/
    --- добавлено: 12.09.2015 ---
    Код (CODE):
    1. (function($){  
    2.     $(document).ready(function(){
    3.       // dropdown
    4.       $('.parent > a').attr('data-toggle', 'dropdown');
    5.       $('.parent > a').append('<b class="caret"></b>');
    6.       $('.parent > ul').addClass('dropdown-menu');
    7.     });
    8.   })(jQuery);
     

    Вложения:

    • mod_menu.zip
      Размер файла:
      3 КБ
      Просмотров:
      3
  15. draff
    Offline

    draff Russian Joomla! Team Команда форума

    Регистрация:
    17.01.2011
    Сообщения:
    6 044
    Симпатии:
    519
    Пол:
    Мужской
    А суть проблемы?
    Я пока вижу предполагаемый конфликт яваскриптов, из-за использования $ .А в Джумла 3 используется noconflict-
    jQuery
     
  16. lev
    Offline

    lev специалист

    Регистрация:
    21.12.2007
    Сообщения:
    676
    Симпатии:
    40
    Пол:
    Мужской
    У меня не работает :(
    вставил
    Код (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>-->

    поставил mod_menu.zip :eek:


    --- добавлено: 12.09.2015 ---
    Показывать подпункты меню включал отключал нет выпадения
    --- добавлено: 12.09.2015, первое сообщение размещено: 12.09.2015 ---
    Такой вариант не работает:
    Код (CODE):
    1. <script type="text/javascript">
    2. $(document).ready(function(){
    3. $('.parent').addClass('dropdown');
    4. $('.parent > a').addClass('dropdown-toggle');
    5. $('.parent > a').attr('data-toggle', 'dropdown');
    6. $('.nav > .parent > a').attr('data-toggle','#');
    7. $('.parent > a').append(' <span class="caret"></span>');
    8. $('.parent > ul').addClass('dropdown-menu');
    9. $('.nav-child .parent').removeClass('dropdown');
    10. $('.nav-child .parent').addClass('dropdown-submenu');
    11. $('.dropdown-submenu > a').removeAttr('class');
    12. $('.dropdown-submenu > a').removeAttr('data-toggle', 'dropdown');
    13. $('.dropdown-submenu > a > span').remove();
    14. });
    15. </script>

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


    :p
    --- добавлено: 12.09.2015 ---
    Тоже работает но нет результата
    Код (CODE):
    1. <script type="text/javascript">
    2. (function( $ ) {
    3.   $(function() {
    4. $('.parent').addClass('dropdown');
    5. $('.parent > a').addClass('dropdown-toggle');
    6. $('.parent > a').attr('data-toggle', 'dropdown');
    7. $('.nav > .parent > a').attr('data-toggle','#');
    8. $('.parent > a').append(' <span class="caret"></span>');
    9. $('.parent > ul').addClass('dropdown-menu');
    10. $('.nav-child .parent').removeClass('dropdown');
    11. $('.nav-child .parent').addClass('dropdown-submenu');
    12. $('.dropdown-submenu > a').removeAttr('class');
    13. $('.dropdown-submenu > a').removeAttr('data-toggle', 'dropdown');
    14. $('.dropdown-submenu > a > span').remove();
    15. });
    16. })(jQuery);
    17. </script>


    Для меню "nav menunav nav-pills nav-stacked" - все варианты не работает :eek:
     
    Последнее редактирование: 12.09.2015
  17. draff
    Offline

    draff Russian Joomla! Team Команда форума

    Регистрация:
    17.01.2011
    Сообщения:
    6 044
    Симпатии:
    519
    Пол:
    Мужской
    Все стандартное , скрипт мой
    Код (javascript):
    1. jQuery('li.parent').on('click', function (e)  {
    2.         e.preventDefault();
    3.   jQuery('ul.nav-child ').slideToggle();
    4.   });
     
  18. lev
    Offline

    lev специалист

    Регистрация:
    21.12.2007
    Сообщения:
    676
    Симпатии:
    40
    Пол:
    Мужской
    нет у меня он не работает :(
     
  19. draff
    Offline

    draff Russian Joomla! Team Команда форума

    Регистрация:
    17.01.2011
    Сообщения:
    6 044
    Симпатии:
    519
    Пол:
    Мужской
  20. lev
    Offline

    lev специалист

    Регистрация:
    21.12.2007
    Сообщения:
    676
    Симпатии:
    40
    Пол:
    Мужской
    Оффтопик (не в тему) - жми сюда!
     
    Последнее редактирование: 12.09.2015
  21. draff
    Offline

    draff Russian Joomla! Team Команда форума

    Регистрация:
    17.01.2011
    Сообщения:
    6 044
    Симпатии:
    519
    Пол:
    Мужской
    Там трабл после jquery-noconflict.js, идет подключение яваскриптов с использование $
    Скрипт мой работает, но открывается и подменю Услуги с правого меню.
     

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

Загрузка...