2016-01-04 3 views
0

У меня есть сайт http://themerkle.com, и я пытаюсь изменить меню гамбургера с палочкой в ​​левом верхнем углу, открывая его при наведении, чтобы открыть его, когда кто-то его щелкнул. Причина в том, что на смартфоне меню остается открытым, потому что наведение не предназначено для поддержки сенсорных устройств.Wordpress change menu from opening on hover to click

Я попытался ищу CSS часть, которая позволяет зависание, но даже после отключения большинства Css линий для верхнего меню, как

#top-menu-selector:hover{color:#BD2A33;-moz-box-shadow: inset 0 0 20px 0 rgba(0,0,0,0.12);-webkit-box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 12);box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 0.12);} 
    #top-menu ul li:hover ul, 
    #top-menu ul li:hover ul li a, 

меню по-прежнему появляется, чтобы открыть при наведении курсора мыши. Я также попытался отключить javascript, но меню все еще открывается. Я сузил его до следующей функции, которая фактически создает меню в sticky.php:

<?php //title attribute gets in the way - remove it 
$menu = wp_nav_menu(array('theme_location' => 'top-menu', 'container' => false, 'fallback_cb' => 'fallback_pages', 'echo' => false)); 
$menu = preg_replace('/title=\"(.*?)\"/','',$menu); 
echo $menu; 
?> 

Я не уверен, где я могу изменить CSS или добавить необходимые JS в меню, чтобы открыть на мыши, любой помощь приветствуется.

UPDATE:

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

<ul class="sf-js-enabled sf-shadow"> 

Теперь мне нужно выяснить, как включить расширение при нажатии.

ОБНОВЛЕНИЕ 2:

Фиксированный путем добавления функции OnClick к главному меню, как например:

<div id="top-menu" onclick="show_hide_menu();"> 

Затем добавив следующий сценарий:

<script type="text/javascript"> 
var clicked = false; 
function show_hide_menu() 
{ 
    if(clicked == false){ 
     document.getElementById("menu-main").style.display = "none"; 
     clicked = true; 
    }else if (clicked == true){ 
     document.getElementById("menu-main").style.display = "block"; 
     clicked = false; 
    } 
} 
</script> 

Решение не требует Мессинг с реализацией наведения и просто добавляет возможность закрыть меню при нажатии на него. Кажется, это также отменяет событие зависания, которое хорошо.

+0

Вы должны добавить функцию OnClick, где запускаемая парить и вызвать функцию их ..... – sourabh

+0

Моя проблема: я не могу найти, где стреляет. элемент ul с классом sf-js-enabled определяется без класса в php-файле. Итак, где-то задан класс для этой конкретной ul, и я не могу найти, где –

+0

наведите указатель на изображение меню. – sourabh

ответ

0
<script> 
$('#top-menu .menu-item-has-children > a').removeAttr('href'); 
$('#top-menu .menu-item-has-children').click(function(){ 
    $(this).children('ul').css({'display':'block','visibility':'visible'}); 
}); 
</script> 

попробовать это и дайте мне знать, если он работает ... это не очень хорошая, но может быть функциональным

+0

Это было достаточно близко, размещенное решение в ОП. Благодаря! –