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

Всем привет. Хочу сделать,чтоб выпадающее меню на сайте было не по фокусу а по клику. Нашел на сайте бутстрапа то что мне нужно ,пример кнопка "еще"


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

 

nav-pills у меня вписано,меню выглядить так-же как на скрине,но пункт меню с подпунктами у меня другой,то-есть подпункты выпадают при наведении мышки,а я хочу чтоб они выпадали по клику на кнопку

 

draff,может мы друг друга не понимаем. Как мне создать кнопку в меню,чтоб тыкнув на нее всплывали подпункты

в идеале конечно вариант с двойной кнопкой,одна на всю категорию другая на подпункты


Но мне хотя бы первый вариант сделать

 

Извиняюсь)
Когда кликаю на пункт меню,перехожу туда,какой путь указан в этом пункте меню(материал,материалы,перетыкал все варианты),как мне сделать его просто кнопкой с нужным мне названием,для вызова подменю я не понял. Все остальное как у вас,при наведении всплывают подпункты но не фиксируются

--- добавлено: 03.03.2015, первое сообщение размещено: 03.03.2015 ---

За скрипт большое спасибо,буду думать куда его сунуть

 

draff,мне уже неудобно перед вами,неужели я все так криво обьясняю,мне нужен пункт меню как например в админке джумла

тыкнул-открылось подменю

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

 

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

--- добавлено: 03.03.2015, первое сообщение размещено: 03.03.2015 ---

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

 

Похожий вариант
http://www.joomla-css.nl/en/create-...dify-the-base-template/create-a-dropdown-menu

--- добавлено: 11.09.2015, первое сообщение размещено: 11.09.2015 ---

--- добавлено: 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);

 

У меня не работает
вставил

Код (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

--- добавлено: 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>

--- добавлено: 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" - все варианты не работает

 

нет у меня он не работает

 

не нужно