0

Очень нравится выпадающее меню в теме ColorNews (демо сайт). Меню я из этой темы позаимствовал, встроил на свой сайт, однако выяснилась проблема - исчезновение меню при уходе hover неполноценное - меню уже не видно, но если быстро навести мышку обратно туда, где было меню, то оно опять появляется. Жутко некрасиво и неудобно. Понятно, что это из-за кода:

transition: all 0.5s ease;

Но если его отрубить - меню теряет всю свою прелесть. В общем, вопрос - как это исправить? css, jquery - неважно. Я хочу, чтобы переставшее быть видимым меню перестало реагировать на hover еще до истечения 0.5s.

Прошу помочь.

https://codepen.io/Flector/pen/GLRQPE

#main-menu {
    background-color: black;
    min-height: auto;
    border-bottom: 1px solid #302e2e;
    border-top: 1px solid #302e2e;    
    margin-bottom: 10px;
}
#main-menu ul {
    flex-wrap: wrap;
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}
#main-menu ul > li {font-size:12px;
    line-height:1;
    list-style: none;
    padding: 0;
    margin: 0;
    border-right: 1px solid #302e2e;
    transition: background 0.2s ease;
    position: relative;font-size:14px;
}

#main-menu ul > li li{
    border-right: none;
}

#main-menu ul > li.menu-item-has-children {
    padding-right: 10px;
}

#main-menu ul > li.menu-item-has-children > a {
    position: relative;
}
#main-menu ul > li.menu-item-has-children > a:after {
    position: absolute;
    top: 45%;
    right: -11px;
    content: "\e800";
    color: #ffffff;
    transform: translateY(-45%);          
    padding:15px 18px 13px 8px;
    font-size: 1rem;
}

#main-menu ul.sub-menu > li.menu-item-has-children > a::after {
    content: "\e801";
}

#main-menu ul > li:hover,
#main-menu ul > li.current-menu-item,
#main-menu ul > li.current-menu-ancestor,
#main-menu ul > li.current-menu-parent {
    background-color: blue;
    text-shadow: 0px 1px 1px #0c0d43;
}

#main-menu ul > li a {
    display: block;
    font-size: 14px;
    color: #fff;    
    text-transform: uppercase;
    padding: 1.5rem 2rem 1.1rem 2rem;
    line-height:1.2;
}

#main-menu ul > li a.active {
    background-color: blue;
}

#main-menu ul.sub-menu,
#main-menu ul.children {
    background: #272727 none repeat scroll 0 0;
    position: absolute;
    min-width: 270px;
    left: 0;
    top: 120%;
    visibility: hidden;
    opacity: 0;
    z-index: 11111;
    transition: all 0.5s ease;
}

#main-menu ul.sub-menu li {
    border-bottom: 1px solid #302e2e;
    float: none;
}

#main-menu ul > li:hover > .sub-menu,
#main-menu ul > li:hover > .children {
    top: 100%;
    opacity: 1;
    visibility: visible;
}

#main-menu ul.sub-menu ul,
#main-menu ul.children ul {
    left: 110%;
    top: 0 !important;
}

#main-menu ul.children li,
#main-menu ul.sub-menu li {
    width: 100%;
}

#main-menu .sub-menu > li:hover > ul {
    left: 100%;
}
<nav id="main-menu">
    <ul>
        <li id="menu-item-11482" class="current-menu-item"><a href="http://wptest.ru/" aria-current="page">Главная</a></li>
        <li id="menu-item-140" class="menu-item-has-children"><a href="http://wptest.ru/1">Меню 2</a>
            <ul class="sub-menu">
                <li id="menu-item-11479"><a href="http://wptest.ru/2/">Под-меню пункт 1</a></li>
                <li id="menu-item-11478"><a href="http://wptest.ru/3/">Под-меню пункт 2</a></li>
                <li id="menu-item-11480"><a href="http://wptest.ru/4/">Под-меню пункт 3</a></li>
                <li id="menu-item-11451" class="menu-item-has-children"><a href="http://wptest.ru/5/">Под-меню пункт 4</a>
                    <ul class="sub-menu">
                        <li id="menu-item-11481"><a href="http://wptest.ru/6/">Под-под меню</a></li>
                    </ul>
                </li>
                <li id="menu-item-11477"><a href="http://wptest.ru/7/">Под-меню пункт 5</a></li>
            </ul>
        </li>
        <li id="menu-item-5"><a href="http://wptest.ru/8/">Меню 3</a></li>
        <li id="menu-item-113"><a href="http://wptest.ru/9/">Меню 4</a></li>
    </ul>    
</nav>

я бы хотел что-то типа:

jQuery('#main-menu').hover(function(){

	}, function() {
        jQuery('#main-menu').css("pointer-events","none").delay(500).('#main-menu').css("pointer-events","initial");
})

