Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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. :)
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.
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:
Ângelo, só uma nota. O artigo usado como base é "um pouquinho" obsoleto.
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.
>
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:
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, 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 {
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
body {
ol, ul {
blockquote, q {
blockquote:before, blockquote:after,
q:before, q:after {
table {
a {
a:focus {
a:hover {
body>ul {
body>ul>li {
body>ul>li>ul {
body>ul>li>ul:target,
body>ul>li:hover>ul {
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: