wp_nav_menu
함수 내에서 다음을 사용하여 각 메뉴 항목이 선택 드롭 다운의 옵션 인 선택 드롭 다운 메뉴를 만듭니다 …
'items_wrap' => '<select>%3$s</select>'
'before' => '<option value="">'
'after' => '</option>'
'before'
선언에 링크 값을 어떻게 추가 합니까? 이것에 대해 더 좋은 방법이 있습니까? 에 대해 알고 wp_dropdown_pages
있지만 사용자가 “메뉴”페이지에서 메뉴를 제어 할 수 있기를 원하므로 작동하지 않습니다.
답변
wp_nav_menu는 목록 항목을 출력하므로 코드로 유효하지 않은 마크 업을 생성하므로이 작업을 수행 할 수 없습니다.
대신 wp_get_nav_menu_items () 를 사용해보십시오 .
맞춤형 워커가있는 드롭 다운 메뉴를위한 빠른 솔루션 :
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(" ", $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";
}
}
템플릿에서 다음과 같이 사용하십시오.
wp_nav_menu(array(
'theme_location' => 'primary', // your theme location here
'walker' => new Walker_Nav_Menu_Dropdown(),
'items_wrap' => '<select>%3$s</select>',
));
답변
나는 그것이 유용한 것을 발견했다.
CSS 코드 dropdovn 메뉴를 단순화하기 위해 모든 응답을 따를 수 있습니다.
parent
하위 메뉴가있는 항목에 대한 클래스 추가depth
클래스 추가 (depth0, depth1, depth2 …)
function.php 테마에 추가
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;
}
이제 header.php에
wp_nav_menu( array( 'container_class' => '','container' => '', 'menu' => 'header-menu', 'walker'=> new DD_Wolker_Menu ) );
header-menu
메뉴 이름으로 대체
CSS 예제 코드는
#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;
}
어디서 #menu-header-menu
-주요 UL 목록을 식별하십시오 (또한 업데이트해야합니다)
답변
드롭 다운 메뉴 플러그인 은 질문에 대답합니다. wp_nav_menu
선택 메뉴 드롭 다운을 만드는 데 사용할 수 없지만 플러그인은 dropdown_menu()
훌륭하게 작업을 수행하는 멋진 기능을 제공합니다 .