Меню Hover Delayed Close?

Я хочу добавить задержку при выводе мыши из меню наведения. Вот мой codepen: http://codepen.io/anon/pen/MYjzVb Меню Hover Delayed Close?

Пожалуйста, обратите внимание, что я использовал эти строки для CSS переходов:

-webkit-transition: visibility 0.65s ease-in; 
-moz-transition: visibility 0.65s ease-in;

Но это не работает. Я пользуюсь браузером Chrome, также пытаюсь просмотреть его в Firefox, но это не помогает.

Пожалуйста, помогите!

источник

2014-12-29 Imran Omer

Вам нужно JavaScript для этого. –

@ chipChocolate.py Можете ли вы отправить ответ, какой код я должен использовать для достижения этого? Спасибо –

Конечно, я создам ответ. Просто хотел знать, что вы в порядке с помощью JavaScript-решения. –

Вы можете использовать J avaScript для обработки событий mouseenter и mouseleave и использовать setTimeout() для задержки (5s) на мероприятии mouseleave.

Вы можете установить задержку через переменную delay.

Updated CodePen

var items = document.querySelectorAll('.drop_menu > li'); 
 
var delay = 5000; 
 

 
for (i = 0; i < items.length; i++) { 
 
    items[i].addEventListener('mouseenter', function() { 
 
    var c = this.children 
 
    for (j = 0; j < c.length; j++) { 
 
     if (c[j].localName == 'ul') { 
 
     c[j].style.display = 'block'; 
 
     c[j].style.position = 'absolute'; 
 
     } 
 
    } 
 
    }); 
 
    items[i].addEventListener('mouseleave', function() { 
 
    mouseLeave(this, j); 
 
    }); 
 
} 
 

 
function mouseLeave(el, j) { 
 
    setTimeout(function() { 
 
    var c = el.children; 
 
    for (j = 0; j < c.length; j++) { 
 
     if (c[j].localName == 'ul') { 
 
     c[j].style.display = 'none'; 
 
     } 
 
    } 
 
    }, delay) 
 
}

.drop_menu { 
 
    background: #10BDF5; 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style-type: none; 
 
    height: 25px; 
 
} 
 
.drop_menu li { 
 
    display: inline-block; 
 
} 
 
.drop_menu li a { 
 
    padding: 3px 6px; 
 
    display: block; 
 
    color: #FFF; 
 
    text-decoration: none; 
 
    font-size: 11px; 
 
    line-height: 22px; 
 
} 
 
/* Submenu */ 
 

 
.drop_menu ul { 
 
    position: absolute; 
 
    display: none; 
 
    list-style-type: none; 
 
} 
 
.drop_menu > li { 
 
    position: relative; 
 
} 
 
.drop_menu li:hover { 
 
    background: #51C7ED; 
 
} 
 
.drop_menu li ul { 
 
    left: 0px; 
 
    top: 28px; 
 
    background: #51C7ED; 
 
    padding: 0px; 
 
    border-bottom: 5px solid #1292BB; 
 
    border-bottom-right-radius: 3px; 
 
    border-bottom-left-radius: 3px; 
 
} 
 
.drop_menu li ul li a { 
 
    padding: 1px 4px; 
 
    display: block; 
 
    width: 150px; 
 
    font-size: 11px; 
 
    text-indent: 11px; 
 
    background-color: #10BDF5; 
 
} 
 
.drop_menu li:hover ul li a:hover { 
 
    background: #51C7ED; 
 
} 
 
#panel { 
 
    background: #10BDF5; 
 
    color: #FFF; 
 
    font-size: 11px; 
 
    text-align: left; 
 
    border: 1px solid #30B3DE; 
 
    padding: 3px 4px; 
 
}

<div id="panel"> 
 
    <ul class="drop_menu"> 
 
    <li><a href="upgrade.php">Upgrade Account</a> 
 
    </li> 
 
    <li><a href="link.php">Link One</a> 
 
     <ul> 
 
     <li><a href="link.php">link</a> 
 
     </li> 
 
     <li><a href="link.php">link</a> 
 
     </li> 
 
     <li><a href="link.php">link</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="link.php">Link Two</a> 
 
    </li> 
 
    </ul> 
 
</div>

