先上效果图：
使用方法：
一、HTML：
只需要一个div
<div id="hxNavbar"></div>
二、JS
layui.extend({
hxNav: '../jslibs/layui/extend/hxNav' // 根据你自己的目录设置
}).use(['element','hxNav'],function(){
layui.hxNav({
element: '#hxNavbar', // 必须，指定ID
url: 'system/getMenuNavbar.php', // 请求后台数据的接口
type: 'post',
shrink: false,
onSelect: function(v) {
console.log(v);
}
});
});
说明：
页面加载后，组件会自动向url指定的接口发送请求，第一次请求时不带任何参数，此时服务器应返回所有的根节点。此时组件全部的根节点都是收缩状态。
如果用户点击了某个节点，组件会自动再次向接口请求数据，此时会携带一个参数，参数名称为ID，内容值为被点击的节点的ID。此时，服务器应返回该节点的所有孩子节点，组件收到孩子节点数据后，会自动渲染到被点击的节点下。
参数详细说明：
element: 字符串，必须参数，元素ID，默认空
url: 字符串，必须参数，数据接口，默认空("")
type: 字符串，请求类型，可以为post、get两种，默认post
width: 数值，宽度，默认220(px)，不需要带“px”
shrink: 布尔，指定是否自动收缩未选定的节点。默认false
background: 字符串，背景颜色，默认“#393d49”
autoExpand: 布尔，默认false。默认情况下，只有用户点击了节点的时候，才去请求并加载该节点的数据，如果该项设置为ture，则组件会立即向服务器请求所有的节点数据。
onSelect: function(node) 函数，当用户选择了某个节点时，触发该事件。node中包含了所选节点的数据。
另外，如果由于某些原因，需要用js选中某个节点时，比如，用户点击了之前打开过的tab标签，这时需要在导航栏中回显一下，可以使用下面的方法：
layui.hxNav('select', id );注意：通过这个方法选择节点时，仍然会触发组件的onSelect事件！
关于数据接口：
JSON格式。形如：[{ "id": "ident", "text": "title text", "icon": "icon", "hasChildren": 0，"href": "targetUrl.php", }]
解释：
id：节点的唯一标识（必须）
text：节点的文本 （必须）
hasChildren：数值型，指明这个节点是否拥有孩子节点，只需要给0或1即可。
组件必须的数据就是上述3个。另外还有一个icon，是可选的，如下：
icon：节点的图标，必须是layui-icon-xxx的类名。（如果没有图标，可以不设置该字段，或者返回空）
至于href等其他数据，根据自己的需要来设置。
关于后台的例子：
<?php
$pid = empty($_POST['id'] ) ? null : $_POST['id']; // 前端发来的请求，表明了现在要请求哪一个节点的孩子，请求根节点时，这个参数为空
$pdo = new MyPDO(); // pdo连接到mysql
$arrParams = array();
if( empty( $pid ))
$whereParent = 'pi IS NULL';
else {
$whereParent = 'pi=:pi';
$arrParams[':pi'] = $pid;
}
$stm = $pdo->prepare("SELECT id,nm AS text,ic AS icon,isMenuHasChild(id) AS hasChildren,hr AS href FROM sy_menu WHERE {$whereParent} ORDER BY st");
$stm->execute($arrParams);
$result = $stm->fetchAll(PDO::FETCH_ASSOC);
echo json_encode( $result, JSON_UNESCAPED_UNICODE );
上面例子中，关于sql语句中的isMenuHasChild,是一个自己写的mysql函数，原理如下：
-- menu表结构：
DROP TABLE IF EXISTS `sy_menu`;
CREATE TABLE sy_menu(
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
`pi` int(11) DEFAULT NULL COMMENT 'parent id',
`st` int(11) NOT NULL DEFAULT 0 COMMENT 'sort',
`nm` varchar(128) DEFAULT NULL COMMENT 'name',
`ic` varchar(64) DEFAULT NULL COMMENT 'icon',
`hr` varchar(256) DEFAULT NULL COMMENT 'href',
PRIMARY KEY (`id`),
KEY(`hr`),
CONSTRAINT `menu_self_p` FOREIGN KEY (`pi`) REFERENCES sy_menu(`id`) ON UPDATE CASCADE ON DELETE CASCADE
)ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT 'menus';
-- 自定义的小函数，用来获取某个id是否具有孩子节点。
DELIMITER ;;
CREATE FUNCTION `isMenuHasChild`( inid INT ) RETURNS int(11)
RETURN ( SELECT count(`id`) FROM `sy_menu` WHERE `pi`=inid );;
DELIMITER ;
最后。这个组件很容易被扩展。。。
