Bunu faydalı buldum:
Css code dropdovn menüsünü kolaylaştırmak için tüm cevapları takip edebilirsiniz.
- Bir sınıf ekle
parent
Alt menüsü olan öğeler için
depth
sınıf ekle (derinlik0, derinlik1, derinlik2 ...)
function.php temanıza ekleyin
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;
}
şimdi header.php içinde
wp_nav_menu( array( 'container_class' => '','container' => '', 'menu' => 'header-menu', 'walker'=> new DD_Wolker_Menu ) );
header-menu
menünüzün adı ile değiştirilir
CSS örnek kodu,
#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;
}
where #menu-header-menu
- ana UL listesini tanıtın (bunu güncellemeniz gerekir)