1. Python技术站首页
  2. css

JS+CSS简单树形菜单实现方法

• css
yizhihongxing

下面是 "JS+CSS简单树形菜单实现方法" 的完整攻略：

1. 目标

本教程旨在讲解如何使用 JavaScript 和 CSS 技术实现简单的树形菜单，并包含两个示例说明以供参考。

2. 实现过程

2.1 HTML 结构

首先，需要一个 HTML 结构，用于展示树形菜单。这里使用 \<ul> 和 \<li> 元素来实现，代码如下：

<ul id="tree">
  <li>第一级</li>
  <li>第一级
    <ul>
      <li>第二级</li>
      <li>第二级</li>
      <li>第二级</li>
    </ul>
  </li>
  <li>第一级</li>
</ul>

其中，ul 元素的 id 属性为 "tree"，用于方便后续 JavaScript 代码的获取。

2.2 CSS 样式

接下来，需要使用 CSS 技术来美化菜单样式。这里使用了一些基本的 CSS 样式设计，代码如下：

ul {
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
}

li {
  margin-bottom: 5px;
  padding: 5px 10px;
  border-radius: 3px;
  transition: background-color 0.3s;
}

li:hover {
  background-color: #f0f0f0;
}

ul ul {
  margin-left: 10px;
  display: none;
}

li.has-children:before {
  content: "+ ";
  float: left;
  margin-right: 5px;
}

li.has-children.open:before {
  content: "- ";
}

li.has-children:hover:before {
  color: #333;
}

其中，样式包括：

  • 对 UL 和 LI 元素的基本样式设置，如去除列表标志、设置间距等
  • 对菜单项进行排版美化，如设置圆角边框、背景颜色等
  • 设置菜单项的 hover 样式，用于提示用户当前选择的菜单项
  • 对菜单项的子级列表进行层级间距调整，以及隐藏子级列表的样式设置
  • 对含有子级的菜单项添加前缀可以展开及折叠子级菜单的“+/-”号，并且设置鼠标移入时的字体颜色变化

2.3 JavaScript 代码

最后，我们需要使用 JavaScript 代码来实现树形菜单的功能。具体实现分为以下几步。

2.3.1 获取元素

需要使用 document.getElementById() 方法获取树形菜单的 UL 元素。代码如下：

const tree = document.getElementById('tree');

2.3.2 事件监听

首先，为每个含有子级的菜单项添加 click 事件监听器。并在监听器中 toggle 该菜单项的 open 类属性。

document.querySelectorAll('li.has-children').forEach((li) => {
  li.addEventListener('click', () => {
    li.classList.toggle('open');
  });
});

这样，当用户点击一个带有子级的菜单项时，其展开状态（即“+/-”号的状态）将发生变化。

2.3.3 子菜单展示

接着，为菜单项添加鼠标进入事件的监听器。当用户鼠标进入某个菜单项时，将显示该菜单项的子级列表。反之，则隐藏该列表。

document.querySelectorAll('li.has-children').forEach((li) => {
  li.addEventListener('mouseover', () => {
    const ul = li.querySelector('ul');
    if (ul) {
      ul.style.display = 'block';
    }
  });

  li.addEventListener('mouseout', () => {
    const ul = li.querySelector('ul');
    if (ul) {
      ul.style.display = 'none';
    }
  });
});

2.3.4 完整代码

最终，树形菜单的完整代码如下所示：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>JS+CSS简单树形菜单实现方法</title>
  <style>
    ul {
      list-style: none;
      padding-left: 0;
      margin-top: 10px;
    }

    li {
      margin-bottom: 5px;
      padding: 5px 10px;
      border-radius: 3px;
      transition: background-color 0.3s;
    }

    li:hover {
      background-color: #f0f0f0;
    }

    ul ul {
      margin-left: 10px;
      display: none;
    }

    li.has-children:before {
      content: "+ ";
      float: left;
      margin-right: 5px;
    }

    li.has-children.open:before {
      content: "- ";
    }

    li.has-children:hover:before {
      color: #333;
    }
  </style>
</head>
<body>
  <ul id="tree">
    <li>第一级</li>
    <li>第一级
      <ul>
        <li>第二级</li>
        <li>第二级
          <ul>
            <li>第三级</li>
            <li>第三级</li>
          </ul>
        </li>
        <li>第二级</li>
      </ul>
    </li>
    <li>第一级</li>
  </ul>

  <script>
    const tree = document.getElementById('tree');
    document.querySelectorAll('li.has-children').forEach((li) => {
      li.addEventListener('click', () => {
        li.classList.toggle('open');
      });

      li.addEventListener('mouseover', () => {
        const ul = li.querySelector('ul');
        if (ul) {
          ul.style.display = 'block';
        }
      });

      li.addEventListener('mouseout', () => {
        const ul = li.querySelector('ul');
        if (ul) {
          ul.style.display = 'none';
        }
      });
    });
  </script>
