Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Angelo Rocha

Menú Dropdown com acessiblidade

Por , em Desenvolvimento frontend

Recommended Posts

Angelo Rocha    0

Angelo Rocha
Postado

Galera, não sei se esta é a área correta, e já vi um topico aqui se não me engano sobre isso, porem a duvida é um pouco maior.

Gostaria de saber como fazer para um menu dropdown exibir seus sub-itens quando se apertamos enter ou quando a navegação pela tecla "tab" da o foco no item que tem sub-item.

 

Lendo este artigo consegui fazer isso: http://bit.ly/NFdgnY

 

Porem a questão é, e quando o menu for multi-level?! Este tutorial não funciona, gostaria de saber se existe alguma pseudo classe css, plugin jquery etc... Para fazer com que o drop desca com enter ou quando o foco estiver nele.

 

Desde já agreadeço. :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Basicamente seletor CSS :target:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste</title>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
display: block;
outline: none;
padding: 5px 10px;
}
a:focus {
box-shadow: inset 0 0 10px red;
}
a:hover {
box-shadow: inset 0 0 10px black;
}
body>ul {
display: inline-block;
border: 2px solid green;
}
body>ul>li {
float: left;
}
body>ul>li>ul {
position: absolute;
border: 2px solid pink;
display: none;
}
body>ul>li>ul:target,
body>ul>li:hover>ul {
display: inline-block;
}
</style>
</head>

<body>
<ul>
<li><a href="#menu1">Lorem ipsum</a>
	<ul id="menu1">
		<li><a href="">Dolor sit amet</a></li>
		<li><a href="">Dolor sit amet</a></li>
		<li><a href="">Dolor sit amet</a></li>
		<li><a href="">Dolor sit amet</a></li>
		<li><a href="">Dolor sit amet</a></li>
	</ul>
</li>
<li><a href="#menu2">Lorem ipsum</a>
	<ul id="menu2">
		<li><a href="">Dolor sit amet</a></li>
		<li><a href="">Dolor sit amet</a></li>
		<li><a href="">Dolor sit amet</a></li>
		<li><a href="">Dolor sit amet</a></li>
		<li><a href="">Dolor sit amet</a></li>
	</ul>
</li>
<li><a href="#menu3">Lorem ipsum</a>
	<ul id="menu3">
		<li><a href="">Dolor sit amet</a></li>
		<li><a href="">Dolor sit amet</a></li>
		<li><a href="">Dolor sit amet</a></li>
		<li><a href="">Dolor sit amet</a></li>
		<li><a href="">Dolor sit amet</a></li>
	</ul>
</li>
<li><a href="#menu4">Lorem ipsum</a>
	<ul id="menu4">
		<li><a href="">Dolor sit amet</a></li>
		<li><a href="">Dolor sit amet</a></li>
		<li><a href="">Dolor sit amet</a></li>
		<li><a href="">Dolor sit amet</a></li>
		<li><a href="">Dolor sit amet</a></li>
	</ul>
</li>
</ul>

</body>
</html>

 

O target ajuda justamente nisso pois diferente do focus ele vai inserir os elementos na ordem de navegação. Assim, o "TAB" irá pular pra UL que aparece. :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Angelo Rocha    0

Angelo Rocha
Postado

Olá André Campos!

Não conhecia este recurso, você sabe me dizer qual a compatibilidade

dele com relação aos browsers?

 

Me tira outra dúvida, porque você usa por exemplo:

 

body>ul>li{...}

 

ao invés de:

 

body ul li{...}

 

Não entendo, já vi antes mais não sei do que se trata, se não se importasse

gostaria de saber a diferença de usar dessa forma que você fez e da forma que

eu uso.

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

O :target funciona no IE9+, e nos demais navegadores "standards".

 

O uso do ">" é correria minha mesmo. Serve pra selecionar o elemento que é filho direto do elemento anterior. Por exemplo com "body>ul", eu seleciono apenas os UL que são filhos diretos do BODY.

 

Mas o mais correto é tentar diminuir esse caminho todo, e usar classes únicas e modularizadas, pra evitar do DOM varrer o documento todo a procura dos elementos (lembrando que no CSS, o caminho é lido da direita pra esquerda). :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Angelo Rocha    0

Angelo Rocha
Postado

André, no caso, então tanto faz, usar o ">" como não?

É esta minha dúvida, saber se isso é padrão agora ou não entende, pq nunca usei ^^

 

Evandro Oliveira, eu imagino mesmo, mais no caso em um leve desespero meu, esta foi a única referencia

que encontrei na internet, inclusive, todas as outras soluções que encontrei por busca

referente a "menu dropdown com acessibilidade" me levavam a tutoriais que utilizavam

ele como base.

 

Voces conhecem algum plugins do jQuery que trata isso?

 

Obrigado pela atenção.

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

André, no caso, então tanto faz, usar o ">" como não?

 

Não. Leia isto:

 

http://maujor.com/tutorial/seletores_css21_parte1.php

 

E isto:

 

http://maujor.com/tutorial/seletores_css21_parte2.php

 

Mais isto:

 

http://www.maujor.com/tutorial/seletores-css3.php

 

:thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito