Puock主题导航菜单优化：支持多级菜单显示并调整任意子层菜单排序方式

182次阅读

没有评论

一、菜单需求

最近搭建了个免费软件站，在规划首页导航菜单及软件分类时，发现种类有点多，且为了让分类之间层次更加合理，至少需要用到三级子菜单。

二、当前情况

目前使用的 Puock 开源主题，默认菜单是垂直向下排序的，如果二级菜单目录较多，则会出现一个屏幕都无法容纳下的尴尬情况；

另外，Puock 主题默认只支持二级菜单，更多层级菜单不会再弹出显示。

三、需调整事项

修改 Puock 主题导航菜单排序方式，由垂直排序改为水平排列，一行 5 列；
修改支持 3 级菜单目录，且要求 2 级菜单按照水平排列，3 级菜单按照垂直排列。

四、代码实现

后台找到控制主页导航菜单的函数，修改菜单遍历深度；

// 原 $max_dpath = 2，修改为如下 $max_dpath = 3
function pk_get_menu_obj_to_html($menus, &$out, $mobile = false, $dpath_cur = 1, $max_dpath = 3)

给 2 级、3级菜单 <ul> 增加 id 属性；

//引入<ul> id名 sub-menu-$dpath_cur，用于区分二级菜单、三级菜单，从而实现不同 css 效果
if (count($menu->children) > 0 && $dpath_cur < $max_dpath) {
$out .= '<ul ' . ($mobile ? 'id="menu-sub-' . $menu->ID . '"' : '') . ' class="sub-menu ' . ($mobile
? 'collapse' : '') . '" id="sub-menu-'.$dpath_cur .'">';
pk_get_menu_obj_to_html($menu->children, $out, $mobile, $dpath_cur + 1, $max_dpath);
$out .= '</ul>';
}

通过 <ul> 的 id 来控制和实现 2级菜单目录、3级菜单目录的 css 样式。

/*重写 css 样式，可单独保存到一个扩展 css 文件，如 append.min.css，然后引入到 header.php 中*/
@charset "UTF-8";/*!
 * append.min.css -https://www.puretool.cn
 * 版本：v1.0.0
 * 作者：ITYLQ&PURETOOL 
 * 用途：优化 Puock 开源主题视觉效果
 * Copyright (c) 2024 LeiCong
 */
 /*首页导航菜单弹出二级菜单调整为水平排列（默认为垂直排列）*/
#menus ul .sub-menu {
    min-width: 646px;
    top:68px;
    z-index: 998;
}
 /*定义弹出的二级菜单一行显示 5 列，从左向右排列 */
#menus ul .sub-menu li {
    float:left;
    width:20%;
}
 /*hover 弹出二级菜单时，三级菜单隐藏*/
#menu-item-25:hover #menu-item-32 ul li {
     display: none;
 }
 
#menu-item-25:hover #menu-item-32:hover ul li {
    display: block;
    background-color: var(--pk-bg-box);
    float:none;
    width:100%;
} 

#menu-item-25:hover #menu-item-32:hover ul li a {
    color: var(--pk-c-font) !important;
}

 /*三级菜单位置*/
#menu-item-32 #sub-menu-2 {
    position: absolute;
    min-width: 129.2px;
    left: auto;
    z-index: 999;
    top:50px;
}

 /*三级菜单选中背景及字体颜色变化*/
#menu-item-32:hover #sub-menu-2:hover li:hover {
    background-color: var(--pk-c-primary);
    border: none;
}
#menu-item-32:hover #sub-menu-2:hover li:hover a {
    color: var(--pk-c-light) !important;
}