Cuando escojes las opciones que deseas y oprimes en Generate para generar el código el te crea 4 ficheros: index.html, menu.css, browserdetect.js y dynMenu.js...
Mi duda está en el código del index.html que es este:
Código :
<html> <head> <link rel="stylesheet" href="menu.css" /> <script type="text/javascript" src="dynMenu.js"></script> <script type="text/javascript" src="browserdetect.js"></script> <title>Generated CSS Menu</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body onLoad="initMenu(); hideload(); "> <div id="navi"> <ul id="menu"> <li><div id="top"><a href="index.html">Home</a></div> <li><div id="top"><a href="">Virus</a></div> <ul> <li><a href="historia.html">Historia</a></li> <li><a href="faq.html">Preguntas iniciales</a></li> <li><a href="">Virus del SIDA</a> <ul> <li><a href="retrovirus.html">Retrovirus</a></li> <li><a href="vih1.html">VIH-1</a></li> </ul></li> <li><a href="clasificacion.html">Clasificación</a></li> <li><a href="como.html">¿Cómo se transmite?</a></li> <li><a href="quien.html">¿Quién y Dónde?</a></li> </ul></li> <li><div id="top"><a href="tratamiento.html">Tratamiento</a></div> <li><div id="top"><a href="">Detección</a></div> <ul> <li><a href="generalidades.html">Generalidades</a></li> <li><a href="pserologicas.html">Pruebas Serológicas</a></li> <li><a href="tecnicas.html">Otras técnicas de detección</a></li> <li><a href="antigeno.html">Antígeno p24</a></li> <li><a href="situaciones.html">Situaciones Especiales</a></li> <li><a href="serologia.html">Serología en Recién Nacidos</a></li> </ul></li> <li><div id="top"><a href="prevención.html">Prevención</a></div> <li><div id="top"><a href="seropositivos.html">Seropositivos</a></div> <li><div id="top"><a href="mapa.html">Mapa del Sitio</a></div> <li><div id="top"><a href="contacto.html">Contacto</a></div></li> </ul> </div> <div id="content"> Aquí va un contenido cualquiera </div> </body> </html>
Si se dan cuenta la etiqueta body aparece así:
Código :
<body onLoad="initMenu(); hideload(); ">
El código de menu.css es este:
Código :
body {background:#DFDFDF;font-family:verdana,serif;margin-top:8%;font-size:12px;}
#navi {display:none;}
.menu {position:absolute;top:3em;left:3em;display:block;margin:0;padding:0;width:500px;}
.menu ul{position:absolute;display:block;width:124px;margin:0;padding:0;}
.menu li ul{visibility:hidden;}
.menu li li ul{position:absolute;top:auto;left:auto;margin-left:124px;margin-top:-23px;}
.menu li{list-style:none;width:124px;height:auto;display:inline;display/**/:block;float:none;float/**/:left;margin:0;padding:0;}
* html .menu li li{display:inline;}
.menu a {text-align:center;background: url(link_bg.jpg);filter:Alpha(opacity=100);border:1px #004080solid;color:#383838;display:block;width:120px;text-decoration:none;padding:2px 0;margin:1px;font-weight:bold;}
.menu a:hover {background: url(hover_bg.jpg);border:1px #004080solid;}
.menu a:focus {background-color: #aaf;}
.menu span {display:none;}
div[id="navi"]>.menu a {text-align:center;background: url(link_bg.png);border:1px #004080solid;color:#383838;display:block;width:120px;text-decoration:none;padding:2px 0;margin:1px;}
div[id="navi"]>.menu a:hover {border:1px #004080solid;background: url(hover_bg.png);}
#content p a:link, a:visited {}
#content a:hover {}
Si no colocas esto el menú no funciona (de hecho no sé que rayos es), y lo que quiero es adaptarlo a una web hecha desde cero, pero sin tanto lío... Ya bastante con que tengo que arrastrar con dos ficheros JS.
