HTML+JS+CSS自定义树形菜单

最新推荐文章于 2024-04-02 01:59:44 发布
最新推荐文章于 2024-04-02 01:59:44 发布
阅读量2.7w 收藏 15
点赞数 1
分类专栏： 前端插件 文章标签： css html javascript treeview 技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013267865/article/details/67648061
版权

小编最近做项目的时候时常用到树形菜单（Treeview），一直用的是别人的插件，但有时候不符合自己的页面风格,修改样式、图标什么的都不方便，所以在这里我急写个方便修改样式什么的。

下面开始...

应用到技术：JavaScript/Css/HTML

IDA：VS 2010

 

首先构造一下思路，需要哪些文件

1、js文件

2、Css文件

3、Html文件

4、图标

5、Juuery文件

6、后台查询数据文件

 

创建项目

 

在Html添加如下内容

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width" />

    <script src="Scripts/Jquery-3.1.1/jquery-3.1.1.min.js" type="text/javascript"></script>

    <script src="Scripts/Jquery-3.1.1/jquery-3.1.1.js" type="text/javascript"></script>

    <title>用户自定义树形菜单</title>

  

</head>

<body>

    <!--树形菜单容器-->

    <div class="parentnode">

    </div>

</body>

</html>

这里主要是给TreeView一个容器

 

给这个容器添加Css样式

bodt, html

{

    padding: 0;

    margin: 0;

    border: 0;

    font-family: 'Microsoft YaHei';

}

 

.parentnode

{

    border: 1px solid #808080;

width: 280px;

height: 240px;//暂时写在这后面会删除

    position: relative;

    text-align: left;

    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.09);

    display: inline-block;

    vertical-align: top;

}

效果图

 

下面我们开始写树形菜单内部结构

 

HTML代码：

<div class="parentnode">

        <div class=" parentnode_noe">

            <div class=" parentnode_title ">

                <div class="parentnode_title_symbol parentnode_title_fix ">

                    <b>1</b></div>

                <div class="parentnode_title_check parentnode_title_fix">

                    <b>1</b></div>

                <div class="parentnode_title_picture parentnode_title_fix">

                </div>

                <div class="parentnode_title_name" id="14" name="0">

                    系统管理</div>

            </div>

            <div class=" parentnode_noe">

                <div class=" parentnode_title ">

                    <div class="parentnode_title_fix parentnode_title_nochildnode_symbol">

                        <b style="display: none;">1</b></div>

                    <div class="parentnode_title_check parentnode_title_fix">

                        <b>1</b></div>

                    <div class="parentnode_title_picture parentnode_title_fix">

                    </div>

                    <div class="parentnode_title_name" id="15" name="14">

                        用户管理</div>

                </div>

            </div>

            <div class=" parentnode_noe">

                <div class=" parentnode_title ">

                    <div class="parentnode_title_fix parentnode_title_nochildnode_symbol">

                        <b style="display: none;">1</b></div>

                    <div class="parentnode_title_check parentnode_title_fix">

                        <b>1</b></div>

                    <div class="parentnode_title_picture parentnode_title_fix">

                    </div>

                    <div class="parentnode_title_name" id="16" name="14">

                        角色功能管理</div>

                </div>

            </div>

            <div class=" parentnode_noe">

                <div class=" parentnode_title ">

                    <div class="parentnode_title_fix parentnode_title_nochildnode_symbol">

                        <b style="display: none;">1</b></div>

                    <div class="parentnode_title_check parentnode_title_fix">

                        <b>1</b></div>

                    <div class="parentnode_title_picture parentnode_title_fix">

                    </div>

                    <div class="parentnode_title_name" id="17" name="14">

                        角色管理</div>

                </div>

            </div>

            <div class=" parentnode_noe">

                <div class=" parentnode_title ">

                    <div class="parentnode_title_symbol parentnode_title_fix ">

                        <b>1</b></div>

                    <div class="parentnode_title_check parentnode_title_fix">

                        <b>1</b></div>

                    <div class="parentnode_title_picture parentnode_title_fix">

                    </div>

                    <div class="parentnode_title_name" id="18" name="14">

                        用户角色管理</div>

                </div>

                <div class=" parentnode_noe">

                    <div class=" parentnode_title ">

                        <div class="parentnode_title_symbol parentnode_title_fix ">

                            <b>1</b></div>

                        <div class="parentnode_title_check parentnode_title_fix">

                            <b>1</b></div>

                        <div class="parentnode_title_picture parentnode_title_fix">

                        </div>

                        <div class="parentnode_title_name" id="24" name="18">

                            召回信息</div>

                    </div>

                    <div class=" parentnode_noe">

                        <div class=" parentnode_title ">

                            <div class="parentnode_title_fix parentnode_title_nochildnode_symbol">

                                <b style="display: none;">1</b></div>

                            <div class="parentnode_title_check parentnode_title_fix">

                                <b>1</b></div>

                            <div class="parentnode_title_picture parentnode_title_fix">

                            </div>

                            <div class="parentnode_title_name" id="29" name="24">

                                三级</div>

                        </div>

                    </div>

                    <div class=" parentnode_noe">

                        <div class=" parentnode_title ">

                            <div class="parentnode_title_f

