2014-02-13 2 views
3

Есть ли способ сделать элементы меню верхнего уровня доступными для кликов, пока появляются раскрывающиеся списки?Сделать родительское меню кликабельным

see website

Я использую самозагрузки 3 на моем сайте Wordpress, используя следующие инструкции: http://www.creativewebdesign.ro/en/blog/wordpress/create-a-responsive-wordpress-theme-with-bootstrap-3-header-and-footer/

header.php

 <?php 
      wp_nav_menu(array(
       'menu'    => 'primary', 
       'theme_location' => 'primary', 
       'depth'    => 2, 
       'container'   => 'div', 
       'container_class' => 'collapse navbar-collapse navbar-ex1-collapse menu_left', 
       'menu_class'  => 'nav navbar-nav menu_left_middle', 
       'fallback_cb'  => 'wp_bootstrap_navwalker::fallback', 
       'walker'   => new wp_bootstrap_navwalker()) 
      ); 
     ?> 

     <?php 
      wp_nav_menu(array(
       'menu'    => 'submenu', 
       'theme_location' => 'primary', 
       'depth'    => 2, 
       'container'   => 'div', 
       'container_class' => 'collapse navbar-collapse navbar-ex1-collapse menu_right', 
       'menu_class'  => 'nav navbar-nav menu_right_middle', 
       'fallback_cb'  => 'wp_bootstrap_navwalker::fallback', 
       'walker'   => new wp_bootstrap_navwalker()) 
      ); 
     ?> 

</nav> 

Благодаря

+0

Можете ли вы проделать то же самое на скриншоте? – Nitesh

+0

нет, его невозможно. Но какая-то идея: если вы используете запрос ajax и javascript cookie, можете ли вы это сделать. – mehmetakifalp

+0

Я не могу добавить изображения, но я предоставил ссылку на сайт. Меню справа (искусство/архитектура) и т. Д. – user3222864

ответ

0

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

<a title="Design" href="#" data-toggle="dropdown" class="dropdown-toggle">Design <span class="caret"></span></a> 

Использование:

<a title="Design" href="/design" class="dropdown-toggle">Design <span class="caret"></span></a> 

(или что вы хотите HREF быть).

+0

Я добавил код header.php для nav. Я не могу видеть выше, чтобы отредактировать его. – user3222864

+0

PHP не делает этого. Откройте инструменты разработчика и проверьте элемент, который вы хотите кликать. Он имеет привязную метку вокруг нее со значением href «#».«Действие по умолчанию» тега привязки предотвращается, однако b/c имеет атрибут data-toggle = «dropdown», применяемый к нему. Вам придется удалить этот атрибут данных. Если вы не можете сделать это прямо в коде, и вы не можете его изменить через ваш php (похоже, не так), то в качестве конечного курорта вы можете использовать JS/jQuery для таргетинга $ ('a .dropdown-toggle [data-toggle = "dropdown"] ') – danwarfel

16

Для меня это сработало так: Я предполагаю, что вы делаете использование в wp-bootstrap-navwalker

Откройте WP-самозагрузку-navwalker.php с редактором и посмотрите на линию ок. 83

// If item has_children add atts to a. 
if ($args->has_children && $depth === 0) { 
    $atts['href']  = '#'; 
    $atts['data-toggle'] = 'dropdown'; 
    $atts['class']   = 'dropdown-toggle'; 
} else { 
    $atts['href'] = ! empty($item->url) ? $item->url : ''; 
} 

Изменить этот кусок кода:

// If item has_children add atts to a. 
if ($args->has_children && $depth === 0) { 
    $atts['href'] = ! empty($item->url) ? $item->url : ''; 
    //$atts['data-toggle'] = 'dropdown'; 
    $atts['class']   = 'dropdown-toggle'; 
} else { 
    $atts['href'] = ! empty($item->url) ? $item->url : ''; 
} 

Примечание: $ АТТ [ 'HREF'] включен в настоящее время, то в $ ATTS [ 'данные тумблера'] отключены, что делает ссылка на родительскую ссылку.

Теперь откройте свой стиль.css и добавьте этот фрагмент кода, чтобы активировать функцию наведения для вашего меню WordPress с выпадающим и интерактивным родителем.

.dropdown:hover .dropdown-menu { 
    display: block; 
} 

Примечание: Поведение меню немного изменится на небольших устройствах с небольшими экранами. Дополнительного jQuery не требуется.

+0

Спасибо за это :) – fafchook

+0

только то, что я искал приветствия! –

+0

Это должен быть принятый ответ. Благодаря! – alds

1

Вы можете просто добавить класс 'disabled' в этот элемент, используя jQuery. См. Пример ниже:

<script> 
    jQuery(document).ready(function() { 

      jQuery('ul li > a.dropdown-toggle').addClass('disabled'); 
    }); 

</script> 
Смежные вопросы