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 相关文章推荐
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 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
php按单词截取字符串的方法
2015/04/07 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
python使用PyGame模块播放声音的方法
2015/05/20 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
python如何代码集体右移
2020/07/20 Python
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
介绍一下Java中标识符的命名规则
2014/02/03 面试题
入党申请书自我鉴定
2013/10/12 职场文书
品牌推广活动策划方案
2014/08/19 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
Python OpenCV之常用滤波器使用详解
2022/04/07 Python