layui-ul/demo/pc/nav.html

<fieldset class="layui-elem-field layui-field-title">
    <legend>简单地分割线导航</legend>
    <div class="layui-field-box">
        <div class="ul-nav-link">
            <a class="ul-nav-link-item" href="">导航1</a>
            <a class="ul-nav-link-item" href="">那个导航2</a>
            <a class="ul-nav-link-item" href="">这个导航3</a>
            <a class="ul-nav-link-item" href="">导航4</a>
        </div>
    </div>
</fieldset>

<fieldset class="layui-elem-field layui-field-title">
    <legend>选项菜单导航</legend>
    <div class="layui-field-box">
        <div class="ul-nav-card">
            <div class="ul-nav-card-item">
                <div class="ul-nav-card-item-left">
                    <div class="ul-nav-card-item-icon layui-icon layui-icon-set">

                    </div>
                    <div class="ul-nav-card-item-info">
                        <div class="ul-nav-card-item-title">
                            登录密码
                        </div>
                        <div class="ul-nav-card-item-desc">
                            建议您使用字母和数字的组合、混合大小写、在组合中加入下划线等符号。
                        </div>
                    </div>
                </div>
                <div class="ul-nav-card-item-right">
                    <div class="layui-btn layui-btn-sm">
                        修改密码
                    </div>
                </div>
            </div>
            <div class="ul-nav-card-item">
                <div class="ul-nav-card-item-left">
                    <div class="ul-nav-card-item-icon layui-icon layui-icon-set">

                    </div>
                    <div class="ul-nav-card-item-info">
                        <div class="ul-nav-card-item-title">
                            资金密码
                        </div>
                        <div class="ul-nav-card-item-desc">
                            资金密码用于提现、绑定银行卡等操作，可保障资金安全
                        </div>
                    </div>
                </div>
                <div class="ul-nav-card-item-right">
                    <div class="layui-btn layui-btn-sm">
                        找回资金密码
                    </div>
                    <div class="layui-btn layui-btn-sm">
                        修改资金密码
                    </div>
                </div>
            </div>
            <div class="ul-nav-card-item disabled">
                <div class="ul-nav-card-item-left">
                    <div class="ul-nav-card-item-icon layui-icon layui-icon-set">

                    </div>
                    <div class="ul-nav-card-item-info">
                        <div class="ul-nav-card-item-title">
                            比特币转出
                        </div>
                        <div class="ul-nav-card-item-desc">
                            系统维护,不能转出
                        </div>
                    </div>
                </div>
                <div class="ul-nav-card-item-right">
                    <div class="layui-btn layui-btn-sm layui-btn-disabled">
                        立即转出
                    </div>

                </div>
            </div>
        </div>
    </div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
    <legend>选项菜单导航极简卡片风</legend>
    <div class="layui-field-box">
        <div class="">
            <div class="ul-nav-card ul-nav-card-simple">
                <div class="ul-nav-card-item">
                    <div class="ul-nav-card-item-left">
                        <div class="ul-nav-card-item-icon layui-icon layui-icon-set">

                        </div>
                        <div class="ul-nav-card-item-info">
                            <div class="ul-nav-card-item-title">
                                登录密码
                            </div>
                            <div class="ul-nav-card-item-desc">
                                建议您使用字母和数字的组合、混合大小写、在组合中加入下划线等符号。
                            </div>
                        </div>
                    </div>
                    <div class="ul-nav-card-item-right">
                        <div class="layui-btn layui-btn-sm">
                            修改密码
                        </div>
                    </div>
                </div>
                <div class="ul-nav-card-item">
                    <div class="ul-nav-card-item-left">
                        <div class="ul-nav-card-item-icon layui-icon layui-icon-set">

                        </div>
                        <div class="ul-nav-card-item-info">
                            <div class="ul-nav-card-item-title">
                                资金密码
                            </div>
                            <div class="ul-nav-card-item-desc">
                                资金密码用于提现、绑定银行卡等操作，可保障资金安全
                            </div>
                        </div>
                    </div>
                    <div class="ul-nav-card-item-right">
                        <div class="layui-btn layui-btn-sm">
                            找回资金密码
                        </div>
                        <div class="layui-btn layui-btn-sm">
                            修改资金密码
                        </div>
                    </div>
                </div>
                <div class="ul-nav-card-item disabled">
                    <div class="ul-nav-card-item-left">
                        <div class="ul-nav-card-item-icon layui-icon layui-icon-set">

                        </div>
                        <div class="ul-nav-card-item-info">
                            <div class="ul-nav-card-item-title">
                                比特币转出
                            </div>
                            <div class="ul-nav-card-item-desc">
                                系统维护,不能转出
                            </div>
                        </div>
                    </div>
                    <div class="ul-nav-card-item-right">
                        <div class="layui-btn layui-btn-sm layui-btn-disabled">
                            立即转出
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>

<fieldset class="layui-elem-field layui-field-title">
    <legend>操作导航</legend>
    <div class="layui-field-box">
        <div class="ul-padding-md ul-bg-gray">
            <div class="ul-nav-button">
                <div class="ul-nav-button-item">
                    <div class="ul-nav-button-icon">
                        <i class="icon layui-icon layui-icon-add-circle"></i>
                    </div>
                    <div class="ul-nav-button-info">
                        <div class="ul-nav-button-title">
                            发布公告
                        </div>
                        <div class="ul-nav-button-desc">
                            发布文字/图片和视频.
                        </div>
                    </div>
                </div>

                <div class="ul-nav-button-item">
                    <div class="ul-nav-button-icon">
                        <i class="icon layui-icon layui-icon-about"></i>
                    </div>
                    <div class="ul-nav-button-info">
                        <div class="ul-nav-button-title">
                            关于
                        </div>
                        <div class="ul-nav-button-desc">
                            查看详细系统信息
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>