коснитесь и почувствуйте пользовательское раскрывающееся меню HTML

Я создал собственное раскрывающееся меню на странице HTML + JavaScript. Я хочу, чтобы это меню действовало следующим образом:

  • При нажатии кнопки «Freunde» появляется раскрывающееся меню.
  • При повторном нажатии кнопки раскрывающееся меню исчезает.
  • Когда курсор мыши покидает "область" кнопки + выпадающее меню, он исчезает

Выпадающее меню состоит из основного блока div с несколькими блоками div («элементы меню»).

Мой первый подход заключался в том, чтобы поместить onmouseout() в главный div выпадающего меню, но возникла следующая проблема: как только я наведу курсор на внутренний div, onmouseout() будет истинным, и поскольку внутренние div заполняют весь основной div, раскрывающееся меню видно только до тех пор, пока пользователь не наводит на него курсор.

Поэтому я попытался решить его так же, как лайтбокс JQuery, а именно поместить «фоновый» div на весь экран и вставить туда раскрывающееся меню и установить там onmouseover(). Это было бы почти идеально, но это также влияет на кнопку «Freunde».

Так есть ли способ объединить событие из разных элементов? Нравиться

if(cursor is not over Button && cursor is not over DDMenu)  set invisible

Я отметил желаемое на следующем изображении

введите здесь описание изображения


javascript menu html css mousehover
person Valentino Ru    schedule 13.11.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Предполагая, что вы настроены как

<ul>
    <li></li>
    <li></li>
</ul>

Вы можете настроить свой CSS следующим образом:

#nav ul li ul { display: none; }
#nav ul li.active:hover ul { display: block; }

А затем настройте свой JS следующим образом:

var menuClick = function() {
    $(this).toggleClass('active');
    menuHover();
};
var menuHover = function() {
    $('#nav li.active').hover(function() {

    }, function() {
        $(this).removeClass('active');
    });
});

$('#nav > ul > li').on('click', menuClick);

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

person Chad    schedule 13.11.2012