An unexpected error occured. Please try again later.
:: My Art ::  // Menu
 spanish english 
Buscar:      Búsqueda avanzada
      TUTORIALES  >> JAVASCRIPT  >> MENU DESPLEGABLE1

 Nivel = Medio
 Autor = Sparowhack

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 (var titulo_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: