JavaScript+CSS实现经典的树形导航栏

最新推荐文章于 2024-07-23 16:23:26 发布

Bird

最新推荐文章于 2024-07-23 16:23:26 发布

阅读量9k

点赞数 4

分类专栏： HTML 文章标签： javascript css class div fold stylesheet

本文链接：https://blog.csdn.net/a352193394/article/details/7392849

版权

本文介绍如何利用JavaScript和CSS实现经典的树形导航栏功能，常见于管理系统中。通过点击显示或隐藏子菜单，结合图片和CSS样式，打造实用的导航效果。文章讲述了作者从研究Struts Dojo插件到自学CSS和JS的过程，最终成功创建了一个可用的导航菜单栏。

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

在一些管理系统里面，一般右侧都会有树形的导航栏，点击一下就会出现下拉菜单，显示出来该父菜单下面的子菜单

项目，然后配以图片，和CSS的效果，可以说是非常常用的功能，现在做一个项目，正好用到这个功能，于是到处寻找

资料，从Struts的Dojo插件到Dojo的学习，各种看，结果各种不懂。那个悲催啊！！！结果从头再来，苦学CSS和JS，

虽然现在JS水平不咋的，但是还是可以写出一个一般的导航菜单栏了，自己看看还是说的过去，这里拿出来Show一

下，回来自己好用。

首先上最开始的左侧菜单HTML代码

<!DOCTYPE html>
<html>
  <head>
    <title>left.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="/HTML/JavaScript/left.js"></script>

	<link rel="stylesheet" href="../css/left.css" type="text/css"></link>
</head>
  
<body>	
	<div class="show"><span class="fold1" οnclick="changevisible(this)"><a href="#">基础信息管理</a></span>
         <div class="hidden"><span class="2blank">   <img src="/HTML/img/sanjiao

最低0.47元/天解锁文章

Bird

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
JavaScript+CSS实现经典的树形导航栏

在一些管理系统里面，一般右侧都会有树形的导航栏，点击一下就会出现下拉菜单，显示出来该父菜单下面的子菜单项目，然后配以图片，和CSS的效果，可以说是非常常用的功能，现在做一个项目，正好用到这个功能，于是到处寻找资料，从Struts的Dojo插件到Dojo的学习，各种看，结果各种不懂。那个悲催啊！！！结果从头再来，苦学CSS和JS，虽然现在JS水平不咋的，但是还是可以写出一个一般的导航菜单
复制链接

扫一扫

专栏目录