Добрый день, хотел бы у себя на сайте http://oldikon.oldi-k.ru/ реализовать вложенное меню кнопкой btn-group, но не как не могу понять как это сделать может кто то сталкивался? Шаблон пишу в ручную используя Joomla 3.3 и Bootstrap 3.1 Вот код верхнего меню Spoiler Код (PHP): <nav class="navbar navbar-default" role="navigation"> <div class="container"> <?php if($this->countModules('menu')) : ?> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Menu</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="brand"> <a class="navbar-brand hidden-lg hidden-md hidden-sm" href="#"><?php echo $app->getCfg('sitename'); ?></a> </div> </div> <?php endif; ?> <div class="navbar-collapse navbar-collapse collapse"> <jdoc:include type="modules" name="menu" style="none" /> </div> </div> </nav> <script type="text/javascript"> (function($){ $(document).ready(function(){ $('.dropdown-toggle').dropdown(); $('.parent').addClass('dropdown'); $('.parent > a').addClass('dropdown-toggle'); $('.parent > a').attr('data-toggle', 'dropdown'); $('.parent > a').attr('data-target', '#'); $('.parent > a').append(' <b class="caret"></b>'); $('.parent > ul').addClass('dropdown-menu'); $('.nav-child .parent').removeClass('dropdown'); $('.nav-child .parent .caret').css('display', 'none'); $('.nav-child .parent').addClass('dropdown-submenu'); }); })(jQuery); </script> Вложенный пункт меню сейчас выглядит так а нужно что бы вложенное меню выводилось вот так, то есть разделенное Вот код этой кнопочки Spoiler Код (PHP): <!-- Split button --> <div class="btn-group"> <button type="button" class="btn btn-danger">Действие</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Меню с переключением</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Действие</a></li> <li><a href="#">Другое действие</a></li> <li><a href="#">Что-то иное</a></li> <li class="divider"></li> <li><a href="#">Отдельная ссылка</a></li> </ul> </div>
честно скажу не как там в bootstrap но в обычном CSS, сделай тегу a:hover цвет красный, а его потомку a:hover>b - малиновый или какой там у тебя (кстати может и без знака ">" прокатит, но тогда должен быть пробел) если есть другие псевдо теги типа :active то с ними надо сделать то же самое почитай: :active :hover
Вы меня не так поняли, мне нужно что бы кнопка услуги как бы разделилась на 2 кнопки, то есть, нажимаешь на услуги переходит в раздел услуги, нажимаешь на иконку вниз открывается dropdown меню.
если надо, чтобы кнопка разделялась только при её активации, то тогда надо отлавливать ID пункта меню Код (PHP): $itmID = JRequest::get('ItemID'); if($itmID==/*к примеру*/45) { /*применение стилей*/ } и естественно если ID равен заданному то применяются нужные стили понятно? или опять не так понял!
не совсем, перейдите на сайт http://oldikon.oldi-k.ru/ там в самом верху есть кнопочка Действие, и вот я хочу сделать так что бы кнопка услуги работала точно так же как я догадываюсь нужно менять и дописывать этом скрипте Spoiler: Код <script type="text/javascript"> (function($){ $(document).ready(function(){ $('.dropdown-toggle').dropdown(); $('.parent').addClass('dropdown'); $('.parent > a').addClass('dropdown-toggle'); $('.parent > a').attr('data-toggle', 'dropdown'); $('.parent > a').attr('data-target', '#'); $('.parent > a').append(' <b class="caret"></b>'); $('.parent > ul').addClass('dropdown-menu'); $('.nav-child .parent').removeClass('dropdown'); $('.nav-child .parent .caret').css('display', 'none'); $('.nav-child .parent').addClass('dropdown-submenu'); }); })(jQuery); </script> --- добавлено: May 19, 2014, первое сообщение размещено: May 19, 2014 --- если что то вот ссылка на эту кнопку на сайте bootstrap http://bootstrap-3.ru/components.php#btn-dropdowns-split
хочешь чтобы у тебя, тут Код (html): <li class="item-116 deeper parent dropdown"> <a href="/uslugi.html" class="dropdown-toggle" data-toggle="dropdown" data-target="#"> Услуги <b class="caret"></b> </a> <ul class="nav-child unstyled small dropdown-menu"> <li class="item-122"> <a href="/uslugi/silovye-barery.html"> Силовые барьеры </a> </li> </ul> </li> вместо ссылки были два button? тут три варианта: 1. полностью переписать класс по созданию меню 2. делать подмену JS'ом уже на странице 3. перед отображением страницы менять часть html лично я бы, взял последний вариант в твоём шаблоне где то формируется меню, ты отлавливаешь его вывод в буфер, подменяешь нужным тебе html кодом, потом отправляешь обратно в буфер ^^^^^^^^^ последовательность действий должна быть такой ^^^^^^^^^