источник

2014-12-29 07:35:22

Спасибо chipChocolate.py, я очень благодарен за ваше время и ответ. –

@ImranOmer - Безболезненно. :) –

1- без анимации:

/**RESETING BROWSER STYLE*/ 
 
*{box-sizing: border-box; padding: 0; margin: 0} 
 

 
/**SETTING THE ROOT ELEMENT BACKGROUND*/ 
 
:root{background: #ccc} 
 

 
/**REMOVING THE STYLE ON ALL LIST IN [id=panel]*/ 
 
[id=panel] li{ 
 
    list-style-type: none 
 
} 
 

 
/**INIT OUR DROP MENU*/ 
 
.drop_menu { 
 
    background: #10BDF5; 
 
    height: 25px 
 
} 
 
/* SUBMENU position:absolute AND OPACITY INSTEAD OF VISIBILITY and ease-out not ease-in*/ 
 
.drop_menu ul { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 28px; 
 
    height: 0; /**SET THIS TO ZERO SINCE WE CAN'T ANIMATE display: none*/ 
 
    overflow: hidden; /**YOU NEED THIS TO HIDE THE LIST*/ 
 
    background:#51C7ED; 
 
    border-bottom: 5px solid transparent; 
 
    border-bottom-right-radius: 3px; 
 
    border-bottom-left-radius: 3px; 
 
    opacity: 0; /**DO NOT DISPLAY THE LIST ON INIT STATE*/ 
 
    transition:opacity 0 5s linear, height 0 5s linear,border-bottom 0 5s linear/**TRANSITION ON OPACITY WITHOUT DELAY BUT ON HEIGHT WITH A DELAY GREATER OR EGAL THE OPACITY ANIMATION DURATION*/ 
 
} 
 
.drop_menu li:hover ul { 
 
    transition:height 0s ease-out ;/**TRANSITION ONLY ON HEIGHT*/ 
 
    opacity: 1; 
 
    border-bottom: 5px solid #1292BB; 
 
    height: 76px /**SET THE HEIGHT ON MOUVE IN*/ 
 
} 
 
/**GIVING position: relative TO THE PARENT OF OUR UNORDERED LIST SINCE IT HAS position:absolute */ 
 

 
.drop_menu li { float:left; position: relative} 
 
.drop_menu li a { 
 
    padding:3px 6px; 
 
    display:block; 
 
    color:#FFF; 
 
    text-decoration:none; 
 
    font-size: 11px; 
 
    line-height: 22px; 
 
} 
 

 

 

 

 
.drop_menu li:hover { position:relative; background:#51C7ED; } 
 

 
.drop_menu ul a { 
 
    padding:1px 4px; 
 
    display:block; 
 
    width:150px; 
 
    font-size: 11px; 
 
    text-indent:11px; 
 
    background-color:#10BDF5; 
 
} 
 
.drop_menu li:hover ul li a { 
 
    padding:1px 4px; 
 
    display:block; 
 
    width:150px; 
 
    font-size: 11px; 
 
    text-indent:11px; 
 
    background-color:#10BDF5; 
 
} 
 
.drop_menu li:hover ul li a:hover { background:#51C7ED } 
 

 
#panel { 
 
    background: #10BDF5; 
 
    color: #FFF; 
 
    font-size: 11px; 
 
    text-align: left; 
 
    border: 1px solid #30B3DE; 
 
    padding: 3px 4px 
 
     
 
}

<div id="panel"> 
 
    <ul class="drop_menu"> 
 
    <li><a href="upgrade.php">Upgrade Account</a></li> 
 
    <li><a href="link.php">Link One</a> 
 
    \t <ul> 
 
    \t \t <li><a href="link.php">link</a></li> 
 
    \t \t <li><a href="link.php">link</a></li> 
 
    \t \t <li><a href="link.php">link</a></li> 
 
    \t </ul> 
 
    </li> 
 
    <li><a href="link.php">Link Two</a></li> 
 
    </ul> 
 
</div>

2- оживленно

/**RESETING BROWSER STYLE*/ 
 
*{box-sizing: border-box; padding: 0; margin: 0} 
 

 
/**SETTING THE ROOT ELEMENT BACKGROUND*/ 
 
:root{background: #ccc} 
 

 
/**REMOVING THE STYLE ON ALL LIST IN [id=panel]*/ 
 
[id=panel] li{ 
 
    list-style-type: none 
 
} 
 

 
/**INIT OUR DROP MENU*/ 
 
.drop_menu { 
 
    background: #10BDF5; 
 
    height: 25px 
 
} 
 
/* SUBMENU position:absolute AND OPACITY INSTEAD OF VISIBILITY and ease-out not ease-in*/ 
 
.drop_menu ul { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 28px; 
 
    height: 0; /**SET THIS TO ZERO SINCE WE CAN'T ANIMATE display: none*/ 
 
    overflow: hidden; /**YOU NEED THIS TO HIDE THE LIST*/ 
 
    background:#51C7ED; 
 
    border-bottom: 5px solid transparent; 
 
    border-bottom-right-radius: 3px; 
 
    border-bottom-left-radius: 3px; 
 
    opacity: 0; /**DO NOT DISPLAY THE LIST ON INIT STATE*/ 
 
    transition:opacity 0.65s ease-out, height 0 0.68s linear /**TRANSITION ON OPACITY WITHOUT DELAY BUT ON HEIGHT WITH A DELAY GREATER OR EGAL THE OPACITY ANIMATION DURATION*/ 
 
} 
 
.drop_menu li:hover ul { 
 
    transition:height 0s ease-out ;/**TRANSITION ONLY ON HEIGHT*/ 
 
    opacity: 1; 
 
    border-bottom: 5px solid #1292BB; 
 
    height: 76px /**SET THE HEIGHT ON MOUVE IN*/ 
 
} 
 
/**GIVING position: relative TO THE PARENT OF OUR UNORDERED LIST SINCE IT HAS position:absolute */ 
 

 
.drop_menu li { float:left; position: relative} 
 
.drop_menu li a { 
 
    padding:3px 6px; 
 
    display:block; 
 
    color:#FFF; 
 
    text-decoration:none; 
 
    font-size: 11px; 
 
    line-height: 22px; 
 
} 
 

 

 

 

 
.drop_menu li:hover { position:relative; background:#51C7ED; } 
 

 
.drop_menu ul a { 
 
    padding:1px 4px; 
 
    display:block; 
 
    width:150px; 
 
    font-size: 11px; 
 
    text-indent:11px; 
 
    background-color:#10BDF5; 
 
} 
 
.drop_menu li:hover ul li a { 
 
    padding:1px 4px; 
 
    display:block; 
 
    width:150px; 
 
    font-size: 11px; 
 
    text-indent:11px; 
 
    background-color:#10BDF5; 
 
} 
 
.drop_menu li:hover ul li a:hover { background:#51C7ED } 
 

 
#panel { 
 
    background: #10BDF5; 
 
    color: #FFF; 
 
    font-size: 11px; 
 
    text-align: left; 
 
    border: 1px solid #30B3DE; 
 
    padding: 3px 4px 
 
     
 
}

<div id="panel"> 
 
    <ul class="drop_menu"> 
 
    <li><a href="upgrade.php">Upgrade Account</a></li> 
 
    <li><a href="link.php">Link One</a> 
 
    \t <ul> 
 
    \t \t <li><a href="link.php">link</a></li> 
 
    \t \t <li><a href="link.php">link</a></li> 
 
    \t \t <li><a href="link.php">link</a></li> 
 
    \t </ul> 
 
    </li> 
 
    <li><a href="link.php">Link Two</a></li> 
 
    </ul> 
 
</div>

источник

2014-12-29 07:03:59

Но проблема в том, что мышь приближается к области зависшего меню, которую она открывает, однако она должна наводиться/открываться, когда мышь набирает «ссылку», а не область рядом с ссылкой. Вы можете заметить это, запустив этот код на этой странице stackoverflow слишком. –

@Имран Омер. Смотрите обновленную скрипку. –

Спасибо за ваши усилия, но я хочу, чтобы способ, как он открывается здесь: http://codepen.io/anon/pen/MYjzVb, и после открытия он закрывается через 5 секунд при выводе мыши. Можем ли мы так поступить? –

Меню Hover Delayed Close?

ответ

Смежные вопросы