html,css,js 实现树形菜单栏

本文展示了一个使用HTML、CSS和JavaScript实现的树形菜单网页设计案例。该菜单包含多个分类,如分类讨论区、社会信息、休闲娱乐和电脑技术等,每个分类下有详细子项。通过点击分类标题,可以展开或收起子项,提供了良好的交互体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

效果展示:

声明:文字前为图片,引入即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>树形菜单</title>
	</head>
	<style>
		.box{
			width: 180px;
			border: 1px solid red;
            padding-left: 10px;
			}
		a{
			font-size: 15px;
			color:aqua;
			text-decoration:none;
			}
		a:hover{
			font-size: 17px;
			color: #999999;
			 }
	</style>
	<body>
		<div class="box">
			<div>
				<a href="javascript:onClick=show('1')"><img src="image/z-1.jpg"/>分类讨论区</a>
			</div>
			<div id="1">
				<img src="image/z-top.gif" /> BBS系统<br>
				<img src="image/z-top.gif">共建水木<br>
				<img src="image/z-top.gif">站务公告栏<br>
				<img src="image/z-top.gif">妆点水木<br>
				<img src="image/z-end.gif">申请版主<br>
			</div>
			
			<div>
				<a href="javascript:onClick=show('2')"><img src="image/z-2.jpg" >社会信息</a>
			</div>
			<div id="2">
				<img src="image/z-top.gif">美容品与饰品代理<br>
				<img src="image/z-top.gif">考研资料市场<br>
				<img src="image/z-top.gif">商海纵横<br>
				<img src="image/z-top.gif">动物保护者<br>
				<img src="image/z-top.gif">动物世界<br>
				<img src="image/z-end.gif">中国风·神州各地<br>
			</div>
			
			<div>
				<a href="javascript:onClick=show('3')"><img src="image/z-3.jpg">休闲娱乐</a>
			</div>
			<div id="3">
				<img src="image/z-top.gif">ASCIIart全国转信<br>
				<img src="image/z-top.gif">七彩水木<br>
				<img src="image/z-top.gif">网友聚会<br>
				<img src="image/z-top.gif">醉品人生<br>
				<img src="image/z-top.gif">花木园艺<br>
				<img src="image/z-end.gif">祝福<br>
			</div>
			
			<div>
				<a href="javascript:onClick=show('4')"><img src="image/z-4.jpg">电脑技术</a>
			</div>
			<div id="4">
				<img src="image/z-top.gif">BBS安装管理<br>
				<img src="image/z-top.gif">CAD技术<br>
				<img src="image/z-top.gif">数字图像设计<br>
				<img src="image/z-top.gif">电脑音乐制作<br>
				<img src="image/z-top.gif">软件加密与解密<br>
				<img src="image/z-end.gif">计算机体系结构<br>
			</div>
		</div>
		<script>
			function show(d1){
				if (document.getElementById(d1).style.display == 'none') {
					document.getElementById(d1).style.display = 'block'; //触动的层如果处于隐藏状态,即显示
				} else {
					document.getElementById(d1).style.display = 'none'; //触动的层如果处于显示状态,即隐藏
				}
			}
		</script>
	</body>
</html>

 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值