Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS
Desde 0 | HTML | CSS | ASP | PHP | AJAX | Javascript | Promoción de webs | Rentabilidad de webs
Directorio | Manuales | Scripts | FAQs | Programas | Artículos Copyleft | Actualidad | La Cosecha | Colabora
Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades
Generador METAs | Compras | Busca cursos
Alojamiento | Dominios.es | Micropagos SMS | Buscadores | Patentes, marcas | Creación web | Multimedia | Videos
Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

Otro navegador con capas


Script en Javascript y DHTML para la creación de una barra de navegación como menú dinámico.


17/12/03 - 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:

Referencia: Este artículo amplía las funcionalidades de otro sistema de barra de navegación por capas que estaba publicado en DesarrolloWeb.com en esta dirección:
http://www.desarrolloweb.com/articulos/12.php

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.

 Seguir navegando a partir aquí:
+ 1 manual relacionado
+ 1 categoria relacionada
+ 1 comentario (Añadir)
+ 4 comentarios no revisados

 Autoría, licencia y acciones sobre este artículo

Informe de David*

Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor.

* Para consultas técnicas utilizar la lista de correo.

Versión imprimible Versión imprimible del artículo
Enviar artículo por e-mail Enviar artículo por e-mail
Añadir un comentario al artículo Publicar un comentario del artículo

Manuales relacionados con este artículo
Dentro de Taller de Javascript

Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en Scripts en Javascript


 Comentarios de los visitantes
Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.
Se muestra un comentario revisado

 Comentario de Profit
28/1/04 
El script funciona bien en Internet Explorer, en Opera también, pero no en Mozilla.

Añadir un comentario al artículo Añadir un comentario del artículo
 Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.
 Se han encontrado 4 comentarios sin revisar

Ver el comentario no revisadoVer los comentarios no revisados
Añadir un comentario al artículo Añadir un comentario del artículo



Enlaces:
Maestrosdelweb
  Ir arriba

Manuales relacionados
+Taller de Javascript
Categorías
+Scripts en Javascript

Lectura recomendada

Compra este libro en Agapea, la librería urgente a domicilio.

Tienda DesarrolloWeb

DesarrolloWeb.com | Copyright | Anunciese | Acerca de | Datos legales | Contacta | Por GuiarteMultimedia