Aquí tenéis un tutorial escrito por mi (Patri) de un menú que ha creado Sparowhack para nosotros ^^. Comencemos...
Antes de nada debéis descargaros el archivo : AQUI Tras descomprimirlo en la carpeta de vuestra página,
entrar a drop_down.htm con vuestro editor para poder modificar las secciones. Como podéis ver en el siguiente código creado por Sparowhack hay cinco secciones,
principal, servicios, soporte, nosotros y foro.
Pues bien, dichas secciones las podremos
editar, añadir o borrar de la forma siguiente:
- Cambiar nombre de la sección : Simplemente modificamos uno ya existente
por el de nuestro interés, pudiendo editar el estilo directamente, es decir, por
vuestro método habitual (si modificáis el código pasaros por el tutorial de html
para editar el texto a vuestro antojo). Ejemplo: Podemos quitar el subrayado de
PRINCIPAL o modificarlo a nuestro antojo; cambiándolo de nombre, ponerlo en
cursiva, quitando la negrita, cambiando el tipo de letra...
- Hacer un
enlace a un título de sección: Como en los casos de "principal, nosotros o
foro" del ejemplo, donde no se despliega ningún menú, nos interesa hacer el
hipervínculo directamente en el título así que se hace en drop_down.htm
de la manera habitual. Ejemplo:
- Hacer
un enlace en un menú desplegable : Esta vez tendremos que modificar el
archivo javascript drop_down.js Y para cada menú desplegable crearemos y definiremos punteros al menú.
Es decir, var titulo_sección = new Array('Opción1','#','Opcion2','#'); (No modifiquéis la negrita. Podéis poner el número que deseéis de
opciones siempre y cuando detrás estén cada una de ellas seguidas de la
dirección correspondiente entre comillas y separadas por comas.)
IMPORTANTE:
Una vez que hayáis creado todas las secciones con sus opciones correspondientes,
en drop_down.htm tendréis que poner la variable que le corresponde a cada
sección (vartitulo_sección= ...), por ejemplo la
sección servicios llama a su correspondiente variable que está inicializada en
el archivo javascript :
<li id="menu2" onmouseover="this.className='over'; drop_menu(servicios,this.id);
stopper(1);" onmouseout="this.className=''; stopper(0);">SERVICIOS</li>
- Añadir
Sección : En drop_down.htm añadimos justo antes de </ul> lo
siguiente : <li id="menu6">NUEVO</li>
Hemos incrementado un número, puesto que es una nueva opción del menú. Como veis
NUEVO simplemente es un título, no llama a ningún menú ni enlaza a ninguna
página, además al pasar por encima no se selecciona como el resto de secciones.
Modifiquémoslo paso a paso para mayor comprensión :
1) Estilo que se hunde al pasar el ratón (opcional) : sustituimos <li id="menu6">
por
2) Añade un enlace a NUEVO o añade
un menú en cascada como describimos anteriormente.
- Borrar
Sección : Simplemente elimináis la línea que comienza por <li id="menu...
hasta </li> que corresponda a la sección que deseéis eliminar.
- Modificar el
estilo: Para ello abrir drop_down.css y modificar todo lo que os pueda
interesar, colores, márgenes, tipos de letras... Yo por ejemplo tengo en
margin_top de #main_menu, 0px para que el menú esté arriba del todo y no
perjudique nuestro diseño a la hora de ponerlo.
Finalmente como
añadir el menú en vuestras páginas... Pues como muchos sabréis hay dos métodos,
por includes (php) o iframes (html) aquí os explico como hacerlo brevemente,
pero para mayor información visitar el tutorial correspondiente. Os informo de
que la altura del menu es de 24px como podéis mirar en las imágenes.
En mi caso he
usado iframes, ya que ahora mismo no estoy en internet y por tanto no se me
visualizan los includes... Primero he creado una nueva capa, y luego dentro de
ella un iframe transparente del tamaño de mi menú (he tomado una captura de
pantalla ImpPnt y luego en un editor de imágenes he mirado la anchura y altura
máximas con el menú desplegado). Siendo el tamaño muy importante ya que sino no
se verían desplegadas las opciones. Además he modificado en la hoja de estilos
left por right para que se visualice todo el menú. A continuación tenéis el
código que tenéis que añadir en vuestra página, mover el iframe en la posición
que deseéis o modificar manualmente las coordenadas de la capa del menu:
