先上效果图：

---

使用方法：
一、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 ;

---

最后。这个组件很容易被扩展。。。