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

124次阅读
没有评论

一、菜单需求

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

二、当前情况

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

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

三、需调整事项

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

四、代码实现

  1. 后台找到控制主页导航菜单的函数,修改菜单遍历深度;
    // 原 $max_dpath = 2,修改为如下 $max_dpath = 3
    function pk_get_menu_obj_to_html($menus, &$out, $mobile = false, $dpath_cur = 1, $max_dpath = 3)
  2. 给 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>';
    }
  3. 通过 <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;
    }

五、实现效果

Perfect,非常 nice ,实现了我想要的效果。

Puock主题导航菜单优化:支持多级菜单显示并调整任意子层菜单排序方式
P1.首页导航菜单实现 2 级菜单水平排列,3 级菜单竖直排列
© 由 IT摇篮曲 提供
正文完
 
itylq
版权声明:本站原创文章,由 itylq 2024-07-02发表,共计1806字。
转载说明:本站文章遵循CC-4.0国际许可协议,转载请注明出处(格式如“来源:IT摇篮曲www.itylq.com")。
评论(没有评论)
验证码