Проблема с зависанием в меню Drupal - PullRequest
Новая
       23

Проблема с зависанием в меню Drupal

0 голосов
/ 26 апреля 2011

У меня есть меню, и когда пользователь наводит на него меню, появляется подменю.Только подменю исчезает, когда вы не наводите текст.

Позвольте мне попытаться прояснить его с помощью изображений.
При наведении текста (как и должно быть):
enter image description here приводит к этому enter image description here

При наведении курсора на область рядом с текстом:
enter image description here приводит к этому enter image description here

И чтобы сделать его еще более сложным, это происходит только в Safari en Chrome (я думаю, что это движок webkit), и он не делает это постоянно :)

Я предполагаю, что это проблема css, нокто-нибудь знает, где искать?

(О, и это веб-сайт Drupal, так что я не знаю, что это играет ...)

ОБНОВЛЕНИЕ
Вот как выглядит HTML: enter image description here

1 Ответ

2 голосов
/ 26 апреля 2011

Существуют модули, которые могут сделать это за вас, например, Nice Menus.

Подменю, вероятно, не является дочерним по отношению к родительскому меню в DOM. Это, наверное, что-то вроде этого: 

<ul id="parent">
    <li>menu item</li>
</ul>
<ul id="submenu">
    <li>menu item</li>
</ul>

Таким образом, когда вы наводите курсор мыши на подменю, mouseLeave / mouseOut срабатывает на родительском элементе. Вы можете решить это несколькими способами. Один из них состоит в том, чтобы реструктурировать ваш HTML таким образом, чтобы подменю было в родительском: 

<ul id="parent">
    <li>menu item
        <ul id="submenu">
            <li>menu item</li>
        </ul>
    </li>
</ul>

или для обнаружения / сохранения состояния обнаруженного элемента в JavaScript. Для этого одним из возможных способов является сохранение с использованием объекта данных jQuery или добавление класса (например, «on») в меню, над которым вы наведите курсор мыши, и использование селекторов дочерних / дочерних элементов, чтобы определить, находитесь ли вы в подменю. Если вы не находитесь в родительском или подменю, удалите класс «on».

Есть много способов сделать это, как в JavaScript / HTML / CSS, так и с помощью модулей Drupal. Покажите некоторый код, если вы все еще в замешательстве.

...