</body>
</html>

3. 示范说明

下面是两个树形菜单的设计示例：

3.1 示例 1

本示例中，我们使用了一些特别的样式，并使用的是垂直方向的树布局。具体实现请见以下代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>示例 1</title>
  <style>
    ul {
      list-style: none;
      margin-top: 10px;
    }

    li {
      padding: 8px 16px;
      position: relative;
    }

    li:before, li:after {
      content: "";
      position: absolute;
      top: 50%;
      border-style: solid;
      border-width: 0 1px;
    }

    li:before {
      left: -16px;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 0;
    }

    li:after {
      left: -8px;
      border-top-width: 7px;
      border-bottom-width: 0;
      border-left-width: 1px;
    }

    li:first-child:before {
      top: 22px;
    }

    li:last-child:after {
      border-top-width: 0;
      border-bottom-width: 1px;
      top: -1px;
    }

    li.open ul {
      display: block;
    }

    li:hover {
      background-color: #E3F2FD;
    }

    ul ul {
      display: none;
      padding-left: 20px;
    }

    li:last-child ul li:before {
      display: none;
    }
  </style>
</head>
<body>
  <ul id="tree">
    <li>第一级</li>
    <li>第一级
      <ul>
        <li>第二级</li>
        <li>第二级
          <ul>
            <li>第三级</li>
            <li>第三级</li>
          </ul>
        </li>
        <li>第二级</li>
      </ul>
    </li>
    <li>第一级</li>
  </ul>

  <script>
    const tree = document.getElementById('tree');
    document.querySelectorAll('li.has-children').forEach((li) => {
      li.addEventListener('click', () => {
        li.classList.toggle('open');
      });
    });
  </script>
</body>
</html>

3.2 示例 2

本示例中，我们使用的是横向方向的树布局，并使用了自定义样式来完成。这个示例的设计可以拿来实现左侧导航菜单，具体实现请见以下代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>示例 2</title>
  <style>
    ul {
      list-style: none;
      margin-top: 10px;
      font-family: "Microsoft YaHei", sans-serif;
    }

    li {
      display: inline-block;
      position: relative;
    }

    li>a {
      color: #333;
      display: block;
      padding: 8px 16px;
      border-radius: 3px;
    }

    li>a:focus, li>a:hover {
      background-color: #f0f0f0;
    }

    li.open>a, li>a.active {
      background-color: #4CAF50;
      color: #fff;
    }

    li.open>a:hover, li>a.active:hover {
      background-color: #4CAF50;
    }

    ul ul {
      visibility: hidden;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #fff;
      border-radius: 3px;
      box-shadow: rgba(0, 0, 0, 0.3) 0 1px 6px;
      z-index: 1;
    }

    li:hover>ul {
      visibility: visible;
    }

    ul ul li {
      clear: both;
      width: 100%;
    }

    ul ul li>a {
      padding: 6px 8px;
      margin-left: -96px;
      background-color: #fff;
    }

    ul ul ul li>a {
      padding-left: 20px;
    }

    li:hover>a {
      background-color: #f0f0f0;
    }

    li.has-children:after {
      content: "+";
      position: absolute;
      top: 50%;
      right: 5px;
      transform: translateY(-50%);
      font-size: 14px;
    }

    li.open.has-children:after {
      content: "-";
    }
  </style>
</head>
<body>
  <ul id="tree">
    <li><a href="#">第一级</a></li>
    <li class="has-children"><a href="#">第一级</a>
      <ul>
        <li><a href="#">第二级</a></li>
        <li><a href="#">第二级</a>
          <ul>
            <li><a href="#">第三级</a></li>
            <li><a href="#">第三级</a></li>
          </ul>
        </li>
        <li><a href="#">第二级</a></li>
      </ul>
    </li>
    <li><a href="#">第一级</a></li>
    <li class="has-children"><a href="#">第一级</a>
      <ul>
        <li><a href="#">第二级</a></li>
        <li><a href="#">第二级</a>
          <ul>
            <li><a href="#">第三级</a></li>
            <li><a href="#">第三级</a>
              <ul>
                <li><a href="#">第四级</a></li>
                <li><a href="#">第四级</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

  <script>
    const tree = document.getElementById('tree');
    document.querySelectorAll('li.has-children').forEach((li) => {
      li.addEventListener('click', () => {
        li.classList.toggle('open');
      });
    });
  </script>
</body>
</html>

