listree实现树形目录无限极菜单效果代码

代码语言:html

所属分类:菜单导航

代码描述:listree实现树形目录无限极菜单效果代码

代码标签: 目录 无限 菜单 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/listree.min.css">
    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style>
    
        body {
            background-color: #fafafa
        }

        .container {
            margin: 150px auto;
            max-width: 640px
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="listree">
            <li><div class="listree-submenu-heading">
                Metrics
            </div>
                <ul class="listree-submenu-items">
                    <li><div class="listree-submenu-heading">
                        Daily Metrics
                    </div>
                        <ul class="listree-submenu-items">
                            <li><div class="listree-submenu-heading">
                                Daily Order Metrics
                            </div>
                                <ul class="listree-submenu-items">
                                    <li><div class="listree-submenu-heading">
                                        Categorywise Daily order metrics
                                    </div>
                                        <ul class="listree-submenu-items">
                                            <li><a href="">Categorywise daily order count</a></li><li><a href="">Categorywise daily bookings</a></li>
                                        </ul>
                                    </li><li><div class="listree-submenu-heading">
                                            Storewise Daily order metrics
                                        </div>
                                        <ul class="listree-submenu-items">
                                            <li><a href="">Storewise daily order count</a></li><li><a href="">Storewise daily bookings</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li><li><div class="listree-submenu-heading">
                                    Daily Invoice Metrics
                                </div>
                                <ul class="listree-submenu-items">
                                    <li><div class="listree-submenu-heading">
                                        Categorywise Daily invoice metrics
                                    </div>
                                        <ul class="listree-submenu-items">
                                            <li><a href="">Categorywise daily invoice count</a></li><li><a href="">Categorywise daily revenue</a></li>
                                        </ul>
                                    </li><li><div class="listree-submenu-heading">
                                            Storewise Daily invoice metrics
                                        </div>
                                        <ul class="listree-submenu-items">
                                            <li><a href="">Storewise daily invoice count</a></li><li><a href="">Storewise daily revenue</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li><li><div class="listree-submenu-heading">
                            Monthly Metrics
                        </div>
                        <ul class="listree-submenu-items">
                            <li><.........完整代码请登录后点击上方下载按钮下载查看

网友评论0