最低0.47元/天 解锁文章
小巷0
关注
  • 1
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
js+css改造jsmind实现思维导图 | 树状图
qq_40420929的博客
04-19 8632
一. 调研 树状图 | 思维导图调研 1．https://juejin.cn/post/6844904103298990093 2.echarts https://echarts.apache.org/examples/zh/editor.html?c=tree-polyline 3.https://juejin.cn/post/6844903615425937416 4.https://bl.ocks.org/mbostock/4339083 5.https://fperucic.github.io/tr
HTML树形菜单
08-30
树形菜单
HTML&CSS中的树形结构图
Li5306的博客
05-29 6450
有两个维度影响树视图的布局: 行间距(等于文本的行高)和标记的半径。.tree{虽然我们通常使用相对单位来缩放基于文本大小的用户界面控件，但对于标记，这可能导致控件过小或过大，所以我们使用一个合理的固定大小。
【图解数据结构】树和二叉树全面总结，HTML常用标签之列表标签
最新发布
2401_83620841的博客
04-02 543
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。
HTML使用treeTable实现树形表格
热门推荐
weixin_39336385的博客
09-08 2万+
一、前言 参考文章：https://gitee.com/im286er/treetable-lay 备注:这个大佬写得很全面，也有演示地址，不过是直接读取本地的json文本，我写这文章就是补充下后端动态的给前端传值，本人小白，第一次写，主要是为了做下笔记，有需要的朋友将就的看下。 先看下效果图： 备注：我是用springboot写的，所以后面的所有静态文件都是放在/static/下 二、前端部分...
HTML简单介绍
dana cai的博客
09-11 1248
html是树形结构的标签,标签里可以嵌套其他标签,标签的属性使用键值对表示(name="value")声明一个html文件,快捷键: !+tab可以一键生成. 块元素: 每块元素都以新行开始和结束,可指定大小,不指定大小默认以块内元素大小如:, , , 不会另起新行大小取决于内部元素大小如:, , , 标题很重要(引用文档)请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。搜索引擎使用标
html树形菜单折叠 css,JS+CSS简单树形菜单实现方法
weixin_42099070的博客
06-03 801
本文实例讲述了JS+CSS简单树形菜单实现方法。分享给大家供大家参考。具体如下：这是一款不错的CSS树形菜单，树状列表，当然不全是CSS实现，部分功能还使用了JavaScript代码进行配合，删减了修饰用的菜单图片，大家用的时候自己图片加进去，IMG标签大部分都预留了出来，稍懂Html语法的朋友很容易就看懂的。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w...
纯css实现树形结构的示例代码
09-24
本文主要探讨如何使用纯CSS实现这样的树形结构，而不依赖JavaScript或其他编程语言。 首先，我们需要一个HTML的基础结构来表示树形节点。通常，我们会使用无序列表`<ul>`来创建层级关系，每个`<li>`代表一个节点，...
CSS TreeMenu 二级树形菜单示例
09-05
CSS TreeMenu 是一种用于创建二级树形菜单的样式表技术，它主要用于构建网站的导航结构，尤其是适合在网站的侧边栏中展示。这个二级树形菜单设计得既美观又实用，可以有效地组织和呈现多级菜单内容，帮助用户快速...
jQuery自定义编辑的树形菜单代码.zip
11-24
jQuery自定义编辑的树形菜单代码.zip
用Js和css实现树状图
01-16
大家来学学，共同努力。 下载完后，可以点击index.html看看效果，自己还可以在加上自己需要的
jQuery多级折叠展开树形菜单代码
01-23
jQuery多级折叠展开树形菜单代码是一款简单实用的树形结构菜单插件，数据封装在data.js里面，直接修改调用即可。
js树形导航菜单制作垂直js导航条特效
04-09
js树形导航菜单制作一个垂直纵向js导航条只设置导航二级菜单分类，点击显示隐藏二级菜单目录。内含js代码下载。
jQuery折叠展开树形菜单代码.zip
07-04
jQuery折叠展开树形菜单代码是一款多级子菜单折叠展开效果，列表菜单数据封装在data.js里面，直接修改调用即可。
可折叠树形菜单代码（带搜索功能）
01-09
jQuery折叠树形菜单代码基于jquery.1.10.2.min.js制作，带搜索功能，搜索关键字，直接显示菜单项，展开收缩树形菜单。
Vue组件tree实现树形菜单
08-30
在Vue.js框架中，开发一个树形菜单组件是常见的需求，尤其在构建具有层级结构的数据展示时。Vue组件Tree就是一种实现这一功能的有效工具。在这个组件中，我们可以创建多级目录，支持节点的展开与收缩，并能根据用户...
vue实现树形菜单效果
08-27
1. 定义树形菜单数据：首先，我们需要定义树形菜单的数据结构，例如使用 JavaScript 对象来定义菜单项和子菜单项。 2. 创建 Vue 组件：接下来，我们需要创建一个 Vue 组件来展示树形菜单，例如使用 `<template>` ...
web端树状菜单（支持无限下级分类+修改+新增+删除）
夕空
12-03 3768
DEMO下载：https://download.csdn.net/download/zhi_jie/10825201 一开始在onethink后台里看到的，发现只能展开到3级菜单，经过我一通修改，可以无限下级分类的菜单了，可以实时修改、新增、删除，代码示例需要jquery与art-template.js（可以换成你习惯的模板引擎或修改成jq操作） 注意：此树状菜单是一级一级读取jso...
echarts树状图通过手势放大缩小
06-10
Echarts树状图可以通过手势放大缩小，具体实现方法如下： 1. 在Echarts的option中添加一个`dataZoom`组件，如下所示： ```javascript option = { ... dataZoom: [ { type: 'inside', zoomOnMouseWheel: true, moveOnMouseMove: true } ], ... } ``` 其中，`type`属性表示数据缩放的类型，这里设置为`inside`表示内部缩放。`zoomOnMouseWheel`属性表示是否开启鼠标滚轮缩放功能，`moveOnMouseMove`属性表示是否开启鼠标拖动缩放功能。 2. 在树状图的容器元素上添加一个`echarts-gl`类名，用于开启WebGL功能，如下所示： ```html <div id="tree" class="echarts echarts-gl"></div> ``` 3. 在树状图的容器元素上添加一些CSS样式，用于限制容器元素的大小，如下所示： ```css #tree { width: 100%; height: 500px; } ``` 这样，就可以通过手势放大缩小Echarts树状图了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值