js树形菜单

一塔几

于 2025-01-05 20:08:04 发布

阅读量850

点赞数 5

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_61630053/article/details/144664341

版权

css部分

* {
				margin: 0%;
				padding: 0%;
			}

			.border {
				width: 15%;
				height: 100vh;
				overflow-y: auto;
				border: 1px gray;
				display: inline-block;
				vertical-align: top;
			}

			.menuBorder {
				margin-left: 0.3%;
				background-color: white;
				width: 100%;
				list-style-type: none;
				cursor: pointer;
			}

			.FirstlevelHeading {
				margin-left: 5%;
				width: 90%;
				height: 40px;
				line-height: 40px;
			}

			.arrow {
				display: inline-block;
				margin-left: 35%;
			}

			.pip {
				display: inline-block;
				width: 82vw;
				height: 99vh;
			}

			.pipBox {
				width: 100%;
				height: 100%;
			}

			.sub_menu {
				text-indent: 10px;
			}

			li {
				transition: background-color 0.3s ease;
			}

			li:hover {
				background-color: lightblue;
			}

			.logo {
				display: inline-block;
				margin-right: 3%;
			}

侧边栏样式

.border {
    width: 15%;
    height: 100vh;
    overflow-y: auto;
    border: 1px gray;
    display: inline-block;
    vertical-align: top;
}

尺寸设置：设置元素宽度为视口宽度的 15%，高度为整个视口高度（100vh），这样定义了一个占据页面一定比例且撑满垂直方向的侧边栏布局结构。
滚动条处理：overflow-y: auto 表示当侧边栏内容在垂直方向超出其自身高度时，会自动显示垂直滚动条，方便用户查看更多内容，避免内容溢出造成页面布局混乱。
显示方式与对齐：通过 display: inline-block 使其能与其他内联块级元素在同一行排列，vertical-align: top 确保它在垂直方向上与同行元素顶部对齐，保证页面布局的整齐性。
```
.menuBorder {
    margin-left: 0.3%;
    background-color: white;
    width: 100%;
    list-style-type: none;
    cursor: pointer;
}
```

外边距与背景色：设置了左边距为 0.3%，背景颜色为白色，使菜单边框在侧边栏中有合适的间隔并且背景呈现白色，保持视觉上的清晰和整洁。
宽度与列表样式：宽度设为 100% 使其能占满父元素（很可能就是侧边栏元素）的宽度，list-style-type: none 则去除了列表项默认的前面的标记（如圆点等），让菜单看起来更简洁、整齐。
鼠标指针样式：cursor: pointer 将鼠标指针样式变为手型，提示用户该元素是可点击交互的，通常用于展开或收起菜单等操作。

.FirstlevelHeading {
    margin-left: 5%;
    width: 90%;
    height: 40px;
    line-height: 40px;
}

外边距与尺寸：设置了左边距为 5%，宽度为 90%，高度为 40px，定义了一级标题在其父元素（可能是菜单等结构中的标题部分）中的相对位置和尺寸大小，使其有合适的留白和展示空间。
行高设置：line-height: 40px 让标题文本在垂直方向上居中对齐，提升视觉上的整齐和美观度，方便用户阅读和识别。

.arrow {
    display: inline-block;
    margin-left: 35%;
}

定义了一个内联块级元素（可以和其他内联元素同行显示且能设置宽高），并且设置了左边距为 35%，可能用于在菜单中显示箭头图标（例如用于指示菜单的展开或收起方向等），使其在水平方向上处于合适的位置，配合菜单的整体布局呈现出相应的视觉效果。

.pip {
    display: inline-block;
    width: 82vw;
    height: 99vh;
}
.pipBox {
    width: 100%;
    height: 100%;
}

.pip 类：通过 display: inline-block 让该元素与其他内联块级元素同行排列，宽度设为 82vw（视口宽度的 82%），高度为 99vh（接近整个视口高度），划分出页面主体内容的展示区域，占据页面大部分空间，用于展示主要的信息、内容等。
.pipBox 类：宽度和高度都设为 100%，可能是作为内部进一步嵌套内容的容器，确保内容能完整填充 .pip 所定义的主体内容区域，方便后续在其中进行更细化的页面布局和样式设置。

.sub_menu {
    text-indent: 10px;
}

设置 text-indent: 10px，会让子菜单中的文本内容在水平方向上缩进 10px，用于区分不同层级的菜单，在视觉上体现出菜单的层级关系，使页面菜单结构更加清晰、易读。

li {
    transition: background-color 0.3s ease;
}
li:hover {
    background-color: lightblue;
}

过渡效果：对所有列表项（li 元素）设置了背景颜色变化的过渡效果，过渡时间为 0.3s，过渡动画的速度曲线为 ease（先慢后快再慢的自然过渡效果）。这样当列表项的背景色发生改变时（如鼠标悬停时），会有一个平滑的颜色渐变过程，提升交互的视觉体验。
悬停效果：:hover 伪类选择器定义了列表项在鼠标悬停时的样式，将背景颜色变为淡蓝色（lightblue），为用户提供了一种视觉反馈，提示用户当前鼠标所在的列表项是可交互的，增强了页面的交互性和用户体验。

.logo {
    display: inline-block;
    margin-right: 3%;
}

将带有 .logo 类的元素设置为内联块级元素，使其能与其他内联元素同行显示，并且设置了右边距为 3%，常用于页面中 logo 图标的布局，让其在水平方向上与其他相邻元素保持合适的间距，符合页面整体的排版和美观要求。

总体来说，这段 CSS 代码重点在于构建页面的基本布局结构，包括侧边栏、主体内容区等，同时通过设置各种元素的样式、交互效果来提升页面的视觉呈现和用户交互体验，营造出清晰、美观且易用的页面效果。

<div class="border">
			<ul>
				<li>张三</li>
				<div>
					<ul>
						<li>李四</li>
						<li>王五</li>
						<div>
							<ul>
								<li>赵六</li>
								<li>田七</li>
							</ul>
						</div>
					</ul>
				</div>
				<li>王八</li>
				<div>
					<ul>
						<li>真九</li>
						<li>进度款</li>
						<div>
							<ul>
								<li>男女</li>
							</ul>
						</div>
					</ul>
				</div>
			</ul>
		</div>
		<div class="pip"><iframe src="https://www.youkuaiyun.com/" frameborder="0" class="pipBox"></iframe></div>

这段代码主要由两个 <div> 元素构成，它们将页面划分为两部分，分别承担不同的功能，整体呈现出一种侧边栏与主体内容区的布局结构，很可能与前面提到的 CSS 样式代码配合使用来构建完整的页面效果。

这是一个具有多层嵌套结构的无序列表（<ul>），位于带有 .border 类的 <div> 容器内。整体来看，它呈现出一种层级式的菜单结构，外层的 <li> 元素可以看作是一级菜单选项，而内部嵌套的 <div> 及 <ul> 组合下的 <li> 元素则可以视为二级、三级等更深层级的子菜单选项。例如，“张三” 是一级菜单选项，其下的 “李四”“王五” 等则是二级子菜单选项，“赵六”“田七” 又是更低层级的子菜单选项，以此类推。
通过这种嵌套结构，能够清晰地展示不同层级的分类信息，方便用户在侧边栏进行菜单导航操作，不过从代码规范角度看，在 <ul> 中直接嵌套 <div> 不是标准的 HTML 列表结构用法，通常应该都是 <li> 元素进行嵌套来构建多层级列表，但如果有特定的布局或样式需求，结合合适的 CSS 样式及 JavaScript 交互逻辑，这样的写法也可以实现相应功能。