纯html5的树形菜单,一个简单的js树形菜单

最新推荐文章于 2023-07-28 10:04:50 发布
最新推荐文章于 2023-07-28 10:04:50 发布
阅读量1k 收藏 1
点赞数
文章标签： 纯html5的树形菜单
我练习一下，以免不时之需。树形菜单不过就是把普通菜单重新排列一下，看起来像树形而已。上图京东的菜单，给他多几个嵌套，然后添加收缩伸展事件，差不多就行了。给个例子:/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">body{ font-size: 12px;}h2,h3{ margin: 0;}ul{ margin:...
摘要由CSDN通过智能技术生成

我练习一下，以免不时之需。

树形菜单不过就是把普通菜单重新排列一下，看起来像树形而已。

599278b9afdee83525e79aa4db4cf947.png

上图京东的菜单，给他多几个嵌套，然后添加收缩伸展事件，差不多就行了。

给个例子:

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

body{ font-size: 12px;}

h2,h3{ margin: 0;}

ul{ margin: 0; padding: 0; list-style: none; }

#outer_wrap li{ padding-left: 30px; line-height: 24px;}

.controlSymbol{ padding: 0 5px; border: 1px solid #adff2f; cursor: pointer;}

  • 标题1

    • 内容1
    • 内容2
    • 内容3
    • 内容4

    • 标题1_1

      • 内容1_1
      • 内容1_2
      • 内容1_3
      • 内容1_4

    • 标题1_2

      • 内容1_1
      • 内容1_2
      • 内容1_3
      • 内容1_4
最低0.47元/天 解锁文章
早鸟
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
树形菜单.rar
05-21
纯html+js 实现的树形菜单。
html5 jstree树形菜单,树形插件jsTree
weixin_39787397的博客
07-02 1887
jsTree是一款基于jQuery的树形控件，具有扩展性强，可编辑和可配置的特性，支持HTML，JSON和Ajax数据加载。jsTree官网地址：https://www.jstree.com/。这里主要介绍的是基于Ajax从数据库获取数据，然后生成树形菜单的用法。jsTree的皮肤可以自由定制，本文使用的是一款第三方jsTree皮肤。引入依赖因为其基于jQuery，所以引入jsTree依赖前得先引...
制作一棵ztree
李章勇的博客
04-18 477
制作一棵ztree 　　我们在做web项目时，常会用到一些树形菜单。在此，我们利用ztree实现树形菜单的效果。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 的最大优点。 　　接下来，我演示一棵简单的ztree，效果如下所示： 　　案例架构如下： 　　其中，测试文件inde...
纯html5的树形菜单,纯javascript响应式树形菜单效果
weixin_36277690的博客
06-04 566
简要教程aimaraJS是一款非常实用的纯javascript响应式多级目录树结构插件。该目录树可以动态添加和删除树节点，可以制作多级树结构，每个节点上可以都带有右键上下文菜单，并且每个节点上都可以配置不同的图标。它的特点有：可以创建一个基本的树结构并渲染它。可以实时添加和删除树节点。可以显示不同的树节点图标。在树节点打开和关闭的时候可以自定义事件。每个树节点上都可以制作右键上下文菜单。使用方法使...
JS实现树形菜单
柚稚的博客
07-07 3556
需求 用JS实现树形结构，原本的数据是数组类型，需要先把数据进行处理，然后在页面上渲染DOM，注意点有以下几点： 1、data必须含有id和fatherId来表示他们的层级关系 2、js动态创建DOM的实现方式是先创建一个div，然后把生成的元素appendChild给这个div 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-eq
JS+CSS简单树形菜单实现方法
10-23
本文将详细讲解如何使用JavaScript和CSS来实现一个简单的树形菜单。 首先，我们来理解JavaScript在此处的作用。JavaScript是客户端脚本语言，用于动态修改HTML和CSS，实现交互效果。在树形菜单的实现中，JavaScript...
javascript制作 树形菜单.zip
03-20
在JavaScript编程中，树形菜单是一种常见的用户界面元素，它以层级结构展示数据，通常用于网站导航、文件系统浏览或数据库记录的展示。本压缩包包含两个文件："可以拖动的IEtree树型.htm" 和 "树型结构_lj不错.htm"...
JavaScript递归算法生成树形菜单
10-19
JavaScript递归算法生成树形菜单是一种常见的编程技巧，主要用于处理具有层级关系的数据，例如网站的导航菜单、组织结构等。在本示例中，我们看到如何利用递归方法将一个对象数组转换为HTML的树形结构，从而在网页上...
html js树形图多级菜单美观可配置
01-22
在树形菜单中，HTML元素如`<ul>`（无序列表）和`<li>`（列表项）常被用来表示层次结构。每级菜单可以是一个`<li>`元素，其中包含子菜单的另一个`<ul>`。通过嵌套这些元素，我们可以创建多级的树状结构。 其次，...
一个基于jQuery的简单树形菜单
11-20
本主题聚焦于一个基于jQuery实现的简单树形菜单，这是一种轻量级且高效的方法，适用于各种Web应用。 jQuery是一个广泛使用的JavaScript库，简化了DOM操作、事件处理、动画以及Ajax交互。利用jQuery，我们可以快速...
HTML树形菜单
08-30
树形菜单
html5-tree-graph:纯HTML5和JavaScript树形图
05-01
HTML5树状图 使用带有纯JavaScriptHTML5的树形图的图形化绘制，没有任何其他依赖项。 专为提高速度和效率而设计。 现场示例可以在这里看到：
html5 jstree树形菜单,Javascript树型菜单(含源码)
weixin_34345947的博客
07-02 725
类型：音频处理大小：1M语言：中文 评分：5.1标签：立即下载看到园友发表了一篇关于JS树的文章，看了之后，觉得应该可以精简不少代码，想到了以前做的项目里面用到了一个JS树，于是试着修改了一下，现把代码贴出来与大家共享，还请大家多扔砖头！--%>var tree;window.onload = function(){if (tree != "") {tree = new treeview("...
用HTML做树形菜单,jquery实现树形菜单完整代码
weixin_31526891的博客
06-04 1065
本实例实现了树形的动态菜单，兼容IE8,火狐，Chrome等浏览器。使用了jQuery的toggle() 方法。效果和代码如下：jquery的树形菜单代码 body { font-family:"宋体"; font-size: 12px; line-height: 1.5em; color:#7FB0C8; padding:0; margin:0; background: #336699;}ul,...
html5 jstree树形菜单,简单的JsTree 树形视图 checkbox demo
weixin_35231383的博客
07-02 475
jsTree是一个基于jQuery的Tree控件。支持 XML，JSON，Html三种数据源。提供创建，重命名，移动，删除，拖放节点操作。可以自己自定义创建，删除，嵌套，重命名，选择节点的规则。在这些操作上可以添加多种监听事件。 更多信息请访问： http://www.jstree.com/该demo基于json数据实现效果： 下载并引入jquery和jstree以及相应的cssjstreefu...
怎样用html制作树形菜单,使用js简单实现了tree树菜单
weixin_42509409的博客
06-04 936
tree.node ul{margin-left:20px;}.node .node{display:none;}.node .tree{height:24px;line-height:24px;}.ce_ceng_close{background:url(images/cd_zd1.png) left center no-repeat;padding-left: 15px;}.ce_ceng_o...
基于vue app/h5的 手机端树状组件
zq1234sfg的博客
07-19 1545
最近有个手机端需求需要展示一个树状的树形菜单 发现开源的没有太好的轮子 结合了一些资料封装了一个树形组件。如有问题请私信 承接微信小程序 微信公众号 web网站 app开发等 如有需要请私信。tree.vue 代码如下。
H5版本-树形多选(treeCheckbox)
最新发布
apppws的博客
07-28 631
h5 树形多选
HTML实战案例素材1：制作树形菜单页面
海鱼专属博客
05-27 4232
实战案例素材1：制作树形菜单页面 一、完整的页面效果图 二、文本素材 我的电脑文件列表 我的电脑 本地磁盘(C:) 我的文档 我的收藏 本地磁盘(D:) 我的游戏 我的资料 我的电影 三、代码展示 <!DOCTYPE html> <html> <head> <meta charset="ut...
用Javascript写一个树形菜单
05-16
以下是一个简单的树形菜单的JavaScript代码示例： ```html <!-- 在html中定义一个ul元素作为菜单容器 --> <ul id="menu"> <li> <span>菜单1</span> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> </ul> </li> <li> <span>菜单2</span> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> </ul> </li> </ul> <script> // 获取菜单容器元素 var menu = document.getElementById("menu"); // 为所有的菜单项添加点击事件监听器 var menuItems = menu.querySelectorAll("li > span"); for (var i = 0; i < menuItems.length; i++) { menuItems[i].addEventListener("click", function() { // 切换菜单项的展开状态 this.parentElement.classList.toggle("active"); }); } </script> <style> /* 定义菜单项的样式 */ #menu li { list-style: none; } /* 定义展开状态下的菜单项样式 */ #menu li.active > ul { display: block; } /* 隐藏所有子菜单 */ #menu ul { display: none; } </style> ``` 上述代码中，我们首先在HTML中定义了一个ul元素作为菜单容器，然后使用JavaScript获取该元素，并为所有菜单项添加了点击事件监听器。当用户点击菜单项时，我们通过切换菜单项的父元素（li元素）的active类来改变菜单项的展开状态。我们还使用CSS定义了菜单项和展开状态下的菜单项的样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值