Come utilizzare wp_nav_menu per creare un menu a tendina select?

Question

Come utilizzare wp_nav_menu per creare un menu a tendina select?

1 set 2011, 23:50:27

Visualizzazioni: 53.2K

Voti: 22

Sto utilizzando quanto segue all'interno della funzione wp_nav_menu per creare un menu a tendina select dove ogni voce del menu è un'opzione nel dropdown select...

'items_wrap' => '<select>%3$s</select>'
'before'     => '<option value="">'
'after'      => '</option>'

Come posso aggiungere il valore del link nella dichiarazione 'before'? Esiste un modo migliore per farlo? Conosco wp_dropdown_pages, ma non funziona perché voglio che gli utenti possano controllare il menu dalla pagina "Menu".

Christopher John

765

dropdown select menu

Tutte le risposte alla domanda

Commenti

In realtà, quando si utilizza la parte "items_wrap", questo rimuove gli elementi della lista, quindi il markup va bene. Darò comunque un'occhiata al link. Grazie!

Christopher John

2 set 2011 00:01:17

sì, ma questo non gestisce i <UL> annidati :)

onetrickpony

2 set 2011 00:02:19

In realtà lo fa :-)

Christopher John

2 set 2011 00:09:27

Secondo la fonte non lo fa, a meno che tu non stia usando un walker personalizzato...

onetrickpony

2 set 2011 00:21:06

Funziona oppure no?

chrisl-921fb74d

13 dic 2011 18:38:23

Mostra i restanti 7 commenti

Ho trovato utile questo approccio:

Puoi seguire queste indicazioni per semplificare il codice CSS del menu a discesa.

Aggiungi una classe parent agli elementi che hanno un sottomenu
Aggiungi la classe depth (depth0, depth1, depth2...) per indicare la profondità

Aggiungi al file function.php del tuo tema:

class DD_Wolker_Menu extends Walker_Nav_Menu {
    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ){
        $GLOBALS['dd_children'] = ( isset($children_elements[$element->ID]) )? 1:0;
        $GLOBALS['dd_depth'] = (int) $depth;
        parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }
}
add_filter('nav_menu_css_class','add_parent_css',10,2);
function  add_parent_css($classes, $item){
     global  $dd_depth, $dd_children;
     $classes[] = 'depth'.$dd_depth;
     if($dd_children)
         $classes[] = 'parent';
    return $classes;
}

Ora nel file header.php:

wp_nav_menu( array( 'container_class' => '','container' => '',  'menu' => 'header-menu', 'walker'=> new DD_Wolker_Menu ) );

Sostituisci header-menu con il nome del tuo menu

Un esempio di codice CSS potrebbe essere:

#menu-header-menu{
    margin: 0;
    padding: 0;
}
#menu-header-menu  ul{

}

#menu-header-menu> li{
    display: inline;
    margin-left: 1.618em;
}
#menu-header-menu  li{
    list-style: none;
}
#menu-header-menu  li a{
    text-decoration: none;
    font-size:  1em;
    font-family:    'Lato',Helvetica,Arial,sans-serif ;
    letter-spacing: 1px;
}
#menu-header-menu li.parent::after{
    content:'+';
}

#menu-header-menu  .sub-menu {
   display: none;
   position: absolute;
   background-color: #fff;
}

#menu-header-menu  li:hover>.sub-menu{
    display: inline;
    width: auto;
    height: auto;
    border: solid 1px #BBBBBB;
    z-index: +1;
}

Dove #menu-header-menu è l'ID della lista UL principale (devi aggiornarlo con il tuo ID)

JackTheKnife

319

3 mar 2016 21:47:15

Il plugin Dropdown Menus risponde effettivamente alla domanda: wp_nav_menu non può essere utilizzato per creare un menu a tendina di tipo select, mentre il plugin fornisce un'utile funzione dropdown_menu() che svolge egregiamente il compito.

Jake Rayson

111

2 ago 2012 14:17:01

onetrickpony 13.6K · Accepted Answer · 2011-09-01T23:58:47Z

Non puoi farlo con wp_nav_menu, perché genera elementi di lista, e il tuo codice produrrà un markup non valido.

Prova invece a usare wp_get_nav_menu_items().

Una soluzione rapida per un menu a discesa con un walker personalizzato:

// Walker personalizzato per convertire il menu in un elemento <select>
class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu{

    // non genera il tag di apertura dei figli (<ul>)
    public function start_lvl(&$output, $depth){}

    // non genera il tag di chiusura dei figli    
    public function end_lvl(&$output, $depth){}

    public function start_el(&$output, $item, $depth, $args){
      // aggiunge spaziatura al titolo in base alla profondità corrente
      $item->title = str_repeat("&nbsp;", $depth * 4) . $item->title;

      // chiama il metodo originale e sostituisce il tag <li>
      // dal markup generato...
      parent::start_el(&$output, $item, $depth, $args);
      $output = str_replace('<li', '<option', $output);
    }

    // sostituisce il tag di chiusura </li> con il tag option di chiusura
    public function end_el(&$output, $item, $depth){
      $output .= "</option>\n";
    }
}

Nei tuoi template usalo in questo modo:

wp_nav_menu(array(
  'theme_location' => 'primary', // la tua posizione del tema qui
  'walker'         => new Walker_Nav_Menu_Dropdown(),
  'items_wrap'     => '<select>%3$s</select>',
));