Cómo manipular atributos de elementos desplegables sin URL en un menú personalizado de WordPress

Question

Cómo manipular atributos de elementos desplegables sin URL en un menú personalizado de WordPress

7 abr 2012, 01:45:49

Vistas: 143

Votos: 0

Necesito cambiar el color de algunos elementos de enlace personalizado en el menú desplegable de mi menú personalizado de WordPress aquí. Hay 3 elementos en mi menú desplegable que no tienen ninguna URL asociada:

Air Duct
Chimney
Dryer Vent

Estos elementos servirán como encabezados para otros elementos desplegables debajo de ellos.

Necesito poder cambiar sus atributos como color, familia de fuente y tamaño, etc.

Estuve intentando crear clases menu-item-type-custom y menu-item-object-custom e incluso menu-item-####, pero no funcionó... :( ¡Por favor ayuda!

Acidon

147

menús css

Comentarios

¿Por qué usar CMS para esto?

onetrickpony

7 abr 2012 01:50:58

¿qué quieres decir?

Acidon

7 abr 2012 01:52:02

Necesito crear un menú desplegable como aquí - http://bit.ly/okHDHb (mira en Servicios)

Acidon

7 abr 2012 01:54:03

Ya veo, entonces esos elementos actúan como encabezados para un grupo de elementos del menú

onetrickpony

7 abr 2012 01:55:55

Sí, exactamente. ¿Cuál es la mejor manera de lograr esto? Necesito poder aplicar estilos solo a esos encabezados.

Acidon

7 abr 2012 01:59:38

Todas las respuestas a la pregunta

Comentarios

He creado la clase "gh": .gh {color: red;}
.gh A:link {text-decoration: none; color:red;}
.gh A:visited {text-decoration: none; color:red;}
.gh A:active {text-decoration: none; color:red;}
.gh A:hover {text-decoration: none; color: red;} , pero por alguna razón todavía muestra el estilo desplegable normal. ¿Hay algún CSS especial que deba usar para esa clase?

Acidon

7 abr 2012 02:13:53

¿Es posible que sea anulado por la clase ul ul li?

Acidon

7 abr 2012 02:26:52

La clase se aplica a los elementos de la lista, así que úsala como li.gh a{color:red;} y así sucesivamente. Algunas pseudo-clases pueden no ser tomadas en consideración porque el elemento es un ancla.

onetrickpony

7 abr 2012 02:28:03

Actualmente tengo esto en mi style.css: .gh {color: red;} .gh a{color:red;} .gh a:hover {color:red;}. Puedo ver con mis herramientas de desarrollador que el estilo se aplica al elemento, pero aún no hay cambio en la apariencia.. Veo que hay otras clases aplicadas también, ¿quizás anulan la clase gh?

Acidon

7 abr 2012 02:37:34

Podría ser.. prueba #top-menu ul li.gh a{color:red;}

onetrickpony

7 abr 2012 02:44:20

Mostrar los 2 comentarios restantes

Otra forma, usando un filtro si deseas hacer esto programáticamente:

add_filter('nav_menu_css_class', function($classes, $item, $args){

  if(empty($item->url))
    $classes[] = 'tu-clase-de-encabezado';

  return $classes;

}, 10, 3);

Pero deberías optar por la solución de keatch :)

onetrickpony

13.6K

7 abr 2012 02:05:50

Comentarios

sí, justo estaba leyendo sobre el hook wp_nav_menu_items antes de empezar este hilo.. Tienes razón, realmente espero hacer que funcionen las clases css personalizadas del menú

Acidon

7 abr 2012 02:20:57

de todos modos, ¿dónde debería agregar tu filtro, en qué archivo?

Acidon

7 abr 2012 02:24:05

keatch 2.6K · Accepted Answer · 2012-04-07T01:58:36Z

Habilita las Clases CSS (Configuración de pantalla -> Marcar Clases CSS) y utilízalas para personalizar cada elemento del menú que desees que tenga un estilo diferente.

Por supuesto, debes utilizar un menú personalizado.

keatch

2.6K

7 abr 2012 01:58:36