Mostrare Automaticamente il Sottomenu

Question

Mostrare Automaticamente il Sottomenu

29 giu 2012, 23:14:35

Visualizzazioni: 17.2K

Voti: 1

Per iniziare... sono nuovo su WordPress e nello sviluppo di temi.

Ho un menu principale che ho posizionato nell'header utilizzando il seguente codice:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'topNav', 'after' => '<span> </span>' ) ); ?>

Ho anche definito il mio menu in questo modo:

Definizione del Menu

Funziona come desiderato (più o meno):

Visualizzazione Pagina

Ora voglio visualizzare un sottomenu nell'area bianca del contenuto della pagina sotto. Il sottomenu dovrebbe essere visualizzato esattamente come il menu principale (ContentTopNavigation). Quindi, se il menu fosse impostato così (solo a scopo dimostrativo):

Definizione Sottomenu

E fosse selezionata la voce principale STORE, la pagina STORE avrebbe un menu in alto che mostra i 3 elementi del sottomenu.

Come posso rendere automatica questa relazione? Cioè, come posso fare in modo che il sottomenu per la pagina venga mostrato automaticamente in base alla voce del menu principale selezionata.

Jason

113

menu temi sottomenu

Tutte le risposte alla domanda

Commenti

Grazie per la risposta dettagliata. È stata molto utile. Ho scelto la strada senza jQuery. Penso di aver impostato il CSS come avevi in mente. Usando questo approccio, il menu viene visualizzato nell'area di contenuto bianca, tuttavia strariva anche oltre quel contenuto, il che non è desiderabile. Questo è ora puramente un problema di CSS a meno che non ci sia un modo per chiamare wp_nav_menu una volta nell'header (per visualizzare il livello superiore) e una volta nell'area del contenuto (per visualizzare il sottomenu).

Jason

1 lug 2012 02:19:28

Nessun problema. Poiché il sub nav è posizionato in modo assoluto, non spinge verso il basso il contenuto nell'area bianca. Hmmm, potresti usare un po' di jQuery o del php condizionale per aggiungere una classe al div dell'area bianca. Questa classe potrebbe aggiungere un po' di padding superiore aggiuntivo per compensare il sub menu.

Joshc

1 lug 2012 22:27:50

Quello che ho fatto alla fine è stato semplicemente effettuare due chiamate alla funzione wp_nav_menu. La chiamo una volta nell'header e nascondo il sub menu usando la classe sub-menu. Questo è abbastanza semplice. Poi la chiamo nel template della pagina. Questo è stato un po' complicato perché, a quanto pare, non puoi nascondere il genitore e mostrare il figlio (o almeno non sono riuscito a farlo). Quindi, ho dovuto impostare la dimensione del font per il genitore a zero. Alla fine questo mi ha dato il risultato che volevo.

Jason

1 lug 2012 22:47:51

Joshc 1.52K · Accepted Answer · 2012-06-30T01:44:49Z

Se stai sviluppando questo tema con il tuo markup HTML e CSS personalizzato, dovrebbe essere abbastanza semplice...

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'topNav', 'after' => '<span> </span>' ) ); ?>

Noterai che questo menu PHP genera una lista non ordinata con il tuo sottomenu come lista non ordinata annidata.

Guarda il markup generato nel DOM, apparirà più o meno così...

<ul class="menu">

    <li class="menu-item">
        <a href="...">Home</a>
    </li>

    <li class="menu-item current-menu-parent">  
        <a href="...">Negozio</a>

        <ul class="sub-menu" style="display: none;">

            <li class="sub-menu-item">
                <a href="...">Il mio account</a>
            </li>

            <li class="sub-menu-item current-menu-item">
                <a href="...">Traccia il tuo ordine</a>
            </li>

            <li class="sub-menu-item">
                <a href="...">Checkout - Paga</a>
            </li>

        </ul>

    </li>

    <li class="menu-item">
        <a href="...">Workshop</a>
    </li>

    <li class="menu-item">
        <a href="...">Galleria</a>
    </li>

</ul>

Puoi vedere nel markup che WordPress genera una classe per ogni elemento.

E quando il tuo elemento del menu è attivo, WordPress aggiunge la classe attiva current-menu-item o current-menu-parent agli li.

Quindi, usando un po' di jQuery come sotto, puoi controllare la visibilità di quei sotto-elementi...

var allSubmenus = $('.sub-menu').hide();
// questa variabile imposta tutti gli ul dei sottomenu come 'display: none;'

$('li.current-menu-parent, li.current-menu-item').find('ul').show();
// se questi li hanno le classi current, vengono impostati su 'display: block', questo è per i ricaricamenti della pagina così il menu corrente è visibile al caricamento.

$('li.menu-item a').click(function() {
    allSubmenus.hide();
    $(this).parent().find('ul').show();
});
// questo fondamentalmente, quando viene cliccato un link del menu, nasconde tutti i sottomenu usando la nostra variabile, poi trova qualsiasi ul figlio (sottomenu) e lo imposta su 'display block'

Poi, dopo questo, devi essere intelligente con il tuo CSS e posizionare il tuo ul.sub-menu in modo assoluto rispetto al genitore ul.menu { position: relative } - e assicurarti che l'overflow di li.menu-item e ul.menu sia impostato su visible, ma li.menu-item non deve avere alcun posizionamento.

Fammi sapere se non riesci a capire il CSS.

AGGIORNAMENTO

Mi sono praticamente reso conto, se i tuoi sottomenu appaiono solo sulla pagina del current-menu-item stessa, e non vuoi che il sottomenu appaia mentre sei su un'altra pagina dal menu principale... allora semplicemente imposti il tuo CSS così, senza bisogno di jQuery... (ma usando lo stesso metodo CSS menzionato sopra)

ul.menu {
   position: relative;
   overflow: visible;
}

li.menu-item {
   /* Nessun posizionamento */
   overflow: visible;
   float: left;
}

ul.sub-menu {
   display: none;
   position: absolute;
}

li.sub-menu-item {
   float: left;
}

li.current-menu-parent ul,
li.current-menu-item ul {
   display: block !important;
}