Crea menu mobile collassabile in Divi Theme

Prevede, tre passaggi:

1. Assegna classi personalizzate ai menu di WordPress.
2. Scrivi CSS personalizzato per lo stile dei menu
3. Aggiunta di codice JavaScript personalizzato per rivelare e nascondere le voci del sottomenu.

Eccoci qui,

Passaggio 1: impostiamo classi personalizzate per il menu in Appearance > Menus.

Passaggio 2: fare clic su " Screen Options" situato nell'angolo in alto a destra e selezionare " CSS Classes"

Passaggio 3: aggiungi un nome di classe personalizzato (primo livello) alle voci di menu di livello superiore che contengono voci di sottomenu. Sul sito Web del mio cliente, le voci di menu di primo livello sono Programmi, Accesso e Chi siamo.

Passaggio 4: aggiungi classi personalizzate a ciascuna delle voci del sottomenu. Ad esempio, il menu di primo livello "Programma" contiene voci di sottomenu come "Per studenti, Per scuole e programmi internazionali". Chiamiamo questa classe 'secondo livello'.

Passaggio 5: fare clic su ' Save menu' per salvare le modifiche

Passaggio 6 : copia il codice CSS sottostante e aggiungilo a ' Custom CSS' in Theme Options'.

.et_mobile_menu .primo livello > a {
colore di sfondo: trasparente;
posizione: relativa;
}
.et_mobile_menu .primo livello > a:dopo {
famiglia di caratteri: 'ETmodules';
contenuto: '4c';
font-weight: normale;
posizione: assoluta;
dimensione del carattere: 16px;
in alto: 13px;
a destra: 10px;
}
.et_mobile_menu .primo livello > .icon-switch:dopo{
contenuto: '4d';
}
.secondo livello {
display: nessuno;
}
.reveal-items {
blocco di visualizzazione;
}
.et_mobile_menu {
margine superiore: 20px;
margine sinistro: 2%;
}

Passaggio 7: copia il codice JavaScript personalizzato riportato di seguito e aggiungilo alla sezione "Integrazione del codice" in basso'Theme Options > Integration'

• ATTENZIONE: verificare qui: https://dividezigns.com/divi-icon-codes/  per i codici icone di Divi  (nell'esempio sopra:  4c   e    4d

<script>
(funzione($) {
funzione setup_collapsible_submenus() {
var FirstLevel = $('.et_mobile_menu .first-level > a');
FirstLevel.off('click').click(function() {
$(questo).attr('href', '#');
$(questo).parent().children().children().toggleClass('reveal-items');
$(this).toggleClass('icon-switch');
});
}
$(finestra).carica(funzione() {
setTimeout(funzione() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
</script>

Passaggio 8: salva le modifiche e ricarica la pagina Web per visualizzare i menu collassabili dispositivi mobili