Nombre: EMULANDO SOTHINK DHTMLmenu
Descripción:
Este script creado en JavaScript y DHTML, como menú dinámico, emula las barras de Menú de Navegación del programa Sothink DHTMLmenu, dado que dicho programa no es gratuito.. Cuando yo empecé a programar páginas Web y en ellas, a crear Menús de Navegación, me imagino que como a todos, me costó mucho tiempo, dar con diseños más o menos aceptables, hasta que empezaron a aparecer esos programas dedicados, que te los creas de forma sencilla y con innumerables diseños para elegir, que desde luego te ahorran mucho tiempo, ahora mayormente lo que hago, es que me los vuelvo a generar, con mucha más practica y las ideas mucho más claras y acordes al diseño de la página que se esté realizando. Por todo ello sujiero, a aquellos que empiezan en esto de crear páginas Web, que recurran a estos programas que realizan las Menús de Navegación de forma guiada y auto programada, como pueden ser: 123 Flash Menu, Xara MenuMaker, CoffeeCup DHTMLMenu, Sothink DHTMLmenu, Sothink SlidingMenu, Sothink Granda, Selteco Menu Maker y otros muchos, todos ellos tienen versiones de prueba de 15 a 30 días, que se pueden usar para coger ideas y posteriormente crear sus propios diseños y para ayudar a ello, aquí os incluyo un script de Navegación con capas, recopilado de varios scripts y que funciona perfectamente. El script está probado en Internet Explorer y Opera con éxito, no así en Mozilla, también probado pero, precisa retoques, dado de la diferencia de algunos comandos entre navegadores. Los submenús pueden tener tablas, imágenes, links, etc... Por otro lado, a este código le haría 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 se anima y quiere colaborar, ponerse en contacto y enviar vuestros comentarios. Saludos..
URL: http://www.mygnet.net/codigos/javascript/capas/emulando_sothink_dhtmlmenu.1032
Código Fuente:
CÓDIGO EJEMPLO
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>NAVEGADOR CON CAPAS</TITLE >
<STYLE type="text/css">
.submenu {
position:Absolute;left:250px; top:50px; background-color:#add8e6; visibility:hidden;width:250px;height:60px;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: 57px; width: 275px; background-color: #ffffcc; text-align: right;top: 10px;left: 10px
}
</STYLE>
<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>
</HEAD>
<BODY onLoad="init()" link="#333399" vlink="#333399">
<DIV align="" id="enlaces" class="menu">
<a href="#" OnMouseOver="muestra(capa1, 10)" onmouseout="oculta()">La Comunidad Hispana de Programación</a>
<br>
<a href="#" OnMouseOver="muestra(capa2, 30)" onmouseout="oculta()">myGnet.com</a>
<br>
<a href="#" OnMouseOver="muestra(capa3, 45)" onmouseout="oculta()">Recursos para tu Web</a></DIV>
<DIV id="descripcion1" OnMouseOver="muestra(capa1, 10)" onmouseout="oculta()" class="submenu">
<a href="#" >Articulos1</a><br>
<a href="#" >Articulos2</a><br>
<a href="#" >Articulos3</a><br>
</DIV>
<DIV id="descripcion2" OnMouseOver="muestra(capa2, 30)" onmouseout="oculta()" class="submenu">
<a href="#" >Codigos1</a><br>
<a href="#" >Codigos2</a><br>
<a href="#" >Codigos3</a><br>
</DIV>
<DIV id="descripcion3" OnMouseOver="muestra(capa3, 45)" onmouseout="oculta()" class="submenu">
<a href="#" >Enlaces1</a><br>
<a href="#" >Enlaces2</a><br>
<a href="#" >Enlaces3</a><br>
</DIV>
</BODY>
</HTML>
Descargar