Come manipolare gli attributi di un elemento dropdown senza URL nel menu personalizzato di WordPress?

Question

Come manipolare gli attributi di un elemento dropdown senza URL nel menu personalizzato di WordPress?

7 apr 2012, 01:45:49

Voti: 0

Devo cambiare il colore di alcuni elementi link personalizzati nel dropdown del mio menu WordPress personalizzato qui. Ci sono 3 elementi nel mio dropdown che non hanno alcun URL associato:

Condotti dell'aria
Camino
Ventilazione asciugatrice

Questi elementi fungeranno semplicemente da intestazioni per altri elementi dropdown al di sotto di essi.

Ho bisogno di poter modificare i loro attributi come colore, font-family, dimensione, ecc.

Ho provato a creare classi menu-item-type-custom e menu-item-object-custom e persino menu-item-####, ma non ha funzionato... :( Per favore aiutami!

Acidon

147

menu css

Commenti

Perché usare CM per questo?

onetrickpony

7 apr 2012 01:50:58

cosa intendi?

Acidon

7 apr 2012 01:52:02

Devo creare un menu a tendina come qui - http://bit.ly/okHDHb (guarda sotto Servizi)

Acidon

7 apr 2012 01:54:03

Capisco, quindi quegli elementi funzionano come intestazioni per un gruppo di voci di menu

onetrickpony

7 apr 2012 01:55:55

sì esattamente. Qual è il modo migliore per realizzarlo? Devo essere in grado di applicare stili solo a quelle intestazioni.

Acidon

7 apr 2012 01:59:38

Tutte le risposte alla domanda

Commenti

Ho creato la classe "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;} , Ma per qualche motivo mostra ancora lo stile normale del dropdown. C'è un CSS speciale che devo usare per questa classe?

Acidon

7 apr 2012 02:13:53

È possibile che venga sovrascritto dalla classe ul ul li?

Acidon

7 apr 2012 02:26:52

La classe è applicata agli elementi della lista, quindi usala così li.gh a{color:red;} e così via. Alcune pseudo-classi potrebbero non essere considerate perché l'elemento è un anchor.

onetrickpony

7 apr 2012 02:28:03

Al momento ho questo nel mio style.css: .gh {color: red;} .gh a{color:red;} .gh a:hover {color:red;}. Posso vedere con i miei strumenti per sviluppatori che lo stile viene applicato all'elemento, ma comunque non vedo alcun cambiamento nell'aspetto.. Vedo che ci sono anche altre classi applicate, forse sovrascrivono la classe gh?

Acidon

7 apr 2012 02:37:34

Potrebbe essere... prova #top-menu ul li.gh a{color:red;}

onetrickpony

7 apr 2012 02:44:20

Mostra i restanti 2 commenti

Un altro modo, utilizzando un filtro se vuoi farlo a livello di codice:

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

  if(empty($item->url))
    $classes[] = 'your-header-class';

  return $classes;

}, 10, 3);

Ma dovresti optare per la soluzione di keatch :)

onetrickpony

13.6K

7 apr 2012 02:05:50

Commenti

sì, stavo proprio leggendo dell'hook wp_nav_menu_items prima di iniziare questa discussione.. Hai ragione, spero davvero di far funzionare le classi css personalizzate per il menu

Acidon

7 apr 2012 02:20:57

comunque, dove dovrei aggiungere il tuo filtro, in quale file?

Acidon

7 apr 2012 02:24:05

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

Abilita le CSS Classes (Impostazioni Schermo -> Flag CSS Classes) e utilizzale per personalizzare ogni voce del menu che desideri abbia uno stile diverso.

Ovviamente devi utilizzare un Menu Personalizzato.

keatch

2.6K

7 apr 2012 01:58:36