我整天都在努力创建一个自定义菜单步行器,它将适合必须位于前端的标记。
这是所需的标记:
<nav class="menu cf">
<div class="menu__inner cf">
<ul class="menu__list">
<li class="menu__item menu__item--first">
<a href="" class="menu__link">Menu item 1</a>
</li>
<li class="menu__item menu__item--has_children cf">
<a href="" class="menu__link">
Menu item 2
</a>
<a href="" class="menu__link--toggle">
<i class="icon-arrow-thin-down"></i>
</a>
<div class="sub_menu__wrap">
<div class="container">
<div class="gr-12 gr-3@lg">
<div class="sub_menu__heading">Menu heading (parent menu title)</div>
</div>
<div class="gr-12 gr-9@lg">
<ul class="sub_menu">
<li class="sub_menu__item gr-12 gr-4@lg">
<a href="" class="sub_menu__link">Submenu item 1</a>
</li>
<li class="sub_menu__item gr-12 gr-4@lg">
<a href="" class="sub_menu__link">Submenu item 2</a>
</li>
<li class="sub_menu__item gr-12 gr-4@lg">
<a href="" class="sub_menu__link">Submenu item 3</a>
</li>
<li class="sub_menu__item gr-12 gr-4@lg">
<a href="" class="sub_menu__link">Submenu item 4</a>
</li>
<li class="sub_menu__item gr-12 gr-4@lg">
<a href="" class="sub_menu__link">Submenu item 5</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menu__item menu__item--last">
<a href="" class="menu__link">Menu item 3</a>
</li>
</ul>
</div>
我有一些自定义类 扩展的例子 Walker_Nav_Menu 但我认为这些例子并不好。
以下是我目前的情况:http://pastebin.com/qnPx9J67
重要!我想在我的课程上使用BEM方法,如:
$menuListClass = 'menu__list';
$menuItemClass = 'menu__item';
$menuLinkClass = 'menu__link';
$subMenuClass = 'sub_menu';
$subMenuClass = 'sub_menu';
$submenuItemClass = 'sub_menu__item';
$subMenuLinkClass = 'sub_menu__link';
我还想保留一些默认的Wordpress类,但是采用以下格式: 例子:
.menu-item-has-children -> .menu__item--has_children
.current-menu__item -> .menu__item--current
我希望有人可以帮我解决这个问题,因为我不太了解PHP。 :)
来源链接:https://developer.wordpress.org/reference/classes/walker_nav_menu/