Me ayudan con este menu , navegable con teclas y mouse !!!

colote · #1 (**permalink**) 27/05/2009, 05:31

Hola gente !!!

Aca les dejo la direccion para que lo prueben, desde FF me funciona bien.
Sube y baja con las flechas y se puede entrar a las opciones con los numeros del keypad(teclado de la derecha :P ) o los otros.
Pero en Opera tengo un pequeño dilema, cuando carga la pantalla del menu, tengo que apreta TAB + TAB y ESC para que se cargue el foco en la 1º opcion, pero la verdad no se porque me hace eso !!!
En Chrome anda bien como el FF, pero cualquier problemita que tengan me avisan asi vemos de arreglarlo, para que funcione correctamente ...
En IE no me interesa como ande, porque no lo uso, y el menu es para un sistema de web local.
Lo que me gustaria tambien, que cuando baje y suba, sea como cuando le paso el mouse por encima. que se coloree.

Los menu que habilite para probar son en la pantalla principal 1 y 2, y 5
Entran con los numeros o el mouse o seleccionando con las flechas y enter!!!

PROBAR MENU
Usuario: foros
Clave: 1234

Aca les dejo el codigo de la funcion subeybaja.js

Código javascript:

Ver originalcont=1;
function subeybaja(){
 
document.onkeydown =function(e){
if(window.event){tecla = e.keyCode;}else if(e.which){tecla = e.which;}
var donde = document.getElementById('navi');
max = donde.getElementsByTagName('a').length;
//alert("max: "+max);
 
if(cont<1) {cont=1;}
if(cont>max) {cont=max;}
 
if(tecla==40){ 
    cont++;
    document.getElementById('b'+cont).focus();
    //alert("a_"+cont);
    }  //   abajo
 
if(tecla==38){ 
    cont--;
    document.getElementById('b'+cont).focus();
    //alert("a_"+cont);
    }  //   abajo
 
if(tecla == 27){self.location.href='inicio.php';}
 
if(tecla == 48||tecla== 96){ window.close();}         //0
if(tecla == 49||tecla== 97){ b1=document.getElementById('b1');self.location.href=b1;}         //1
if(tecla == 50||tecla== 98){ b2=document.getElementById('b2');self.location.href=b2;}         //2
if(tecla == 51||tecla== 99){ b3=document.getElementById('b3');self.location.href=b3;}         //3
if(tecla == 52||tecla==100){ b4=document.getElementById('b4');self.location.href=b4;}         //4
if(tecla == 53||tecla==101){ b5=document.getElementById('b5');self.location.href=b5;}         //5
if(tecla == 54||tecla==102){ b6=document.getElementById('b6');self.location.href=b6;}         //6
if(tecla == 55||tecla==103){ b7=document.getElementById('b7');self.location.href=b7;}         //7
if(tecla == 56||tecla==104){ b8=document.getElementById('b8');self.location.href=b8;}         //8
if(tecla == 57||tecla==105){ b9=document.getElementById('b9');self.location.href=b9;}         //9
 
}
}

y asi es inicio.php

Código html:

Ver original<html>
<head>
<title>INICIO</title>
<link rel="stylesheet" type="text/css" media="all" href="full.css" />
<script languaje="javascript" src="subeybaja.js"></script>
</head>
 
<body onload="document.getElementById('b1').focus();subeybaja()">
<fieldset>
<legend>MENU PRINCIPAL</legend>
<div id="contendor">
<li id="navi">
<b id="bb" href="#">*******************************</b>
<a id="b1" href="ventas.php">&nbsp;&nbsp;1 - Gesti&oacute;n VENTAS</a>
<a id="b2" href="gestion.php">&nbsp;&nbsp;2 - Gesti&oacute;n GESTION</a>
<a id="b3" href="#">&nbsp;&nbsp;3 - Gesti&oacute;n CAJA</a>
<a id="b4" href="#">&nbsp;&nbsp;4 - CONTABILIDAD</a>
<a id="b5" href="mantenimiento.php">&nbsp;&nbsp;5 - Mantenimientos de Archivos</a>
<a id="b6" href="#">&nbsp;&nbsp;6 - Mantenimiento del Sistema</a>
<hr>
<a id="b7" href="#">&nbsp;&nbsp;7 - CONTABILIDAD EJ. ANTERIOR</a>
<hr>
<b id="b10" href="javascript:window.close();">&nbsp;&nbsp;0 - CERRAR SISTEMA</a>
</li>
</div>
 
</fieldset>
 
</body>
</html>

Gracias!!!

Saludos, Ricardo.

colote · #2 (**permalink**) 27/05/2009, 08:04

Solucione el tema del foco cuando sube y baja por el menu con las flechitas ... toma foco al igual que con el mouse