Как поправить transition эффект?
186
31 декабря 2019, 19:10
Очень нравится выпадающее меню в теме 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
Answer 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>Answer 2
Не стал углубляться в код. Задача была сделать так же как и на демо-сайте, вот пример, не законченный конечно, ибо копаться дальше в ваших стилях я думаю вы должны сами.
$("#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>
-
17:01
-
11:24
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47573 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30499 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23641 visits
- Как через css изменить цвет png изображения? 10351 visits
- Blob video url download 9962 visits
- Php curl запрос через прокси с авторизацией 9214 visits
- Работа с captcha vk api 8096 visits
© "hostciti.net" 30.11.2024 | 12:46