Script en Javascript y DHTML para la creación de una barra de navegación como menú dinámico.
Desde hace tiempo he estado buscando la forma de crear menús dinámicos como los que ustedes utilizan en su encabezado, y he encontrado herramientas, incluso la que ustedes recomiendan y que creo usan
"sothink", que son buenas pero no gratis. 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.
Valoración del artículo:
Usuarios: 
