Entrar

Menú desplegable. vamos a ver si me explico...

lordjonibus · · Solicitar retirada
yo sigo con mis trece en lo del menu desplegable y todo iba bien hasta k me ha entrado la duda.... estoy haciendo el ejemplo de la pagina que me has dado para ver primero si me sale para despues poder aplicarlo a mi pagina ok?
http://platea.cnice.mecd.es/~jmas/manual/html/suckerfish.html
entonces mi primera duda....

1º <ul id="nav"> se incluye en todas y cada una de las <ul> que hay en el menu o solo en alguno en concreto....

2º todo es te royo donde lo meto en html del menu o en el estilo.ccs??

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

por el momento eso es todo gracias un saludo
JorGens · · Solicitar retirada
Saludos Lord.

Veo que te lo has tomado en serio, je je, eso está bien. Se aprende un montón cuando uno se pone manos a la obra en temas como este, ya verás. Además nos servirá a todos para aprender a hacer estos menús.

Bueno, vamos a ver....

Si tienes hoja de estilo, basta con colocar en ella este código:

ul {padding: 0; margin: 0; list-style: none; }
li {float: left; position: relative; width: 10em; }
li ul {display: none; position: absolute; top: 1em; left: 0; }
li ul { top: auto; left: auto; }
li:hover ul, li.over ul {display: block; }
#content { clear: left; }

Por otro lado, en cada una de las páginas donde deseas que aparezca ese menú, has de poner, entre <HEAD> y </HEAD> esto otro:
<script type="text/javascript"><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

//--><!]]></script>

Y finalmente, ya fuera del <HEAD>, dentro del <BODY> tienes que colocar el menú en si, que será algo parecido a esto:

<ul id="nav">
  • titulo 1
    <ul>
  • enlace 1
  • enlace 2
  • enlace 3


  • titulo 2
    <ul>
  • enlace 4
  • enlace 5
  • enlace 6




    • Como ves lo de <ul id="nav"> solo se pone al principio del menu, y todo el rollo que comentas dentro del <HEAD>.

    Dime si te funciona, oki? Ya sabes que esto es para un mení algo simple, pero en esa misma página comentan como mejorarlo, pero ya llegaremos a eso, verdad?

    Un saludo :wink: