Cum să folosești wp_nav_menu pentru a crea un meniu dropdown de tip select?

Question

Cum să folosești wp_nav_menu pentru a crea un meniu dropdown de tip select?

1 sept. 2011, 23:50:27

Vizualizări: 53.2K

Voturi: 22

Folosesc următorul cod în funcția wp_nav_menu pentru a crea un meniu dropdown de tip select unde fiecare element de meniu este o opțiune în dropdown-ul select...

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

Cum pot adăuga valoarea link-ului în declarația 'before'? Există o modalitate mai bună de a face acest lucru? Știu despre wp_dropdown_pages, dar nu funcționează deoarece vreau ca utilizatorii să poată controla meniul din pagina "Meniuri".

Christopher John

765

dropdown selectare meniuri

Toate răspunsurile la întrebare

Comentarii

De fapt, când folosești partea "items_wrap", aceasta elimină elementele de listă, așa că markup-ul este în regulă. O să verific totuși link-ul. Mulțumesc!

Christopher John

2 sept. 2011 00:01:17

da, dar asta nu gestionează <UL>-rile imbricate :)

onetrickpony

2 sept. 2011 00:02:19

De fapt, gestionează :-)

Christopher John

2 sept. 2011 00:09:27

Conform sursă, nu funcționează, decât dacă folosești un walker personalizat...

onetrickpony

2 sept. 2011 00:21:06

Funcționează sau nu?

chrisl-921fb74d

13 dec. 2011 18:38:23

Arată celelalte 7 comentarii

Am găsit acest lucru util:

Puteți urma orice răspuns pentru a simplifica codul CSS al meniului drop-down.

Adăugați o clasă parent pentru elementele care au un submeniu
Adăugați clasa depth (depth0, depth1, depth2 ...)

Adăugați în fișierul function.php al temei dumneavoastră

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;
}

acum în header.php

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

header-menu înlocuiți cu numele meniului dumneavoastră

Exemplu de cod CSS poate fi

#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;
}

unde #menu-header-menu - ID-ul listei principale UL (trebuie să actualizați și acest lucru)

JackTheKnife

319

3 mar. 2016 21:47:15

Meniuri derulante plugin-ul răspunde într-adevăr la întrebarea: wp_nav_menu nu poate fi folosit pentru a crea un meniu derulant sub formă de select, în timp ce plugin-ul oferă funcția utilă dropdown_menu() care face treaba admirabil.

Jake Rayson

111

2 aug. 2012 14:17:01

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

Nu poți face asta cu wp_nav_menu, deoarece acesta afișează elemente de listă și vei genera un markup invalid cu codul tău.

Încearcă să folosești wp_get_nav_menu_items() în schimb.

O soluție rapidă pentru un meniu drop-down cu un Walker personalizat:

class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu{

    // nu afișa tag-ul de deschidere al copiilor (`<ul>`)
    public function start_lvl(&$output, $depth){}

    // nu afișa tag-ul de închidere al copiilor    
    public function end_lvl(&$output, $depth){}

    public function start_el(&$output, $item, $depth, $args){

      // adaugă spațiere la titlu în funcție de adâncimea curentă
      $item->title = str_repeat("&nbsp;", $depth * 4) . $item->title;

      // apelează prototipul și înlocuiește tag-ul <li>
      // din markup-ul generat...
      parent::start_el(&$output, $item, $depth, $args);
      $output = str_replace('<li', '<option', $output);
    }

    // înlocuiește </li> cu tag-ul de închidere option
    public function end_el(&$output, $item, $depth){
      $output .= "</option>\n";
    }
}

În șabloanele tale, folosește-l astfel:

wp_nav_menu(array(
  'theme_location' => 'primary', // locația din tema ta aici
  'walker'         => new Walker_Nav_Menu_Dropdown(),
  'items_wrap'     => '<select>%3$s</select>',
));