Abre el archivo fw_menu.js que exportó Fireworks junto con el HTML de Fireworks en Dreamweaver y selecciona Ver > Código si la opción Vista de código no está activada. También deberían ser visibles los números de línea. Si no es así, selecciona Ver > Opciones de vista de código > Números de línea. Puede resultar útil activar además las opciones de ajuste de texto, color de sintaxis y sangría automática.
Desplázate por el código hasta la línea 652 y localiza la siguiente línea de código:
Última actualización el
Dec 21, 2021 01:16:44 PM GMT
Posicionamiento de los submenús en Fireworks 4
Muchos usuarios han preguntado cómo pueden controlar la posición de los submenús que se generan mediante la funcionalidad de menús emergentes de Fireworks 4. El código que controla la posición horizontal y vertical de los submenús con respecto a los elementos del menú principal se encuentra en el archivo fw_menu.js. En esta nota técnica se explica cómo cambiar la posición de los submenús utilizando el código proporcionado. En Fireworks MX, se pueden posicionar los submenús mediante la pestaña Posición del Editor de menú emergente. Consulta el artículo de Fireworks Menús emergentes de Fireworks MX para obtener más información sobre los menús emergentes en Fireworks MX.
En esta nota técnica se asume que ya sabes cómo crear menús emergentes en Fireworks 4 y cómo exportar HTML e imágenes de Fireworks a una estructura de directorio de Dreamweaver definida. Para aprender a crear menús emergentes, selecciona Ayuda > Lecciones y haz clic en la lección 5 de la película Flash que aparece: "Creación de un menú emergente". Deberías estar más o menos familiarizado con JavaScript y ser capaz de editar el código del archivo fw_menu.js con confianza.
En esta nota técnica se explica lo siguiente:
- Cómo establecer la posición horizontal de los submenús en general.
- Cómo establecer la posición vertical de los submenús en general.
- Cómo establecer la posición horizontal de un submenú en particular.
Cambio de la posición horizontal de los submenús en general
La posición del submenú en el archivo fw_menu.js está determinada por tres líneas en el código. En cada caso, el cambio que se realice debe ser idéntico. La siguiente tabla incluye detalles sobre estas tres líneas de código y muestra cómo se deben cambiar. Para ello, puedes abrir el archivo fw_menu.js que se exportó a tu sitio directamente junto al HTML de Fireworks en la vista de código en Dreamweaver 4.
Nota: El código del archivo fw_menu.js que se muestra en esta nota técnica se genera desde Fireworks 4.0.2 en su formato original. Antes de exportar HTML e imágenes desde Fireworks, asegúrate de haber descargado e instalado el actualizador de Fireworks 4.0.2. Si has realizado otros cambios recomendados por terceros, es posible que los números de línea sean diferentes.
Pasos para cambiar la posición horizontal de los submenús
-
Observa el valor "-5" al final de la línea. Significa que el submenú estará superpuesto con respecto a su menú principal en 5 píxeles. Para aumentar la superposición, cambia -5 por un valor más bajo, como -10. Esto hará que la superposición sea de 10 píxeles. Para que no haya superposición, se debe agregar un número positivo. Por ejemplo, si se cambia de -5 a +5, el submenú se posicionará 5 píxeles a la derecha del lado derecho del menú principal. Cambia este valor por el número de píxeles deseado. -
Debido a que el código del menú emergente está diseñado para funcionar en varios exploradores diferentes, es necesario establecer la distancia con respecto al lado derecho del menú principal en otras dos ubicaciones.
Desplázate por el código hasta la línea 668 y localiza el siguiente código:
De nuevo, cambia "-5" al final de la línea de código por el valor de píxeles deseado para que el submenú aparezca a ese número de píxeles con respecto al lado derecho del menú principal. -
A continuación, se muestra la tercera ubicación donde se debe cambiar la posición horizontal del submenú. Está tres líneas más abajo, en la línea 671.
Aquí también hay que cambiar "-5" al final de la línea por el mismo número introducido para las posiciones del submenú en las líneas 652 y 668. Una vez establecido este número en las tres líneas, guarda el archivo fw_menu.js. La próxima vez que se visualice el HTML en un explorador, los submenús se mostrarán exactamente en la ubicación especificada en las tres líneas del código de fw_menu.js.
Cambio de la posición vertical en general
Al igual que ocurre con la posición horizontal, la posición vertical de los submenús se establece en tres líneas del archivo fw_menu.js. La siguiente tabla incluye detalles sobre estas tres líneas de código y muestra cómo se deben cambiar. De nuevo, debes abrir el archivo fw_menu.js que se exportó a tu sitio directamente junto al HTML de Fireworks en la vista de código en Dreamweaver 4.
Pasos para cambiar la posición vertical de los submenús
-
Al igual que en el primer paso de las instrucciones de posicionamiento horizontal de los submenús, debes abrir el archivo fw_menu.js en la vista de código de Dreamweaver.
Desplázate hasta la línea 647 y localiza el siguiente código:
Observa que el último elemento de la línea es "/3". La ubicación predeterminada de los submenús se ajusta en 1/3 de la altura del elemento de menú tal como se establece en la función fwLoadMenus en el área <script> del código HTML. Para ajustar la posición vertical de los submenús, puedes cambiar el número 3 por otro número, o bien sustituir toda la parte l.Menu.menúItemHeight/3
por un valor numérico diferente, positivo o negativo. -
Desplázate hasta la línea 667 y localiza el siguiente código:
Nuevamente, el valor se expresa como MenuItemHeight "/3". Puedes establecer el valor del denominador de la fracción, o bien reemplazar la parte l.Menu.menuItemHeight/3
por el valor deseado, incluso por un número negativo. -
Desplázate hasta la línea 670, que es la última línea donde se debe ajustar la posición vertical:
Nuevamente, el valor se expresa como MenuItemHeight "/3". Puedes establecer el valor del denominador de la fracción, o bien reemplazar la parte l.Menu.menuItemHeight/3
por el valor deseado, incluso por un número negativo. Al medirse en píxeles, todos los valores deben ser números enteros.
Cambio de la posición horizontal de un menú en particular
-
En el archivo fw_menu.js, añade la cadena "+ (childMenu.Menu.horzOffset || 0)" a las terminaciones predeterminadas de las líneas 649, 652, 668 y 670 como se muestra a continuación:
Nota: No olvides incluir "+
" delante de (childMenu.Menu.horzOffset…)
Asegúrate de introducir la cadena correctamente.
-
El código JavaScript de Fireworks también establece un contenedor para que los menús y submenús se muestren según indica la propiedad "Menu.container", que tiene a su vez una propiedad llamada "clip". El contenedor del menú es un cuadro invisible en el que están configurados para aparecer los menús emergentes y los submenús; la propiedad clip delimita el tamaño y la ubicación de este contenedor. Este contenedor solo afecta al código de Netscape 4.x, por lo que si deseas que los submenús ubicados a la izquierda del menú principal aparezcan en Netscape 4.x, deberás agregar estas dos líneas de código después de la línea 652 en el archivo fw_menu.js:
if( l.Menu.container.clip.left > childMenu.left ) { l.Menu.container.clip.left = childMenu.left;
-
En las secciones del submenú de la función fwLoadMenus, define horzOffset para cada submenú del que desees controlar la posición horizontal. Observa las líneas 14 y 20 en el siguiente ejemplo. Los valores positivos desplazan el submenú a la derecha y los valores negativos hacia la izquierda. Si no se define horzOffset para un submenú, se ubicará en la posición predeterminada.
-
Guarda y cierra el archivo fw_menu.js y el archivo HTML. Prueba el HTML en un explorador.
Información adicional
Las siguientes notas técnicas incluyen información sobre diversos aspectos de los menús emergentes y las maneras de personalizarlos o utilizarlos en HTML:
Cambio de la ubicación de un menú emergente exportado desde Fireworks (nota técnica 15001)
Personalización y solución de problemas de las imágenes de menús emergentes (nota técnica 14995)
Múltiples HTML de menú emergente insertados en un archivo de Dreamweaver (nota técnica 15573)
Fuentes en menús emergentes (nota técnica 15342)
Menús emergentes que aparecen detrás de contenido activo (nota técnica 15842)
Cómo establecer el tiempo que un menú emergente permanece visible (nota técnica 15007)
Cómo abrir menús emergentes en otro panel de marcos (nota técnica 15816)
Uso de etiquetas delimitadoras con menús emergentes de Fireworks 4 (nota técnica 15161)
Asignación de comportamientos adicionales a elementos de menús emergentes (nota técnica 15369)
Menús emergentes de Fireworks en archivos de biblioteca de Dreamweaver
(nota técnica 15101)
Creación de estilos personalizados para su uso en menús emergentes
(nota técnica 15377)
Menús emergentes de Fireworks 4 en plantillas de Dreamweaver 4
(nota técnica 15088)
Evitar que los menús emergentes desaparezcan demasiado pronto tras pasar el ratón (nota técnica 16052)
Cómo crear menús emergentes transparentes (nota técnica 15526)
Cómo mantener el estado del botón al desplazarse por un menú emergente (nota técnica 15926)
Uso de rutas relativas a la raíz del sitio con menús emergentes de Fireworks en plantillas de Dreamweaver (nota técnica 15832)
Uso de rutas relativas a la raíz del sitio con menús emergentes de Fireworks en archivos de biblioteca de Dreamweaver (nota técnica 15899)
El archivo fw_menu.js comentado (nota técnica 15827)
Inicia sesión en tu cuenta