Làm cách nào để sử dụng wp_nav_menu để tạo menu thả xuống chọn?

Tôi đang sử dụng các wp_nav_menuchức năng sau trong hàm để tạo menu thả xuống chọn trong đó mỗi mục menu là một tùy chọn trong menu thả xuống chọn ...

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

Làm cách nào để thêm giá trị liên kết trong 'before'khai báo? Có cách nào tốt hơn để đi về điều này? Tôi biết wp_dropdown_pages, nhưng điều đó không hiệu quả vì tôi muốn người dùng có thể kiểm soát menu từ trang "Menu".

dropdown select menus

— Chris Molitor
nguồn

Câu trả lời:

Bạn không thể làm điều này với wp_nav_menu, vì nó xuất ra các mục danh sách và bạn sẽ tạo đánh dấu không hợp lệ với mã của mình.

Thay vào đó, hãy thử sử dụng wp_get_nav_menu_items () .

Một giải pháp nhanh chóng cho menu thả xuống với khung tập đi tùy chỉnh:

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

Trong các mẫu của bạn sử dụng nó như thế này:

wp_nav_menu(array(
  'theme_location' => 'primary', // your theme location here
  'walker'         => new Walker_Nav_Menu_Dropdown(),
  'items_wrap'     => '<select>%3$s</select>',
));

— onetrickpony
nguồn

Trên thực tế, khi sử dụng phần "items_wrap", sẽ loại bỏ các mục danh sách, vì vậy việc đánh dấu là ok. Tôi sẽ kiểm tra các liên kết mặc dù. Cảm ơn!

— Chris Molitor

đúng, nhưng điều đó không xử lý các <UL>s lồng nhau :)

— onetrickpony

Nó thực sự có :-)

— Chris Molitor

Theo nguồn tin thì không, trừ khi bạn đang sử dụng xe tập đi tùy chỉnh ...

— onetrickpony

Cái này có hoạt động hay không?

— chrisjlee

Tôi đã thấy rằng hữu ích:

Bạn có thể làm theo bất kỳ câu trả lời nào để đơn giản hóa menu dropdovn mã css.

Thêm một lớp parentcho các mục có menu con
thêm depthlớp (độ sâu0, độ sâu1, độ sâu2 ...)

thêm vào function.php chủ đề của bạn

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

bây giờ trong tiêu đề.php

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

header-menu thay thế bằng tên của thực đơn của bạn

Mã ví dụ CSS có thể là

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

trong đó #menu-header-menu- id danh sách UL chính (bạn cũng cần cập nhật nó)

— JackTheKnife
nguồn

-1

Dropdown Menu Plugin không trả lời câu hỏi: wp_nav_menukhông thể được sử dụng để tạo ra chọn menu sổ xuống, trong khi plugin cung cấp tiện lợi dropdown_menu()chức năng không được công việc đáng ngưỡng mộ.

— Jake Rayson
nguồn