 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Directorio
|
Manuales
|
Scripts
|
FAQs
|
Programas
|
Artículos Copyleft
|
Actualidad
|
La Cosecha
|
Colabora
Alojamiento
|
Dominios.es
|
Micropagos SMS
|
Buscadores
|
Patentes, marcas
|
Creación web
|
Multimedia
|
Videos
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.
|
Manuales relacionados con este artículo
Dentro de Taller de Javascript
Siguiente: Cargador universal de imágenes
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 del artículo |
| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
| Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||
Tienda DesarrolloWeb
