Bagaimana cara menggunakan wp_nav_menu untuk membuat menu dropdown pilih?

21

Saya menggunakan berikut ini di dalam wp_nav_menufungsi untuk membuat menu dropdown pilih di mana setiap item menu merupakan pilihan dalam dropdown pilih ...

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

Bagaimana cara menambahkan nilai tautan dalam 'before'deklarasi? Apakah ada cara yang lebih baik untuk melakukan ini? Saya tahu wp_dropdown_pages, tetapi itu tidak berhasil karena saya ingin pengguna dapat mengontrol menu dari halaman "Menu".

dropdown select menus Chris Molitor
sumber

Jawaban:

25

Anda tidak dapat melakukan ini dengan wp_nav_menu, karena menampilkan item daftar, dan Anda akan menghasilkan markup yang tidak valid dengan kode Anda.

Coba gunakan wp_get_nav_menu_items () sebagai gantinya.

Solusi cepat untuk menu tarik turun dengan walker khusus:

class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu{

    // don't output children opening tag (`<ul>`)
    public function start_lvl(&$output, $depth){}

    // don't output children closing tag    
    public function end_lvl(&$output, $depth){}

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

      // add spacing to the title based on the current depth
      $item->title = str_repeat("&nbsp;", $depth * 4) . $item->title;

      // call the prototype and replace the <li> tag
      // from the generated markup...
      parent::start_el(&$output, $item, $depth, $args);
      $output = str_replace('<li', '<option', $output);
    }

    // replace closing </li> with the closing option tag
    public function end_el(&$output, $item, $depth){
      $output .= "</option>\n";
    }
}

Di template Anda gunakan seperti ini:

wp_nav_menu(array(
  'theme_location' => 'primary', // your theme location here
  'walker'         => new Walker_Nav_Menu_Dropdown(),
  'items_wrap'     => '<select>%3$s</select>',
));
onetrickpony
sumber
1
Sebenarnya, ketika menggunakan bagian "items_wrap", itu menghapus item daftar, jadi markupnya ok. Saya akan memeriksa tautannya. Terima kasih!
Chris Molitor
ya, tapi itu tidak menangani <UL>:) bersarang
onetrickpony
Sebenarnya tidak :-)
Chris Molitor
1
Menurut sumbernya tidak, kecuali jika Anda menggunakan alat bantu jalan khusus ...
onetrickpony
Apakah ini berhasil atau tidak?
chrisjlee
0

Saya telah menemukan itu berguna:

Anda dapat mengikuti respons apa pun untuk menyederhanakan menu dropdovn kode css.

  1. Tambahkan kelas parentuntuk item yang memiliki submenu
  2. tambahkan depthkelas (depth0, depth1, depth2 ...)

tambahkan ke function.php tema Anda

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

sekarang di header.php

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

header-menu diganti dengan nama menu Anda

Contoh kode CSS mungkin

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

di mana #menu-header-menu- id daftar UL utama (Anda juga perlu memperbarui itu)

JackTheKnife
sumber
-1

Dropdown Menu Plugin tidak menjawab pertanyaan: wp_nav_menutidak bisa digunakan untuk membuat pilih menu dropdown, sedangkan plugin menyediakan bagus dropdown_menu()fungsi yang melakukan pekerjaan yang mengagumkan.

Jake Rayson
sumber