Ir para conteúdo
Fórum Script Brasil
  • 0

Menu com teclas de atalho


dam547

Pergunta

Boa tarde pessoal, estou precisando fazer um menu drop-down com atalhos do teclado, por exemplo:

| Cadastros | Consultas | Relatórios |

Digamos que cada um tenha ítens, então quando for pressionado alguma tecla de função (Alt + C) por exemplo,

mostrasse os subítens do menu Cadastros.

e para navegar por estes subítens, poderia ser usado alguma outra tecla.. tab, ou seta..

A idéia é deixar o menu 100% navegável pelo teclado, mais como sou meio leigo com javascript, peço aos que sabem

dar alguma idéia ou algum link que já tenha isso..

Abraços,

Felipe

Link para o comentário
Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

  • 0

Você já conseguiu fazer o menu ??

Recomendo que faça o menu para só depois controlá-lo pelas teclas !

Não sei se você vai conseguir utilizar o Alt (se conseguir posta aqui como fez)

Para controlar as teclas, você deve utilizar seu respectivo código em Ascii com o uso do KeyCode

Seu código ficaria assim:

<html>
<head>
<title>Minha Página</title>
<script type="text/javascript">
function VerificaTecla() {
tecla = event.keycode
if (tecla==65 || tecla==97) {
//A minúsculo ou maiúsculo
alert("Você pressionou A")
}else if (tecla==66 || tecla==98) {
//B minúsculo ou maiúsculo
alert("Você pressionou B")
}
}
</script>
</head>
<body onkeydown="VerificaTecla()">
Pressione <b>A</b> ou <b>B</b>
</body>
</html>

Não cheguei a testar, mas deve funcionar !

Qualquer coisa posta aí !

Link para o comentário
Compartilhar em outros sites

  • 0

Fala pessoal!

Desculpa a intromissão, mas fiz este script pra ver se ajuda a clarear... rsrs..

<html>
<head>
<title>Minha Página</title>
<script type="text/javascript">
function VerificaTecla(event) {
  subitens = new Array();
  subitens[66] = 'B';
  subitens[67] = 'C';
  var tecla = window.event ? event.keyCode : event.which;
  if (event.altKey && tecla != 18 && !(subitens[tecla] == undefined)) {
    if (document.getElementById(subitens[tecla]).style.display == ''){
      FechaSub(subitens[tecla]);
    }else{
      for (x in subitens){
        FechaSub(subitens[x]);
      }
      AbreSub(subitens[tecla]);
    }
  }
}
function AbreSub(id){
  document.getElementById(id).style.display = '';
}
function FechaSub(id){
  document.getElementById(id).style.display = 'none';
}
</script>
<style>
li{
  font-family : arial;
  font-size   : 12px;
  cursor      : pointer;
}
</style>
</head>
<body onkeydown="VerificaTecla(event)">
  <ul>
    <li onmouseover="java script:AbreSub('B');" onmouseout="java script:FechaSub('B');">Item <span style="text-decoration:underline">B</span></li>
    <li onmouseover="java script:AbreSub('C');" onmouseout="java script:FechaSub('C');">Item <span style="text-decoration:underline">C</span></li>
  </ul>
  <div id="B" style="display: none;">Subitens do item B...</div>
  <div id="C" style="display: none;">Subitens do item C...</div>
</body>
</html>

OBS: testado no FF3 e IE(ca) 8

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...