El objetivo de este tutorial es aprender a hacer un sencillo menú para poder crear un buen aspecto y una buena navegabilidad en una página web. Comenzaré explicando algunas líneas de código para que las comprendan mejor, y después pasaré al grueso del tutorial.
Así que empecemos:
1- Creamos un nuevo archivo con la extensión *.html, en este caso lo llamaré "index.html"
2-Creamos un archivo con la extensión *.css, donde definiremos los estilos que vamos a dar a nuestro menú. En este caso se llamará "menu.css"
3- Creamos un archivo con la extensión *.js, donde irá el código que hará que funcionenuestro menú. En este caso se llamará "efecto.js"
Nota:En este caso, por su simpleza, los archivos estarán todos en la misma carpeta, si decidís ponerlos en carpetas diferentes, no olvidéis cambiar las rutas.
Como ya debéis saber, es mejor crear una hoja de estilos en un archivo *.css que insertar el código en todas los archivos *.html ya que así ahorramos trabajo, tiempo, y ancho de banda. La siguiente línea las debéis poner en el HEAD de vuestro archivo html para poder linkarlo con los estilos.
Con estas líneas haremos el link a la hoja de estilos y al javascript respectivamente. (Cuidado a los que hayáis cambiado las rutas)
Código :
<link href="menu.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="defecto.js"></script>
Hasta ahora nuestro archivo html debería tener ésta estructura:
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>menu</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="efecto.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="efecto.js"></script> </head> <body> </body> </html>
4-Creamos la estructura del menú, que se hará mediante listas.
Supongamos que queremos crear un menú con 3 opciones, en la primera opción dos subopciones, y en la segunda opción otras tres. La tercera opción no tendrá subopciones.
4.1- Creamos una etiqueta div cuya id será "menu". A esta div le daremos forma mediante css para que quede como un bloque, y así situarla en el espacio donde teníamos pensado ubicarla.
Código :
<div id="menu"></div>
4.2- Dentro de la etiqueta div,será donde situemos el menú, por tanto creamos el principio de la lista. Su id será "nav" ya que el código javascript buscará los elementos con esta id para poder actuar.
Código :
<ul id="nav"></ul>
4.3- Creamos todas las opciones, situandolas dentro de la etiqueta "<ul>"
Código :
<li><a>primero</a></li><li><a>segundo</a></li><li><a>tercero</a></li>
Nota: los nombres de cada opción están dentro de una etiqueta "<a>", que es la que sirve para hacer los links.
4.4- Creamos los submenús de la misma forma que hemos creado el menú principal, pero introduciendolos dentro antes del cierre de las etiquetas "<li>".
Dentro de la primera opción hemos dicho que van dos subopciones:
Código :
<ul><li><a>sub_1.1</a></li></ul> <ul><li><a>sub_1.2</a></li></ul>
Y dentro de la segunda van otras tres:
Código :
<ul><li><a>sub_2.1</a></li></ul><ul><li><a>sub_2.2</a></li></ul><ul><li><a>sub_2.3</a></li></ul>
Hasta ahora nuestro código debe quedar así:
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>menu</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="menu.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="efecto.js"></script> </head> <body> <div id="menu"> <ul> <li><a>primero</a> <ul> <li><a>sub_1.1</a></li> <li><a>sub_1.2</a></li> </ul> </li> <li><a>segundo</a> <ul> <li><a>sub_2.1</a></li> <li><a>sub_2.2</a></li> <li><a>sub_2.3</a></li> </ul> </li> <li><a>tercero</a></li> </ul> </div> </body> </html>
Y se debería ver así:
/*******************************
INSERTAR LA IMAGEN LLAMADA "01.jpg"
*******************************/
5- Ahora crearemos los estilos:
Vamos a definir las medidas de la div que contiene el menú y las listas, para que su apariencia ya cambie y quede en forma de botonera.
Código :
#menu {
width:300px;
height:25px;
text-transform:Capitalize;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#menu ul {
margin:0;
padding:0;
list-style:none;
}
#menu li {
float: left;
position: relative;
margin:0;
}5.1- Definimos los estilos para cada situación del link, es decir, para que cuando pongamos el ratón sobre la opción, ésta, cambie su estilo y si note que "funciona":
Código :
#menu li a {
display:block;
color: #586885;
text-decoration:none;
width:100px;
height:25px;
text-align:center;
font-size:16px;
font-weight:bold;
background-color:#FFCC00;
}
#menu li a:hover {
color:#000;
text-decoration:none;
font-weight:bold;
width:100px;
height:25px;
background-color:#CCFF00;
}Nota: Al igual que he definido el color de fondo, podría haber definido una imágen de fondo, por si alguien las quiere utilizar, en estos parámetros, todo depende de vuestra imaginación...
5.2- Definimos también unos parámetros que son necesarios para que funcione cualquier submenú, no cambiéis nada en esto porque no funcionará.
Código :
#menu li ul {
display:none;
position: absolute;
left:0;
}
#menu li>ul {
top:auto;
left:auto;
}
#menu li:hover ul, li.over ul {
display:block;
}Pues eso es todo, ahora vuestro CSS tendría que ser algo así:
Código :
#menu {
width:300px;
height:25px;
text-transform:Capitalize;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#menu ul {
margin:0;
padding:0;
list-style:none;
}
#menu li {
float: left;
position: relative;
margin:0;
}
#menu li a {
display:block;
color: #FFF;
text-decoration:none;
width:100px;
height:25px;
text-align:center;
font-size:16px;
font-weight:bold;
background-color:#FFCC00;
}
#menu li a:hover {
color:#000;
text-decoration:none;
font-weight:bold;
width:100px;
height:25px;
background-color:#CCFF00;
}
#menu li ul {
display:none;
position: absolute;
left:0;
}
#menu li>ul {
top:auto;
left:auto;
}
#menu li:hover ul, li.over ul {
display:block;
}6- Ponemos el código que hará que nuestro menú funcione, dentro del archivo "efecto.js", por supuesto...
Código :
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
Y vuestro menú se debería ver así:
/*****************************
insertar aquí la imágen 02.jpg
*****************************/
Cualquier duda sobre este tutorial la podéis hacer en el foro de XHTML y CSS
Saludos
//********************************************
NOTA:SIN TERMINAR, AÚN QUEDAN COSAS POR RETOCAR
*********************************************//
Obviamente un simple post no se convierte en tutorial con la magia de los duendes de los satelites, ya no soy tan NIF 
