关于非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 条评论