在一些管理系统里面,一般右侧都会有树形的导航栏,点击一下就会出现下拉菜单,显示出来该父菜单下面的子菜单
项目,然后配以图片,和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" onclick="changevisible(this)"><a href="#">基础信息管理</a></span> <div class="hidden"><span class="2blank"> <img src="/HTML/img/sanjiao.gif"/></span><span class="fold"><a href="/HTML/test/right.html" target="right" >主管单位信息</a></span></div> <div class="hidden"><span class="2blank"> <img src="/HTML/img/sanjiao.gif"/></span><span class="fold"><a href="#">建设单位信息</a></span></div> <