Aprende a crear un navegador dinámico con capas. Al pasar el ratón por encima de los enlaces aparece una descripción de éstos.
Actualización: Este artículo es uno de los primeros que se escribió para DesarrolloWeb.com. Explica la creación de un menú dinámico, que muestra un submenú al pasar con el ratón por encima del menú principal. Hoy diría que casi es una reliquia, pues muestra cómo se hacían las cosas hace aproximadamente dos décadas.
Si hoy, septiembre de 2019, tuviese que hacer este mismo ejercicio buscaría algún plugin que me lo resolviera de una manera sencilla. Si se usa jQuery existen decenas de plugins que hacen menús similares, con cantidad de funcionalidades interesantes. Pero definitivamente, lo mejor sería usar Web Components para poder reutilizar el código en proyectos de una manera cómoda.
No obstante, como valor didáctico, la lectura de este artículo e intentarlo por ti mismo con alguna de estas ideas, puede estar muy bien.
Crear un menú dinámico con Javascript
Ya hemos recibido más de una solicitud pidiendonos la realización de este reportaje que, en unos simples pasos, te permitirá crear una barra de navegación dinámica usando capas. Haremos que unas capas muestren información sobre el enlace donde esté situado el ratón.
Para comprender este ejercicio es muy recomendable que se lea despueús del reportaje para ocultar y mostrar capas, publicado en este mismo sitio.
1. Colocamos la capa donde se situarán los enlaces
La capa donde van a estar los enlaces tendría esta forma, como es código HTML la colocaremos dentro del <BODY> de la página:
<div align="" id="enlaces" style="font-size: 10pt; font-family: arial,verdana,helvetica; font-weight: bold; color: #333399; position: absolute; height: 58; width: 100; background-color: #ffffcc; text-align: right;top: 10px;left: 10px">
<a href="#" OnMouseOver="muestra(capa1)" OnMouseOut= "oculta(capa1)">Mis Amigos</a>
<br>
<a href="#" OnMouseOver="muestra(capa2)" OnMouseOut= "oculta(capa2)">Mi pueblo</a>
<br>
<a href="#" OnMouseOver="muestra(capa3)" OnMouseOut= "oculta(capa3)">Enlaces</a>
</div>
Lo importante de la capa, y donde tenemos que fijar la atención es en los enlaces. Cuando colocamos el ratón sobre un enlace y cuando lo retiramos de él se llama a las funciones muestra() y oculta() pasándoles el nombre de la capa que se desea mostrar o ocultar.
Si tenemos más opciones en nuestra barra de navegación nada más tendríamos que añadir más enlaces.
También hay que destacar la declaración de estilos de la capa (atributo style de la etiqueta <DIV>), pero esto no son más que
estilos css.
2. Colocamos las capas de explicación de cada enlace
Cada capa es una etiqueta <DIV>, se muestran a continuación:
<div id="descripcion1" style= "position:Absolute;left:150; top:10; background-color:#cccccc; visibility:hidden;width:250px;height:58px;font-size: 8pt; font-family: arial,verdana,helvetica; color: #333399;padding:5px">Los amigos reunidos jamás serán vencidos<br>Con todo el texto que desees</div>
<div id="descripcion2" style= "position:Absolute;left:150; top:10; background-color:#cccccc; visibility:hidden;width:250px;height:58px;font-size: 8pt; font-family: arial,verdana,helvetica; color: #333399;padding:5px">El pueblo más turístico de todo el polo norte, a 20.000 kilómetros de la gasolinera más cercana</div>
<div id="descripcion3" style= "position:Absolute;left:150; top:10; background-color:#cccccc; visibility:hidden;width:250px;height:58px;font-size: 8pt; font-family: arial,verdana,helvetica; color: #333399;padding:5px">Todos los enlaces que necesitas para entrar en Internet con las máximas garantías de éxito.</div>
En este código hay que destacar que cada capa tiene un nombre, asignado gracias al atributo id de la etiqueta <DIV>.
Además, todas las capas tienen una buena lista de estilos CSS, el más significativo en este caso es el que hace que en un principio las capas estén ocultas: visibility:hidden.
Los demás estilos aplicados a cada capa son nada más que estilos, los puedes cambiar y ponerlos a tu gusto, así como el texto de las capas que será el que convenga en cada momento.
Por útimo, señalar que si habías incluido más enlaces en la barra de navegación, deberás poner más capas con descripciones de estos.
3. Colocamos el Javascript
Hay que recordar que este ejercicio está hecho a continuación del reportaje de cómo mostrar y ocultar capas con Javascript, y que la mayor parte del siguiente código Javascript ya está comentado.
En líneas generales, se debe conservar el mismo Javascript que el de la página de mostrar-ocultar capas. Veamos el código y a continuación lo comentamos:
var capa
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init() {
if (ns4) {
capa1 = document.descripcion1
capa2 = document.descripcion2
capa3 = document.descripcion3
}
if (ie4) {
capa1 = descripcion1.style
capa2 = descripcion2.style
capa3 = descripcion3.style
}
}
function muestra(obj) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible"
}
function oculta(obj) {
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden"
}
En las primeras líneas detectamos cuál es el navegador que está utilizando el usuario.
Luego tenemos la función init(), que es la única que cambia con respecto al ejemplo de mostrar-ocultar capas. En concreto, hemos colocado el código que sirve para inicializar las variables de capa, que se asocian con las capas donde has colocado las descripciones.
Para finalizar con el script, se pueden ver las funciones que muestran y ocultan capas.
4. Último detalle
No se nos debe olvidar colocar en la etiqueta <BODY> el evento onload para ejecutar la función init() una vez que se ha terminado de cargar la página. De esta manera:
<body onLoad="init()">
5. El código completo de la página
<html>
<head>
<title>Navegador con capas</title>
<script language="javascript">
var capa
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init() {
if (ns4) {
capa1 = document.descripcion1
capa2 = document.descripcion2
capa3 = document.descripcion3
}
if (ie4) {
capa1 = descripcion1.style
capa2 = descripcion2.style
capa3 = descripcion3.style
}
}
function muestra(obj) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible"
}
function oculta(obj) {
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden"
}
</script>
</head>
<body onLoad="init()" link="#333399" vlink="#333399">
<!-- CAPA CON LOS DISTINTOS ENLACES -->
<div align="" id="enlaces" style="font-size: 10pt; font-family: arial,verdana,helvetica; font-weight: bold; color: #333399; position: absolute; height: 58; width: 100; background-color: #ffffcc; text-align: right;top: 10px;left: 10px">
<a href="#" OnMouseOver="muestra(capa1)" OnMouseOut= "oculta(capa1)">Mis Amigos</a>
<br>
<a href="#" OnMouseOver="muestra(capa2)" OnMouseOut= "oculta(capa2)">Mi pueblo</a>
<br>
<a href="#" OnMouseOver="muestra(capa3)" OnMouseOut= "oculta(capa3)">Enlaces</a>
</div>
<!-- CAPAS CON LAS EXPLICACIONES -->
<div id="descripcion1" style= "position:Absolute;left:150; top:10; background-color:#cccccc; visibility:hidden;width:250px;height:58px;font-size: 8pt; font-family: arial,verdana,helvetica; color: #333399;padding:5px">Los amigos reunidos jamás serán vencidos<br>Con todo el texto que desees</div>
<div id="descripcion2" style= "position:Absolute;left:150; top:10; background-color:#cccccc; visibility:hidden;width:250px;height:58px;font-size: 8pt; font-family: arial,verdana,helvetica; color: #333399;padding:5px">El pueblo más turístico de todo el polo norte, a 20.000 kilómetros de la gasolinera más cercana</div>
<div id="descripcion3" style= "position:Absolute;left:150; top:10; background-color:#cccccc; visibility:hidden;width:250px;height:58px;font-size: 8pt; font-family: arial,verdana,helvetica; color: #333399;padding:5px">Todos los enlaces que necesitas para entrar en Internet con las máximas garantías de éxito.</div>
</body>
</html>
Aquí acabó todo. Este ejemplo es muy versatil, seguro que no te cuesta nada añadir nuevas capas y crear unas barras totalmente personalizadas.
Otro navegador con capas
Un lector de DesarrolloWeb.com, David, como ampliación de este artículo nos mandó este mismo ejemplo pero modificado. Su correo decía así. Desde hace tiempo he estado buscando la forma de crear menús dinámicos como los que ustedes utilizan en su encabezado. Gracias a este artículo se me ocurrió que con ésto podría al fin crear mis propios menús a mi estilo, así que lo intenté y lo logré. Aquí les presento las modificaciones al código original:
Tomen en cuenta que los submenús pueden tener tablas, imágenes, links, etc...
<html>
<head>
<title>Navegador con capas</title>
<script language="javascript">
var capa1, capa2, capa3
ie4 = (document.all)? true:false
function init() {
if (ie4) {
capa1 = descripcion1.style
capa2 = descripcion2.style
capa3 = descripcion3.style
}
}
function oculta() {
if (descripcion1.style.visibility == "visible")
descripcion1.style.visibility="hidden"
else if (descripcion2.style.visibility == "visible")
descripcion2.style.visibility = "hidden"
else if (descripcion3.style.visibility == "visible")
descripcion3.style.visibility = "hidden"
}
function muestra(obj, sup){
oculta()
if (ie4)
{obj.visibility = "visible"
obj.top=sup}
}
</script>
<style type="text/css">
.submenu {
position:Absolute;left:110; top:10; background-color:#add8e6; visibility:hidden;width:250px;height:58px;font-size: 8pt; font-family: arial,verdana,helvetica; color: #333399;padding:5px
}
.menu {
font-size: 10pt; font-family: arial,verdana,helvetica; font-weight: bold; color: #333399; position: absolute; height: 58; width: 100; background-color: #ffffcc; text-align: right;top: 10px;left: 10px
}
</style>
</head>
<body onLoad="init()" link="#333399" vlink="#333399">
<div align="" id="enlaces" class="menu">
<a href="#" OnMouseOver="muestra(capa1, 10)" onmouseout="oculta()">Mis Amigos</a>
<br>
<a href="#" OnMouseOver="muestra(capa2, 30)" onmouseout="oculta()">Mi pueblo</a>
<br>
<a href="#" OnMouseOver="muestra(capa3, 45)" onmouseout="oculta()">Enlaces</a>
</div>
<div id="descripcion1" OnMouseOver="muestra(capa1, 10)" onmouseout="oculta()" class="submenu">
<a href="#" >Lo que desees1</a><br>
<a href="#" >Lo que desees2</a><br>
<a href="#" >Lo que desees3</a><br>
</div>
<div id="descripcion2" OnMouseOver="muestra(capa2, 30)" onmouseout="oculta()" class="submenu">
<a href="#" >El pueblo mas turistico1</a><br>
<a href="#" >El pueblo mas turistico2</a><br>
<a href="#" >El pueblo mas turistico3</a><br>
</div>
<div id="descripcion3" OnMouseOver="muestra(capa3, 45)" onmouseout="oculta()" class="submenu">
<a href="#" >Todos los Enlaces1</a><br>
<a href="#" >Todos los Enlaces2</a><br>
<a href="#" >Todos los Enlaces3</a><br>
</div>
</body>
</html>
Como no tengo Netscape sólo hice el código para IE (pero supongo que debe funcionar de igual forma). Por otro lado, al código le hace falta crear una matriz de objetos para ocultar los menús dentro de un bucle, y no uno por uno en una estructura IF.
Así que si alguien tiene ideas háganlas llegar comentando este artículo o mandando un email.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...