CSS+JavaScript 三级分类菜单

最新推荐文章于 2024-06-17 09:40:09 发布

lemontree-xy

最新推荐文章于 2024-06-17 09:40:09 发布

阅读量211

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_43337481/article/details/131036782

版权

这篇博客展示了如何利用CSS和JavaScript创建一个交互式的三级分类菜单。通过点击一级和二级菜单，相应的三级子菜单会以展开和隐藏的方式进行切换，提供了一种灵活的网页导航结构。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS+JavaScript三级分类菜单</title>
<style>
*,body,ul,li,h1,h2 {
margin: 0;
padding: 0;
list-style: none;
}

body {
font: 12px;
padding-top: 20px;
}

dl {display: flex;}
dt {margin-right:10px;}

#menu {
width: 1000px;
margin: auto;
}

#menu h1 {
cursor: pointer;
font-size: 12px;
   margin-right: 10px;
   display: inline;
}

#menu h2 {
cursor: pointer;
   display: inline;
color: #777;
font-size: 12px;
}

#menu ul {
height: auto;
}

#menu ul li {
   display: inline;
}

.min {
   display: flex;
}

.no {
display: none;
}
</style>
<script language="JavaScript">
function ShowMenu(obj, noid) {
var block = document.getElementById(noid);
var n = noid.substr(noid.length - 1);
           var min = document.getElementById("min");
           var child = document.getElementById("child&#