Codificación aprenderaprogramar.com: CU00420A
CREAR UN MENÚ HORIZONTAL: CONFIGURACIÓN DE PARÁMETROS DE UN MÓDULO
Un menú se puede presentar en forma horizontal o vertical en función de varias circunstancias. Recordar que el aspecto de nuestra página web con joomla está determinado por la plantilla, entonces un primer condicionante respecto a cómo se mostrará un menú es la propia plantilla.
Es decir, si usamos una plantilla un menú se puede mostrar de una manera y si usamos otra se puede mostrar de diferente manera.
Una segunda cuestión que afecta es la posición de plantilla elegida. Supongamos que una plantilla tuviera las posiciones position-0, position-1, position-2 y position-3. En función de la posición de plantilla elegida, el menú en unos casos se podría mostrar con un aspecto y en otros casos con otro aspecto, por ejemplo en unos casos los items de menú unos debajo de otros (en vertical) y en otros casos los items de menú unos al lado de otros (en horizontal). Si estás usando una plantilla y quieres comprobarlo, elige un módulo de menú y prueba a posicionarlo en diferentes posiciones para ver las variaciones de aspecto.
Finalmente en la ventana de configuración del módulo a la que accedemos pinchando sobre el nombre del módulo del gestor de módulos, nos vamos a Parámetros avanzados - > Sufijo de la clase de la clase del menú (Opciones Avanzadas - > Menu Class Suffix) y si en este apartado escribimos un valor adecuado, cambiará el aspecto del módulo.
El sufijo de la clase del menú actúa sobre los menús modificando la apariencia de sus items igual que el sufijo de la clase del módulo sobre los módulos: permite la personalización, de acuerdo con lo que tengamos definido en la plantilla. Un sufijo que habitualmente nos permite cambiar la apariencia es –nav. ¿Cómo sabemos si un sufijo, por ejemplo –nav, es un sufijo válido? Los sufijos válidos vienen definidos en la plantilla. Para saber los sufijos definidos en la plantilla lo ideal es disponer de un manual o documentación de la plantilla donde podamos consultarlo. Otra alternativa es estudiar la plantilla, en concreto esta información suele localizarse en el archivo template.css al que podemos acceder a través de un gestor de archivos (vía servidor, ftp, etc.) o a través del Gestor de plantillas. En las versiones más antiguas de Joomla se accede mediante el icono Editar CSS -> nombre del archivo (template.css) -> Editar, o en las más modernas mediante Extensiones - > Gestor de plantillas - > Plantillas - > Seleccionar el nombre de plantilla detalles - > Hoja de estilos - > Editar css/nombre del archivo (template.css).
Algunas imágenes que reflejan cómo un mismo menú se puede mostrar de diferentes maneras en función de la posición, sufijo, etc. las mostramos a continuación:
En la anterior imagen (imagen 1) vemos un menú con items “Inicio – Búsqueda – Overview – Acceso al catálogo – Sección de ayuda – Foro Comunidad” pero la presentación es mala ya que aparece todo apelotonado y con una presentación muy pobre, el menú prácticamente no se ve.
En la siguiente imagen (imagen 2) vemos el mismo menú pero con una presentación más profesional. El cambio de presentación lo hemos logrado “jugando” con las opciones de configuración disponibles.
ALGUNAS OPCIONES DE CONFIGURACIÓN DISPONIBLES EN ALGUNAS VERSIONES
En versiones de Joomla más antiguas hay algunas opciones de configuración que no están disponibles en las versiones más modernas. Vamos a comentar algunas de ellas. Una opción que tenemos para crear un menú como horizontal está en la ventana de configuración del módulo. En Parámetros del módulo -> Estilo del menú, tenemos la opción de elegir “Lista”, “Compatibilidad horizontal”, “Compatibilidad vertical” y “Compatibilidad Lista”.Nota: compatibilidad = modo legado o legacy.
Los resultados en cada opción dependen de la plantilla. Si establecemos “Compatibilidad horizontal” podemos obtener un resultado como el de la “imagen 1” que hemos mostrado anteriormente.
Ese menú de la imagen 1 no está del todo bien. Para mejorarlo podemos ir probando a hacer cambios de configuración. Podemos arreglarlo usando “Otros parámetros -> Espaciador”, que permite intercalar caracteres entre los ítems de menú (por ejemplo *****) y obtener algo así (imagen 3):
Quizás esté un poco mejor, pero la elección de compatibilidad horizontal no es del todo limpia desde el punto de vista de las buenas prácticas de programación y diseño, ya que en el trasfondo lo que está haciendo es crearnos una tabla (innecesariamente). Esto lo podemos corregir trasteando en el código de la plantilla, pero si nuestra plantilla es medianamente buena (ojalá), debe venir preparada para hacer algo mejor que esto. En nuestro caso, para crear el menú horizontal que nos permite la plantilla, vamos a elegir Parámetros del módulo -> Estilo del menú -> Compatibilidad – lista, y en sufijo de la clase del menú escribimos “-nav”. Al establecer Compatibilidad – lista estamos prescindiendo de que el menú se muestre en una tabla, aunque estamos usando el modo legado porque la plantilla así nos lo exige en este caso. El resultado (aunque depende de la plantilla, hay que hacer pruebas) puede ser similar al de la “imagen 2” que hemos mostrado anteriormente, y que ya resulta de aspecto agradable.
Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link: Ver curso completo.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
