jquery+CSS实现的多级竖向展开树形TRee菜单效果

网络编程 2024/11/20 佚名

3 2 1

本文实例讲述了jquery+CSS实现的多级竖向展开树形TRee菜单效果。分享给大家供大家参考。具体如下：

这里演示垂直的树形菜单，应用CSS和jquery技术来实现，显示在网页左侧比较合适，考虑到简洁，没有使用图片之类的作修饰。本效果兼容IE、火狐等主流浏览器。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-css-nlevel-vshow-tree-codes/

具体代码如下：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery多级层叠树形菜单效果</title>
<style>
.topnav {
 width: 213px;
 padding: 40px 28px 25px 0;
 font-family: "CenturyGothicRegular", "Century Gothic", Arial, Helvetica, sans-serif;
}
ul.topnav {
 padding: 0;
 margin: 0;
 font-size: 1em;
 line-height: 0.5em;
 list-style: none;
}
ul.topnav li {}
ul.topnav li a {
 line-height: 10px;
 font-size: 11px;
 padding: 10px 5px;
 color: #000;
 display: block;
 text-decoration: none;
 font-weight: bolder;
}
ul.topnav li a:hover {
 background-color:#675C7C;
 color:white;
}
ul.topnav ul {
 margin: 0;
 padding: 0;
 display: none;
}
ul.topnav ul li {
 margin: 0;
 padding: 0;
 clear: both;
}
ul.topnav ul li a {
 padding-left: 20px;
 font-size: 10px;
 font-weight: normal;
 outline:0;
}
ul.topnav ul li a:hover {
 background-color:#D3C99C;
 color:#675C7C;
}
ul.topnav ul ul li a {
 color:silver;
 padding-left: 40px;
}
ul.topnav ul ul li a:hover {
 background-color:#D3CEB8;
 color:#675C7C;
}
ul.topnav span{
 float:right;
}
</style>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.6.2.min.js">

希望本文所述对大家的jquery程序设计有所帮助。

jquery,CSS,多级,竖向展开,树形,TRee菜单