关于非iframe版本菜单高亮

一般后台的左侧菜单,都是通用的,在这种情况下,切换到新的页面,菜单的高亮,1、可以采用后端程序处理。2、采用js处理。js匹配url地址的解决方式相对而言还有一些延迟。

这里给出的是原生php的输出菜单的方案,其他采用php框架或者一些模板引擎可采用类似的处理方式。


// 菜单的树状结构数组
$sidebar = [
    "1" => [
	    "id"       => 1,
        "pid"      => 0,
        "name"     => "mdi mdi-home",
        "title"    => "后台首页",
		"url"      => "/admin/config/home.html"
	],
    "2" => [
	    "id"       => 2,              #主键值
        "pid"      => 0,              #父ID
        "name"     => "mdi mdi-menu", #icon图标名称
        "title"    => "系统管理",     #菜单名称
		"url"      => '',
        "children" => [
		    "5" => [
	            "id"       => 5,
                "pid"      => 2,
                "name"     => "",
                "title"    => "网站设置",
				"url"      => "/admin/config/one.html"
			],
			"6" => [
	            "id"       => 6,
                "pid"      => 2,
                "name"     => "",
                "title"    => "二级菜单",
				"url"      => '',
				"children" => [
	                "20" => [
					    "id"       => 20,
                        "pid"      => 6,
                        "name"     => "",
                        "title"    => "三级菜单",
						"url"      => "/admin/config/two.html"
					],
	                "21" => [
					    "id"       => 21,
                        "pid"      => 6,
                        "name"     => "",
                        "title"    => "三级菜单",
						"url"      => "/admin/config/three.html"
					]
				]
			]
		]
	],
	"10" => [
	    "id"       => 10,
        "pid"      => 0,
        "name"     => "mdi mdi-account",
        "title"    => "用户管理",
		"url"      => "/admin/config/four.html"
	]
];

// 当前位置的树状结构数组(相当于前台网站的面包屑)
$location = [
    [
	    "id"       => 2,
        "pid"      => 0,
        "name"     => "mdi mdi-home",
        "title"    => "系统管理",
		"url"      => "",
		'children' => [
		    [
	            "id"       => 6,
                "pid"      => 2,
                "name"     => "",
                "title"    => "二级菜单",
				"url"      => '',
				"children" => [
	                [
					    "id"       => 20,
                        "pid"      => 6,
                        "name"     => "",
                        "title"    => "三级菜单",
						"url"      => "/admin/config/two.html"
					]
				]
			]
		]
	]
];

echo createMenu($sidebar, 1, $location);

/**
 * 这里单文件演示,只做一次性输出左侧菜单,如果实在view层页面中做菜单循环的操作类似
 * @param array $data 菜单数组
 * @param integer $isFrist 是否首次(主要是用于最外层的ul)
 * @param array $location 当前位置数组
 * @param string $blockStyle 是否展开的样式
 * @return string 菜单html字符串
 */
function createMenu($data, $isFrist = 0, $location = [], $blockStyle = '')
{
    $menuBody = $isFrist == 1 ? '<ul class="nav nav-drawer">' : '<ul class="nav nav-subnav" '.$blockStyle.'>';

    foreach($data as $k => $v)
    {
        $iconDiv  = empty($v['name']) ? '' : '<i class="'. $v['name'] .'"></i>';
		$isOpen   = $location && $location[0]['id'] == $v['id'] ? ($v['pid'] == 0 ? ' active open' : ' open') : '';
		$selected = $location && $location[0]['id'] == $v['id'] ? ' active' : '';
		$sdata    = $location && isset($location[0]['children']) ? $location[0]['children'] : '';
		$isBlock  = $location && $location[0]['id'] == $v['id'] && $v['pid'] != 0 ? ' style="display:block"' : '';
		$menuName = $v['pid'] == 0 ? '<span>'. $v['title'] .'</span>' : $v['title'];
        
		if (isset($v['children']) && count($v['children']) > 0) {
		    $menuBody .= '<li class="nav-item nav-item-has-subnav '. $isOpen .'"><a href="#!">'. $iconDiv . $menuName .'</a>';
            $menuBody .= createMenu($v['children'], 0, $sdata, $isBlock);
		} else {
		    $menuBody .= '<li class="nav-item '.$selected.'"><a href="'. $v['url'] .'" class="multitabs">'. $iconDiv . $menuName;
		}
        $menuBody .= '</li>';
    }
    return $menuBody .'</ul>';
}
0 条评论