но оно не восстанавливает pointer-events

7
  • Рекомендую ознакомиться - ru.stackoverflow.com/a/939174/265406 Должно помочь.
    – UModeL
    31 мар 2019 в 14:46
  • Вызывать ховер с помощью js/jq и определять callback функцию. Покажите код который есть, чтобы была возможность показать наглядно
    – ccxdec
    31 мар 2019 в 19:46
  • Добавил код для примера.
    – Flector
    31 мар 2019 в 22:17
  • Никогда! Не используйте opacity, именно поэтому и появляется данный эффект. Прозрачность не делает объект недоступным на экране. Что делать? Посмотреть реализацию (примерную), основанную на изменении высоты подменю.
    – DaemonHK
    1 апр 2019 в 3:35
  • это мне ничем не помогает. мне нравится это меню - красиво появляется и исчезает. нужно лишь исправить косяк с opacity
    – Flector
    1 апр 2019 в 5:11

2 ответа 2

1

Если я правильно понял Вашу задачу, то можно воспользоваться css-свойством pointer-events. При уходе hover с sub-menu задаёте ему значение none, и тогда повторное наведение не сработает. А при hover на родителя возвращаете значение auto:

$('.sub-menu').mouseleave(function(){
  $(this).css('pointer-events', 'none');
});

$('.menu-item-has-children').mouseover(function(){
  $('.sub-menu').css('pointer-events', 'auto');
});
#main-menu {
    background-color: black;
    min-height: auto;
    border-bottom: 1px solid #302e2e;
    border-top: 1px solid #302e2e;    
    margin-bottom: 10px;
}
#main-menu ul {
    flex-wrap: wrap;
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}
#main-menu ul > li {font-size:12px;
    line-height:1;
    list-style: none;
    padding: 0;
    margin: 0;
    border-right: 1px solid #302e2e;
    transition: background 0.2s ease;
    position: relative;font-size:14px;
}

#main-menu ul > li li{
    border-right: none;
}

#main-menu ul > li.menu-item-has-children {
    padding-right: 10px;
}

#main-menu ul > li.menu-item-has-children > a {
    position: relative;
}
#main-menu ul > li.menu-item-has-children > a:after {
    position: absolute;
    top: 45%;
    right: -11px;
    content: "\e800";
    color: #ffffff;
    transform: translateY(-45%);          
    padding:15px 18px 13px 8px;
    font-size: 1rem;
}

#main-menu ul.sub-menu > li.menu-item-has-children > a::after {
    content: "\e801";
}

#main-menu ul > li:hover,
#main-menu ul > li.current-menu-item,
#main-menu ul > li.current-menu-ancestor,
#main-menu ul > li.current-menu-parent {
    background-color: blue;
    text-shadow: 0px 1px 1px #0c0d43;
}

#main-menu ul > li a {
    display: block;
    font-size: 14px;
    color: #fff;    
    text-transform: uppercase;
    padding: 1.5rem 2rem 1.1rem 2rem;
    line-height:1.2;
}

#main-menu ul > li a.active {
    background-color: blue;
}

#main-menu ul.sub-menu,
#main-menu ul.children {
    background: #272727 none repeat scroll 0 0;
    position: absolute;
    min-width: 270px;
    left: 0;
    top: 120%;
    visibility: hidden;
    opacity: 0;
    z-index: 11111;
    transition: all 0.5s ease;
}

#main-menu ul.sub-menu li {
    border-bottom: 1px solid #302e2e;
    float: none;
}

#main-menu ul > li:hover > .sub-menu,
#main-menu ul > li:hover > .children {
    top: 100%;
    opacity: 1;
    visibility: visible;
}

#main-menu ul.sub-menu ul,
#main-menu ul.children ul {
    left: 110%;
    top: 0 !important;
}

#main-menu ul.children li,
#main-menu ul.sub-menu li {
    width: 100%;
}

#main-menu .sub-menu > li:hover > ul {
    left: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="main-menu">
    <ul>
        <li id="menu-item-11482" class="current-menu-item"><a href="http://wptest.ru/" aria-current="page">Главная</a></li>
        <li id="menu-item-140" class="menu-item-has-children"><a href="http://wptest.ru/1">Меню 2</a>
            <ul class="sub-menu">
                <li id="menu-item-11479"><a href="http://wptest.ru/2/">Под-меню пункт 1</a></li>
                <li id="menu-item-11478"><a href="http://wptest.ru/3/">Под-меню пункт 2</a></li>
                <li id="menu-item-11480"><a href="http://wptest.ru/4/">Под-меню пункт 3</a></li>
                <li id="menu-item-11451" class="menu-item-has-children"><a href="http://wptest.ru/5/">Под-меню пункт 4</a>
                    <ul class="sub-menu">
                        <li id="menu-item-11481"><a href="http://wptest.ru/6/">Под-под меню</a></li>
                    </ul>
                </li>
                <li id="menu-item-11477"><a href="http://wptest.ru/7/">Под-меню пункт 5</a></li>
            </ul>
        </li>
        <li id="menu-item-5"><a href="http://wptest.ru/8/">Меню 3</a></li>
        <li id="menu-item-113"><a href="http://wptest.ru/9/">Меню 4</a></li>
    </ul>    
