 |
| Estás en: Juan Rodríguez, web personal > JavaScript > Índice de guiones > Menú escamoteable < |
Verificado en: Opera 9.20Opera 6.05, 7 y 8 Firefox 1.5 y 3.0b5 Mozilla 1.8 Netscape 7 Internet Explorer 7
|
Con este guión se puede mostrar/ocultar un menú escamoteable. Sitúa el ratón sobre Menú escamoteable (arriba, a la izquierda) para que aparezca y lo mismo para que desaparezca. La activación del menú escamoteable se produce al situar el ratón encima (onMouseOver) pero puede hacerse "onClick", (pulsa aquí para probarlo). Como punto de activación puede usarse un texto (como en el ejemplo) o un gráfico. El guión soporta múltiples puntos de activación y el menú visualizado con uno de esos puntos puede ocultarse con otro y a la inversa. Prueba a pulsar aquí y ahora aquí. |
El menú se estructura en base a capas (<div>) e inicialmente está oculto. Su posicionamiento es relativo respecto al punto de control, que en este caso es el botón Menú escamoteable. El menú no es más que una tabla con enlaces, que puede podría sustituirse o añadirle gráficos, formularios, etc... admitiendo la apariencia estética que se os ocurra. Puede hacerse que el menú permanezca fijo en pantalla (aunque se haga "scroll") modificando la propiedad "position:absolute" por "position:fixed". (Con I.E. 6 o anteriores este cambio no surtirá efecto). |
Ejecutar Instalación Ver código Descargar + guiones
Código en la cabecera (head) de la página
<script type="text/javascript">
<!-- inicio
var mov;
var xpos=-200;
function VerOcultarMenu() {
if (mov==2) { mov=-2} else {mov=2};
document.getElementById("Menu").style.top=parseInt(document.getElementById("puntero").style.top)+30+"px";
document.getElementById("Menu").style.visibility="visible";
MoverMenu() }
function MoverMenu(){
xpos=xpos+4*mov;
if(xpos <- 200) {xpos=-200};
if(xpos > 10) {xpos=10};
document.getElementById("Menu").style.left=xpos+"px";
if (xpos <=-200 || xpos >=10) {window.clearTimeout() } else {window.setTimeout("MoverMenu();",100);} }
// final -->
</script>
Código en el cuerpo (body) de la página (tabla menú)
<div id="Menu" style="position:absolute; visibility:hidden; background-color:#FFFFCC; z-index:5">
<table style="border:2px silver outset; width:175px; text-align:center">
<tr><td><a href="http://www.juan-rodriguez.net" title="Juan Rodríguez, consultor - Consultoría de Empresas e Internet">Juan Rodríguez, consultor</a></td></tr>
<tr><td><a href="http://www.juan-rodriguez.net/organizacion/index.html" title="Juan Rodríguez, consultor - Consultoría en Organización y Gestión">Consultoría de Empresas</a></td></tr>
<tr><td><a href="http://www.juan-rodriguez.net/usabilidad/index.html" title="Juan Rodríguez, consultor - Consultoría en Usabilidad">Consultoría en Usabilidad</a></td></tr>
<tr><td><a href="http://www.juan-rodriguez.net/internet/index.html" title="Juan Rodríguez, consultor - Consultoría en Internet">Consultoría en Internet</a></td></tr>
<tr><td><hr></td></tr>
<tr><td><a href="http://www.begues.net/opera/index.html" title="Opera... ¡ el navegador !">Opera... ¡ el navegador !</a></td></tr>
<tr><td><a href="http://www.begues.net/begues/index.html" title="Begues (Barcelona)">Begues (Barcelona)</a></td></tr>
<tr><td><a href="http://www.castefa.net" title="Directorio de Castelldefels (Barcelona)">Directorio de Castelldefels</a></td></tr>
<tr><td><a href="http://www.begues.net/javascript/index.html" title="Guiones (scripts) de JavaScript">JavaScript</a></td></tr>
<tr><td><hr></td></tr>
<tr><td><a href="http://www.beguesinternet.es" title="Begues Internet, s.l. - Servicios en Internet">Begues Internet, s.l.</a></td></tr>
<tr><td><a href="http://www.casaenventa.info" title="Casa en Venta">Casa en Venta</a></td></tr>
<tr><td><a href="http://www.casaenventa.info/comunidades/index.html" title="Comunidades de Propietarios">Comunidades de Propietarios</a></td></tr>
</table>
</div>
Código en el cuerpo (body) de la página (punto de activación)
<div id ="puntero" style="position:absolute; top:65px; left:10px; width:175px; border:2px silver outset; text-align:center">
<a href="javascript:void(0)" onmouseover="VerOcultarMenu();" title="MOSTRAR / OCULTAR el Menú escamoteable">
<span style="font-color:red; font-variant:small-caps; font-weight:bold">Menú escamoteable</span></a>
</div>
Copyright ©
Juan Rodríguez, consultor y
Begues Internet, s.l.
Todos los derechos reservados
Aviso Legal
Cuidar de nuestro entorno natural,
puede y debe ser cosa de todos.
Por ejemplo, no gastando papel para
imprimir una información que siempre
puedes tener en la pantalla de tu pc.
- -
Juan Rodríguez, consultor
Castelldefels (Barcelona)
