 |
| Estás en: Juan Rodríguez, web personal > JavaScript > Índice de guiones > Menú flotante con HTML y CSS < |
Verificado en: Opera 9.02 y 9.20Opera 6.05, 7 y 8 Firefox 1.5, 3.0b5 y 3.0.6 Firefox 1.0.2 Mozilla 1.8 Netscape 7 Internet Explorer 7
|
Este menú no está generado con JavaScript, y se ha incluido en estas páginas sobre guiones, por tratarse de un recurso útil, de fácil programación y que puede ser una alternativa interesante. Está generado exclusivamente con HTML y el soporte de estilos CSS. Con Firefox, Opera, Mozilla, Netscape o I.E. 7, desplazar verticalmente la página para observar su comportamiento. El menú "flota". En Internet Explorer 6 y anteriores no flota pero en la versión para MAC sí. Curioso. |
El menú no es más que una tabla con las opciones (ver <body>) cuyo diseño gráfico y posicionamiento en la página se establece mediante códigos de estilo (ver <head>). Es muy parecido (en su funcionamiento) al utilizado en su momento en nuestras páginas. El actual menú de la derecha si que es flotante incluso con Internet Explorer 6. Su programación excede del objetivo de estas páginas, por lo que no se incluye. |
Instalación Ver código Descargar + guiones
Código en la cabecera (head) de la página
<style type="text/css">
div.menuf {margin:0; text-align:center; position:fixed; top:20px; left:20px; width:11em; z-index:5; color:#000000; background-color:#FED}
div.menuf a {display:block; padding:1px; font-weight:bold; margin:1px; text-decoration:none; color:blue; background-color:#CC9}
div.menuf a:hover {color:#000; background-color:#0F0}
div.menuf p.menuf {margin:0; padding:0.3em 0.4em; border:thin outset #999; color:#000; background-color:#FED; font-family:Tahoma, Arial}
</style>
Código en el cuerpo (body) de la página (tabla menú)
<div class="menuf">
<p class="menuf">
<a href="http://www.juan-rodriguez.net" title="Juan Rodríguez, consultor - Consultoría de Empresas e Internet">Juan Rodríguez, consultor</a>
<a href="http://www.begues.net/javascript/index.html" title="Scripts de JavaScript">JavaScript</a>
<a href="http://www.begues.net/opera/index.html" title="Opera... ¡ el navegador !">Opera</a>
<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</a>
<a href="http://www.juan-rodriguez.net/usabilidad/index.html" title="Juan Rodríguez, consultor - Consultoría en Usabilidad">Usabilidad</a>
<a href="http://www.juan-rodriguez.net/internet/index.html" title="Juan Rodríguez, consultor - Consultoría en Internet">Internet</a>
<a href="http://www.begues.net/begues/index.html" title="Begues (Barcelona)">Begues</a>
<a href="http://www.castefa.net" title="Directorio de Castelldefels (Barcelona)">Castelldefels</a>
--- <br>¡ Con Opera, de aquí no me mueven !
</p></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)
