HTML5 tree 菜单

原创

mob64ca12d8821d 2024-02-28 06:48:47 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12d8821d的原创作品，请联系作者获取转载授权，否则将追究法律责任

HTML5 Tree 菜单

HTML5是当前最流行的网页开发语言之一，它提供了丰富的功能和标签，使开发者可以轻松创建各种交互式元素。其中的Tree菜单是一种非常实用的导航菜单，可以展示层级结构的数据，并让用户方便地查看和操作。本文将介绍如何使用HTML5创建一个简单的Tree菜单，并演示如何添加饼状图和甘特图。

创建HTML结构

首先，我们需要创建一个基本的HTML结构，并引入必要的样式和脚本。以下是一个简单的HTML模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Tree 菜单</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="treeMenu">
        <!-- Tree 菜单内容将在这里生成 -->
    </div>
    
    <script src="script.js"></script>
</body>
</html>

创建Tree菜单

接下来，我们需要在script.js文件中编写生成Tree菜单的代码。我们将使用HTML5的<ul>和<li>标签来创建树形结构。

const treeData = {
    name: 'Root',
    children: [
        {
            name: 'Child 1',
            children: [
                { name: 'Grandchild 1' },
                { name: 'Grandchild 2' }
            ]
        },
        {
            name: 'Child 2'
        }
    ]
};

function createTree(parent, data) {
    const ul = document.createElement('ul');
    parent.appendChild(ul);

    data.children.forEach(childData => {
        const li = document.createElement('li');
        li.textContent = childData.name;
        ul.appendChild(li);

        if (childData.children) {
            createTree(li, childData);
        }
    });
}

const treeMenu = document.getElementById('treeMenu');
createTree(treeMenu, treeData);

在上面的代码中，我们首先定义了一个包含树形数据的对象treeData，然后编写了一个createTree函数来递归生成Tree菜单。最后，我们将Tree菜单插入到#treeMenu元素中。

添加饼状图

除了Tree菜单，我们还可以在页面上添加图表来展示数据。下面是一个使用mermaid语法的饼状图示例：

pie
    title HTML5 学习进度
    "已完成" : 70
    "未完成" : 30

在上面的代码中，我们使用mermaid语法中的pie标识来创建一个简单的饼状图，展示了HTML5学习的进度情况。

添加甘特图

另外，我们还可以使用mermaid语法创建甘特图来展示任务的进度和时间安排。以下是一个甘特图的示例：

gantt
    title HTML5 项目进度表
    dateFormat YYYY-MM-DD
    section 项目准备
    任务1: 2022-01-01, 7d
    任务2: 2022-01-08, 3d
    section 项目开发
    任务3: 2022-01-11, 5d
    任务4: 2022-01-18, 4d

上面的代码中，我们使用mermaid语法中的gantt标识来创建一个简单的甘特图，展示了HTML5项目的进度安排。