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


Posted in Javascript onAugust 24, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
(function($){
 $.fn.extend({
 accordion: function(options) {
  var defaults = {
   accordion: 'true',
   speed: 300,
   closedSign: '[+]',
   openedSign: '[-]'
  };
  var opts = $.extend(defaults, options);
   var $this = $(this);
   $this.find("li").each(function() {
    if($(this).find("ul").size() != 0){
     $(this).find("a:first").append("<span>"+ opts.closedSign +"</span>");
     if($(this).find("a:first").attr('href') == "#"){
      $(this).find("a:first").click(function(){return false;});
     }
    }
   });
   $this.find("li.active").each(function() {
    $(this).parents("ul").slideDown(opts.speed);
    $(this).parents("ul").parent("li").find("span:first").html(opts.openedSign);
   });
   $this.find("li a").click(function() {
    if($(this).parent().find("ul").size() != 0){
     if(opts.accordion){
      if(!$(this).parent().find("ul").is(':visible')){
       parents = $(this).parent().parents("ul");
       visible = $this.find("ul:visible");
       visible.each(function(visibleIndex){
        var close = true;
        parents.each(function(parentIndex){
         if(parents[parentIndex] == visible[visibleIndex]){
          close = false;
          return false;
         }
        });
        if(close){
         if($(this).parent().find("ul") != visible[visibleIndex]){
          $(visible[visibleIndex]).slideUp(opts.speed, function(){
           $(this).parent("li").find("span:first").html(opts.closedSign);
          });
         }
        }
       });
      }
     }
     if($(this).parent().find("ul:first").is(":visible")){
      $(this).parent().find("ul:first").slideUp(opts.speed, function(){
       $(this).parent("li").find("span:first").delay(opts.speed).html(opts.closedSign);
      });
     }else{
      $(this).parent().find("ul:first").slideDown(opts.speed, function(){
       $(this).parent("li").find("span:first").delay(opts.speed).html(opts.openedSign);
      });
     }
    }
   });
 }
});
})(jQuery);
</script>
<script language="JavaScript">
$(document).ready(function() {
 $(".topnav").accordion({
  accordion:false,
  speed: 500,
  closedSign: '[+]',
  openedSign: '[-]'
 });
});
</script>
<ul class="topnav">
 <li><a href="#" target="scriptbreaker">Home</a></li>
 <li><a href="#">JavaScript</a>
  <ul>
    <li><a href="#">Cookies</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Forms</a></li>
    <li><a href="#">Games</a></li>
    <li><a href="#">Images</a></li>
    <li><a href="#">Navigations</a>
    <ul>
     <li><a href="#">CSS</a></li>
     <li><a href="#">JavaScript</a></li>
     <li><a href="#">JQuery</a></li>
    </ul>
   </li>
    <li><a href="#">Tabs</a></li>
  </ul>
 </li>
 <li><a href="#">Tutorials</a>
  <ul>
    <li class="active"><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">Java</a>
    <ul>
     <li><a href="#">JSP</a></li>
     <li><a href="#">JSF</a></li>
     <li><a href="#">JPA</a></li>
     <li><a href="#" target="_blank">Contact</a></li>
    </ul>
   </li>
    <li><a href="#">Tabs</a></li>
  </ul>
 </li>
 <li><a href="#" target="_blank">Contact</a></li>
 <li><a href="#">Upload script</a></li>
</ul>
</body>
</html>

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

Javascript 相关文章推荐
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
JS 有名函数表达式全面解析
Mar 19 Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 #Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 #Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 #Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 #Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 #Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 #Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 #Javascript
You might like
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
jquery JSON的解析方式
2009/07/25 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
Python Socket编程入门教程
2014/07/11 Python
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
python地震数据可视化详解
2019/06/18 Python
python使用Geany编辑器配置方法
2020/02/21 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
详解Python中的Lock和Rlock
2021/01/26 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
自动化专业毕业生自荐信
2013/11/01 职场文书
工商管理专业应届生求职信
2013/11/04 职场文书
计算机毕业大学生推荐信
2013/12/01 职场文书
社会实践评语
2014/04/28 职场文书
高考励志标语
2014/06/05 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
初中语文教学反思范文
2016/03/03 职场文书