为添Yootheme pro的Offcanvas菜单加手风琴"Accordion"效果

Yootheme pro的Offcanvas菜单较为简单，很多时候不适合实际需求，这里我分享一个让Offcanvas菜单加手风琴"Accordion"效果的教程，这教程修改，基于YOOtheme 版本 2.4.6，如果是其他版本，代码位置可能会有差异，但原理一样，方法类似。

还有，这教程实现的效果比较简单直接，如果有更高要求的可以根据自己情况再进一步定制。

以下是教程步骤：

建议使用子主题的方法来进行定制，创建yootheme的子主题定制，在网站根目录下的templates目录，添加yootheme_ycway，的文件夹，ycway就是你的子主题名称。

复制文件templates/yootheme/templates/menu/menu.php 至 templates/yootheme_ycway/templates/menu/menu.php。如果文件夹尚不存在，请创建它们。

编辑 templates/yootheme_ycway/templates/menu/menu.php 文件

找到代码16~20行

if (preg_match('/^(offcanvas|modal)/', $layout)) {
 
$type = 'nav';
$attrs['class'][] = "uk-nav uk-nav-{$config('~navbar.toggle_menu_style')}";
$attrs['class'][] = $config('~navbar.toggle_menu_center') ? 'uk-nav-center' : '';

在代码下面添加代码

// activate "Accordion" feature
 $attrs['uk-nav'] = true;
// add parent icons
 $attrs['class'][] = 'uk-nav-parent-icon';
// allow multiple open subnavs
 $attrs['uk-nav'] = 'multiple: true';

找到代码74~77行

if ($config('~menu.position') == 'mobile') {
 
$attrs['class'][] = "uk-nav-{$config('~mobile.menu_style')}";
$attrs['class'][] = $config('~mobile.menu_center') ? 'uk-nav-center' : '';

在代码下面添加代码

// activate "Accordion" feature
 $attrs['uk-nav'] = true;
// add parent icons
 $attrs['class'][] = 'uk-nav-parent-icon';
// allow multiple open subnavs
 $attrs['uk-nav'] = 'multiple: true';

然后，你在Yootheme pro 的设置 - 高级 - 子主题，选择并应用ycway子主题即可。