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

Discussion in 'Изменение шаблона (кастомизация)' started by Лузер, Mar 3, 2015.

Page 1 of 2
  1. Лузер
    Offline

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

    Joined:
    Jan 12, 2015
    Messages:
    55
    Likes Received:
    0
    Gender:
    Male
    Всем привет. Хочу сделать,чтоб выпадающее меню на сайте было не по фокусу а по клику. Нашел на сайте бутстрапа то что мне нужно ,пример кнопка "еще"

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

  2. Ads Master

     
  3. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    Сначала скопируй шаблон , чтобы при обновлении не потерять изменения.
    Потом создаешь модуль меню,тип Menu и в дополнительных параметрах указываешь суффикс класса меню , с пробелом вначале
    nav-pills . Также укажи показывать подпункты.
    п.с.
    Думаю тема будет востребована многими . Прикреплю
     
    OlegK, Mar 3, 2015
    #2
    CB9T likes this.
  4. Лузер
    Offline

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

    Joined:
    Jan 12, 2015
    Messages:
    55
    Likes Received:
    0
    Gender:
    Male
    nav-pills у меня вписано,меню выглядить так-же как на скрине,но пункт меню с подпунктами у меня другой,то-есть подпункты выпадают при наведении мышки,а я хочу чтоб они выпадали по клику на кнопку
     
    Лузер, Mar 3, 2015
    #3
  5. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    Кликать пробовал ?
     
    OlegK, Mar 3, 2015
    #4
  6. Лузер
    Offline

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

    Joined:
    Jan 12, 2015
    Messages:
    55
    Likes Received:
    0
    Gender:
    Male
    draff,может мы друг друга не понимаем. Как мне создать кнопку в меню,чтоб тыкнув на нее всплывали подпункты
    ccaa1f1c9fce.png
    в идеале конечно вариант с двойной кнопкой,одна на всю категорию другая на подпункты

    971f983264e8.png
    Но мне хотя бы первый вариант сделать
     
    Лузер, Mar 3, 2015
    #5
  7. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    Факт . Расписываю свои действия- подвожу курсор к родительскому пункту меню, выводятся подпункты,но не фиксируются .
    Кликаю по родительскому пункту меню, о чем я тебя и спрашивал,а ты не написал четкий ответ,а начинаешь воду лить.
    После клика , выводятся ссылки подменю.
    Чтобы сделать вид как на нижнем скрине, нужно еще и 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>-->
     
    OlegK, Mar 3, 2015
    #6
  8. Лузер
    Offline

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

    Joined:
    Jan 12, 2015
    Messages:
    55
    Likes Received:
    0
    Gender:
    Male
    Извиняюсь)
    Когда кликаю на пункт меню,перехожу туда,какой путь указан в этом пункте меню(материал,материалы,перетыкал все варианты),как мне сделать его просто кнопкой с нужным мне названием,для вызова подменю я не понял. Все остальное как у вас,при наведении всплывают подпункты но не фиксируются
    --- добавлено: Mar 3, 2015, первое сообщение размещено: Mar 3, 2015 ---
    За скрипт большое спасибо,буду думать куда его сунуть:)
     
    Лузер, Mar 3, 2015
    #7
  9. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    Тип меню - Системные ссылки -Разделитель
     
    OlegK, Mar 3, 2015
    #8
  10. Лузер
    Offline

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

    Joined:
    Jan 12, 2015
    Messages:
    55
    Likes Received:
    0
    Gender:
    Male
    draff,мне уже неудобно перед вами,неужели я все так криво обьясняю,мне нужен пункт меню как например в админке джумла
    7a801446e3e7.png
    тыкнул-открылось подменю

    С разделителем ничего не вышло,висит просто название пункта меню и при наведении мышки всплывают подпункты
     
    Лузер, Mar 3, 2015
    #9
  11. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    Не не, подожди. ))
    В шаблоне 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
     

    Attached Files:

    OlegK, Mar 3, 2015
    #10
    lev and Лузер like this.
  12. Лузер
    Offline

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

    Joined:
    Jan 12, 2015
    Messages:
    55
    Likes Received:
    0
    Gender:
    Male
    draff, Вот теперь по настоящему Спасибо,все очень понятно,получилось с первого раза))
    Все сработало,осталось чуть стиль под себя подогнать с этим надеюсь справлюсь. Одна деталь,в пункте меню (тот из которого выпадают подпункты) я выбираю какой-либо материал,с нужным мне названием,так и задумано? Перехода по нему не происходит конечно,но он дает мне название самого пункта,в принципе меня устраивает
    --- добавлено: Mar 3, 2015, первое сообщение размещено: Mar 3, 2015 ---
    d5cd89bdfc28.png

    Все вышло как и хотелось) Еще раз спасибо draff ! за суету,извиняюсь что помучал)
     
    Last edited: Mar 5, 2015
    Лузер, Mar 3, 2015
    #11
  13. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    Не материал.Так не будет прямого доступа перейти.
    Тип меню Блог категории, где подпункты и будешь назначать ссылками на материалы этой категории.
     
    OlegK, Mar 4, 2015
    #12
  14. lev
    Offline

    lev Активист => Cпециалист <=

    Joined:
    Dec 21, 2007
    Messages:
    687
    Likes Received:
    40
    Gender:
    Male
    Похожий вариант ;)
    http://www.joomla-css.nl/en/create-...dify-the-base-template/create-a-dropdown-menu
    --- добавлено: Sep 11, 2015, первое сообщение размещено: Sep 11, 2015 ---
    pillsdropdown_demo.jpg
    --- добавлено: Sep 12, 2015 ---
    Кто поможет разобраться с этим:
    http://www.bootstrapmenumod.net/
    --- добавлено: Sep 12, 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);
     

    Attached Files:

    lev, Sep 12, 2015
    #13
  15. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    А суть проблемы?
    Я пока вижу предполагаемый конфликт яваскриптов, из-за использования $ .А в Джумла 3 используется noconflict-
    jQuery
     
    OlegK, Sep 12, 2015
    #14
  16. lev
    Offline

    lev Активист => Cпециалист <=

    Joined:
    Dec 21, 2007
    Messages:
    687
    Likes Received:
    40
    Gender:
    Male
    У меня не работает :(
    вставил
    Код (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:


    --- добавлено: Sep 12, 2015 ---
    Показывать подпункты меню включал отключал нет выпадения
    --- добавлено: Sep 12, 2015, первое сообщение размещено: Sep 12, 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>

    --- добавлено: Sep 12, 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
    --- добавлено: Sep 12, 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:
     
    Last edited: Sep 12, 2015
    lev, Sep 12, 2015
    #15
  17. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    Все стандартное , скрипт мой
    Код (javascript):
    1. jQuery('li.parent').on('click', function (e)  {
    2.         e.preventDefault();
    3.   jQuery('ul.nav-child ').slideToggle();
    4.   });
     
    OlegK, Sep 12, 2015
    #16
  18. lev
    Offline

    lev Активист => Cпециалист <=

    Joined:
    Dec 21, 2007
    Messages:
    687
    Likes Received:
    40
    Gender:
    Male
    нет у меня он не работает :(
     
    lev, Sep 12, 2015
    #17
  19. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    ссылку на сайт
     
    OlegK, Sep 12, 2015
    #18
  20. lev
    Offline

    lev Активист => Cпециалист <=

    Joined:
    Dec 21, 2007
    Messages:
    687
    Likes Received:
    40
    Gender:
    Male
    Оффтопик (не в тему) - жми сюда!
     
    Last edited: Sep 12, 2015
    lev, Sep 12, 2015
    #19
  21. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    Там трабл после jquery-noconflict.js, идет подключение яваскриптов с использование $
    Скрипт мой работает, но открывается и подменю Услуги с правого меню.
     
    OlegK, Sep 12, 2015
    #20
Page 1 of 2
< Как переопределить вид расширения в Джумла 1.5.х-3.х.х | Как переопределить вид расширения в Джумла 1.5.х-3.х.х >

Share This Page

Loading...