Ja Purity: Resaltar submenú ítem de la página actual

Diseño y Posicionamiento Web con Joomla Foros Templates Joomla Templates Joomla 1.5 Ja Purity: Resaltar submenú ítem de la página actual

  • Este debate tiene 4 respuestas, 1 mensaje y ha sido actualizado por última vez el hace 14 años, 10 meses por Anónimo.
Mostrando 4 respuestas a los debates
  • Autor
    Entradas
    • #84158
      Anónimo
      Invitado

      Hola, buenas…

      Estoy trabajando en una web sobre la plantilla Ja Purity…

      Echaba de menos que, al pulsar en un ítem de un submenú, éste quede resaltado al cargarse la página correspondiente, de la misma manera que ocurre en los ítems de menú.

      Hablo en todo caso de Main Menu, en la columna izquierda.

      Finalmente, encontré una solución satisfactoria.

      En el archivo templates/ja_purity/styles/elements/black/ [o el tema de color que uses] > file style.css, insertar las siguientes líneas de código:


      #ja-container2 ul.menu li li.active a {
      /*Aquí, introducir el color del texto del submenú ítem de la página activa (Yo lo dejo vacío, porque no quiero cambiar este color) */
      }

      #ja-container2 ul.menu li li.active a span {
      /* Aquí, introducir las restantes propiedades del submenú ítem de la página activa: Font-weight, Background, etc. En mi caso: */
      font-weight: bold;
      background: #FFFFFF url(../../../images/bullet.gif) no-repeat 5px;
      display:block;
      outline: #999999 dotted 1px;
      }

      De esta manera, cuando el usuario se encuentra en una subsección de la página (dentro del menú principal en la columna izquierda), puede ver dónde está, no sólo por el título del artículo y/o la ruta de navegación (las Breadcrumbs), también por el resalte del submenú ítem correspondiente…

      Sin embargo, me he tropezado con que este código falla, lógicamente, si el submenú ítem contiene, a su vez, sus propios sub-submenú ítems (caso de la web que estoy armando): porque automáticamente les asigna las propiedades del submenú ítem resaltado, y aparecen todos como éste.

      El error puede verse en http://mundojoomla.org/index.php?opt…d=67&Itemid=83

      Pienso que el problema reside en que, con el código anterior, se incluyen en la etiqueta de #ja-container2 ul.menu li li.active a span todos los posibles sub-submenú ítems del submenú ítem correspondiente… de manera que aparecen también resaltados, al heredar los atributos del submenítem que los contiene.

      He intentado resolver el problema, pero por el momento no lo he conseguido…

      Lo he intentado insertando códigos específicos “li li li” para desactivar, en los sub-submenú ítems, las propiedades de resalte heredadas del submenú css “li li.active”, y luego reactivarlas al pulsar en alguno de ellos, de la siguiente manera (está hecho en plan chapucero, lo que me interesa ahora es hacerlo funcionar, luego podría depurarlo):


      #ja-container2 ul.menu li li.active a {
      /*Aquí, introducir el color del texto del submenú ítem de la página activa (Yo lo dejo vacío, porque no quiero cambiar este color) */
      }

      #ja-container2 ul.menu li li.active a span {
      /* Aquí, introducir las restantes propiedades del submenú ítem de la página activa: Font-weight, Background, etc. En mi caso: */
      font-weight: bold;
      background: #FFFFFF url(../../../images/bullet.gif) no-repeat 5px;
      display:block;
      outline: #999999 dotted 1px;
      }

      #ja-container2 ul.menu li ul li ul li a {
      /* Aquí, intento desactivar las propiedades heredadas de #ja-container2 ul.menu li li.active a, pero NO FUNCIONA */
      font-weight: normal;
      background: #f6f6f6 url(../../../images/bullet.gif) no-repeat 5px;
      }

      #ja-container2 ul.menu li ul li ul li a span {
      /* Aquí, intento desactivar las propiedades heredadas de #ja-container2 ul.menu li li.active a span, pero NO FUNCIONA */
      font-weight: normal;
      background: #f6f6f6 url(../../../images/bullet.gif) no-repeat 5px;
      outline:none;
      }

      #ja-container2 ul.menu li ul li ul li a:hover span,
      #ja-container2 ul.menu li ul li ul li a:active span,
      #ja-container2 ul.menu li ul li ul li a:focus span {
      /* Aquí, intento desactivar las propiedades heredadas de #ja-container2 ul.menu li li.active a span, y SÍ FUNCIONA */
      font-weight: normal;
      background: #f6f6f6 url(../../../images/bullet.gif) no-repeat 5px;
      outline:none;
      }

      #ja-container2 ul.menu li ul li ul li.active a {
      /*Aquí, introducir el color del texto del sub-submenú ítem de la página activa (Yo lo dejo vacío, porque no quiero cambiar este color), para reactivar el resalte. FUNCIONA */
      }

      #ja-container2 ul.menu li ul li ul li.active a span {
      /* Aquí, introducir las restantes propiedades del sub-submenú ítem de la página activa (Font-weight, Background, etc), para reactivar el resalte. FUNCIONA. En mi caso: */
      font-weight: bold;
      background: #FFFFFF url(../../../images/bullet.gif) no-repeat 5px;
      display:block;
      outline: #999999 dotted 1px;
      }

      En resumen: las ul.menu li ul li ul li a:hover, a:active, a:focus y .active a FUNCIONAN OK. En cambio, las ul.menu li ul li ul li a y a span NO FUNCIONAN, y no sé por qué (pensaba que las propiedades de los atributos locales tenían prioridad sobre las de los atributos que los contienen, pero en este caso no es así, según me informa el Firebug de FireFox: para a y a span, las propiedades de #ja-container2 ul.menu li li.active a span prevalecen sobre las propiedades de #ja-container2 ul.menu li ul li ul li a span…).

      En cualquier caso, voy a dejar esta parte de mi sitio en construcción temporalmente así, por si aparece un alma caritativa que me ayude…

      El bug puede comprobarse (repito) en: http://mundojoomla.org/index.php?opt…d=67&Itemid=83

      P.S.: Otro problema menor que he descubierto es que, al haber configurado los submenú ítems con display:block (por coherencia estética con los menú ítems), sus enlaces se prolongan más allá de su texto, ocupando todo el ancho de la columna izda. correspondiente a su alto… pero ésta es una cuestión menor que no me preocupa demasiado (en el peor de los casos puedo dejarlos sólo con el Bold, suficiente para resaltar el elemento correspondiente a cada página).

      Gracias, saludos.
      Nacho

    • #84202
      Anónimo
      Invitado

      Dejame checar bien el problema, pero ya estoy en esto,

    • #84203
      Anónimo
      Invitado

      hola mencionaste que editaste la hoja de estilos

      En el archivo templates/ja_purity/styles/elements/black/ [o el tema de color que uses] > file style.css

      Quisiera saber si haz editado tambien esta hoja de estilos

      http://www.mundojoomla.org/templates/ja_purity/css/menu.css

      Quiza ya lo hiciste y aun asi no funciona, como sea es una duda que tengo porque creo que no mencionaste nada al respecto, y ahi existen tambien algunas clases que estan afectando el menu directamente. Espero tener tiempo mañana pero comenzemos por ahi. Ahorita voy a darme otra navegada por tu sitio, pero el link que dejaste no me funciona. Saludos y si vi el problema que mencionas pero en que apartado del menu izquierdo me recomiendas trabajar, es decir donde tengas mas subcategorias.

      Saludos y no te preocupes , lo solucionaremos

    • #84223
      Anónimo
      Invitado

      Hola, Monclee.

      En primer lugar, muchas gracias por tu ayuda.

      Respondiendo a tu pregunta: sí, revisé el menu.css (y lo he vuelto a revisar tras leer tu respuesta), pero nada.

      El enlace de la página donde se encuentra el error es http://mundojoomla.org/index.php?option=com_content&view=article&id=67&Itemid=83.

      O, por poner un camino más largo (pero inequívoco):

      Tras entrar en la web, pinchar en Webs > Joomla!. Aparecen 2 elementos:

      [b]- En español
      – En inglés[/b]

      Es en éstos donde se produce el error (como ves, aparecen resaltados como su ítem padre, cuando no deberían estarlo).

      En el código adjunto del anterior post especificaba que las propiedades asignadas a los a:hover, a:active y a:focus de estos elementos funcionan bien, porque al pasar el puntero por encima, y/o clickar en ellos (sin soltar el botón), se muestran como deben mostrarse (es decir, no resaltados). También comentaba que los .active funcionan asimismo ok, como puede observarse si clickamos en cualquiera de ellos (soltando ahora el botón): al cargarse la nueva página el elemento en cuestión queda permanentemente resaltado (es decir, sigue así aunque pases el puntero por encima), como debe ser.

      En cambio, la desactivación del a y el a span falla…

      Lo que no entiendo es por qué, si las propiedades asignadas a

      [b]#ja-container2 ul.menu li ul li ul li a:hover span,
      #ja-container2 ul.menu li ul li ul li a:active span,
      #ja-container2 ul.menu li ul li ul li a:focus span,[/b]
      y a
      [b]#ja-container2 ul.menu li ul li ul li.active a,
      #ja-container2 ul.menu li ul li ul li.active a span,[/b]

      funcionan correctamente, no lo hacen en cambio las de

      #ja-container2 ul.menu li ul li ul li a, ni de
      #ja-container2 ul.menu li ul li ul li a span.

      En fin, gracias de nuevo por la ayuda y los ánimos.

      Por cierto, no te sorprendas si cuando entres en la web observas que van cambiando cosas… estoy en pleno proceso evolutivo, con el fin de armar cuanto antes una primera versión aceptable (y, por tanto, difundible).

      Saludos,
      Nacho

    • #84412
      Anónimo
      Invitado

      Hola.

      Sólo comentar que, hace ya un tiempo, tras no encontrar solución satisfactoria para la configuración css de los sub-submenu ítems, modifiqué el menú para eliminarlos.

      Lo digo porque, actualmente, el enlace del anterior post, donde figuraba el error de los subsubmenu items ya no está operativo, para evitar malentendidos.

      Saludos

Mostrando 4 respuestas a los debates
  • El foro ‘Templates Joomla 1.5’ está cerrado y no se permiten nuevos debates ni respuestas.
Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Ver
Privacidad