</nav>

1
  • точно, ваш вариант идеальный. спасибо.
    – Flector
    1 апр 2019 в 9:19
1

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

$("#main-menu ul li a").on('click', function(){
  $(this).toggleClass('active');
});
#main-menu {
    background-color: black;
    min-height: auto;
    border-bottom: 1px solid #302e2e;
    border-top: 1px solid #302e2e;    
    margin-bottom: 10px;
}
#main-menu ul {
    flex-wrap: wrap;
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}
#main-menu ul > li {font-size:12px;
    line-height:1;
    list-style: none;
    padding: 0;
    margin: 0;
    border-right: 1px solid #302e2e;
    transition: background 0.2s ease;
    position: relative;font-size:14px;
}

#main-menu ul > li li{
    border-right: none;
}

#main-menu ul > li.menu-item-has-children {
    padding-right: 10px;
}

#main-menu ul > li.menu-item-has-children > a {
    position: relative;
}
#main-menu ul > li.menu-item-has-children > a:after {
    position: absolute;
    top: 45%;
    right: -11px;
    content: "\e800";
    color: #ffffff;
    transform: translateY(-45%);          
    padding:15px 18px 13px 8px;
    font-size: 1rem;
}

#main-menu ul.sub-menu > li.menu-item-has-children > a::after {
    content: "\e801";
}

#main-menu ul > li:hover,
#main-menu ul > li.current-menu-item,
#main-menu ul > li.current-menu-ancestor,
#main-menu ul > li.current-menu-parent {
    background-color: blue;
    text-shadow: 0px 1px 1px #0c0d43;
}

#main-menu ul > li a {
    display: block;
    font-size: 14px;
    color: #fff;    
    text-transform: uppercase;
    padding: 1.5rem 2rem 1.1rem 2rem;
    line-height:1.2;
}

#main-menu ul > li a.active {
    background-color: blue;
}

#main-menu ul.sub-menu,
#main-menu ul.children {
    background: #272727 none repeat scroll 0 0;
    position: absolute;
    min-width: 270px;
    left: 0;
    top: 120%;
    visibility: hidden;
    opacity: 0;
    z-index: 11111;
    transition: all 0.5s ease;
}

#main-menu ul.sub-menu li {
    border-bottom: 1px solid #302e2e;
    float: none;
}

#main-menu ul > li a.active ~ .sub-menu,
#main-menu ul > li.active ~ .children {
    top: 100%;
    opacity: 1;
    visibility: visible;
}

#main-menu ul.sub-menu ul,
#main-menu ul.children ul {
    left: 100%;
    top: 0 !important;
}

#main-menu ul.children li,
#main-menu ul.sub-menu li {
    width: 100%;
}

#main-menu .sub-menu > li:hover > ul {
    left: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="main-menu">
    <ul>
        <li id="menu-item-11482" class="current-menu-item"><a href="http://wptest.ru/" aria-current="page">Главная</a></li>
        <li id="menu-item-140" class="menu-item-has-children"><a href="http://wptest.ru/1">Меню 2</a>
            <ul class="sub-menu">
                <li id="menu-item-11479"><a href="http://wptest.ru/2/">Под-меню пункт 1</a></li>
                <li id="menu-item-11478"><a href="http://wptest.ru/3/">Под-меню пункт 2</a></li>
                <li id="menu-item-11480"><a href="http://wptest.ru/4/">Под-меню пункт 3</a></li>
                <li id="menu-item-11451" class="menu-item-has-children"><a href="http://wptest.ru/5/">Под-меню пункт 4</a>
                    <ul class="sub-menu">
                        <li id="menu-item-11481"><a href="http://wptest.ru/6/">Под-под меню</a></li>
                    </ul>
                </li>
                <li id="menu-item-11477"><a href="http://wptest.ru/7/">Под-меню пункт 5</a></li>
            </ul>
        </li>
        <li id="menu-item-5"><a href="http://wptest.ru/8/">Меню 3</a></li>
        <li id="menu-item-113"><a href="http://wptest.ru/9/">Меню 4</a></li>
    </ul>    
</nav>

1
  • 1
    кастрировать меню до click я бы смог и сам. нужен hover.
    – Flector
    1 апр 2019 в 8:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.