Recentemente tive um projeto com um sistema de navegação bastante complexo. Os drop downs foram feitos em CSS puro e funcionaram muito bem, mas pareceram hiper. Conforme o mouse passava sobre eles, o menu suspenso era acionado imediatamente, portanto, passar pela barra de navegação – que abrangia toda a largura da página – foi uma experiência chocante.
Usamos posicionamento absoluto para nossos menus suspensos CSS, left: -999empara posicioná-los fora da página e li:hover .subnav { left: 0; }trazê-los de volta à exibição. Isso é melhor do display: none;que ocultar o conteúdo dos menus suspensos dos leitores de tela JAWS e é bem suportado por navegadores IE6.
Eu queria instalar um efeito <a href=” http://github.com/briancherne/jquery-hoverIntent “title=”Visit HoverIntent JS no Github”> HoverIntent </a>, mas não queria depender de javascript para faça. Com algumas pesquisas em <a href=” http://stackoverflow.com/questions/8566090/delay-hover-in-css3 “title=”Visit StackOverflow”> Stack Overflow </a>, encontrei uma resposta fácil usando CSS Atraso de transição .
O CSS (simplificado)
.submenu {
transition: all 0s ease;
}
li:hover .submenu {
transition-delay: .25s;
}Para um exemplo mais completo, <a href=” http://codepen.io/jhogue/pen/payuj “target=”_blank”> aqui está um CodePen </a> com posição alternada mais complicada à esquerda e à direita (mantém a queda para baixo de se estender para fora da área da barra de navegação ou para fora da borda da página).