4. 总结

以上就是实现 "JS+CSS简单树形菜单" 的完整攻略及两个示例的说明。如果你在实际应用中遇到问题，可以进一步查阅相关文档或资料，也可以在社区上进行提问。希望你能通过本教程快速掌握实现树形菜单的技巧，愉快的编写你的项目代码！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS+CSS简单树形菜单实现方法 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • javascript实现table单元格点击展开隐藏效果(实例代码)

    下面是javascript实现table单元格点击展开隐藏效果的完整攻略。 1. 需求分析 我们需要实现一个table表格，其中有些单元格可以点击，点击后会展开隐藏内容，再次点击则会隐藏内容。 2. 实现思路 我们可以通过以下步骤来实现上述需求： 给需要实现点击展开功能的单元格添加一个点击事件监听器。 监听器中判断当前单元格是否处于展开状态。 如果处于展开状…

    css 2023年6月11日
    00

  • JavaWeb表单注册界面的实现方法

    让我来详细讲解一下“JavaWeb表单注册界面的实现方法”的完整攻略。 1. 概述 JavaWeb表单注册界面的实现方法主要包括以下几步： 设计前端页面，包括表单和提交按钮； 创建Java Servlet处理表单数据，将数据存储到数据库中； 创建数据库并设计用户表，用于存储注册用户的信息； 使用JDBC连接数据库，并编写Java代码实现数据的增删改查。 接下…

    css 2023年6月10日
    00

  • 详解CSS的结构与层叠以及格式化

    详解CSS的结构与层叠以及格式化 CSS的结构 CSS（层叠样式表）是一种用于定义HTML或XML文件中如何样式化元素的语言。CSS采用选择器和声明块的结构，将样式应用于文档的具体元素。 CSS选择器定义了要应用样式的元素，而属性值则定义了应用的样式，这些属性值存储在声明块中。 声明块有以下结构： selector { property: value; pr…

    css 2023年6月9日
    00

  • HTML页面编写的点点感受小结

    一、HTML页面编写的点点感受小结 HTML是编写网页的标准语言，学习HTML是学习网页开发的基础。在HTML页面编写中，我们需要遵循一定的规范来编写HTML代码，并且需要注意一些细节和技巧，才能编写出高质量的HTML页面。下面是我个人的点点感受小结： DOCTYPE声明：在HTML文档的开头必须声明DOCTYPE，用来指定HTML的版本和使用哪种DTD(D…

    css 2023年6月10日
    00

  • 玩转jQuery按钮 请告诉我你最喜欢哪些？

    玩转jQuery按钮 当我们开发网站或者应用的时候，按钮是经常使用的UI元素，有时候一个好看而又有趣的按钮能够让用户印象深刻。而使用jQuery可以让我们在按钮方面更加灵活地运用。 常见的jQuery按钮 在jQuery中，有一些常见的按钮样式和功能，包括按钮的hover、active效果、按钮的禁用、表单提交等。 悬停按钮 悬停按钮是一种常见的UI元素，可…

    css 2023年6月10日
    00

  • Illustator制作网页超酷的长阴影效果 两种AI制作方法介绍

    让我详细为您讲解一下 “Illustrator制作网页超酷的长阴影效果 两种AI制作方法介绍”的完整攻略。 1. 简介 长阴影效果是一种流行的网页设计技巧，可以使网页元素在平面感中增加层次感和深度感。本文将介绍两种使用Illustrator 制作长阴影效果的方法。 2. 利用渐变工具制作长阴影效果 实现步骤 打开Illustrator，创建一个新的文档，选择…

    css 2023年6月9日
    00

  • JavaScript CSS修改学习第六章 拖拽

    在学习JavaScript的CSS修改过程中，拖拽是一个重要的技能，它可以让用户像拖动窗口一样在页面内拖动元素。本章的攻略将会详细介绍如何实现拖拽功能。 原理 拖拽的原理就是通过鼠标事件和CSS属性的改变来实现。具体来说，需要监听以下几个鼠标事件： mousedown：鼠标按下时触发的事件 mousemove：鼠标移动时触发的事件 mouseup：鼠标抬起时…

    css 2023年6月11日
    00

  • 详解Vue-cli3.X使用px2rem遇到的问题

    详解Vue-cli3.X使用px2rem遇到的问题 什么是vue-cli3.X Vue CLI 是一个基于Vue.js进行快速开发的完整系统。它包括一个响应式的开发服务器、可定制的webpack配置、常规的Vue项目构建任务和集成了最佳实践的生产环境构建等。 何为px2rem px2rem 是一种将px值转化为rem值的工具。通过将框架内各个元素的单位从px…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部