实现二级菜单的一种方式--没有js 运行不了,主要看代码红色部分,只提供思路

 

实现二级菜单的一种方式

 

<div id="title">
<div id="content">

 

 

 

        
        var titles = $('#slides').children('.slide_title');
		var contents = $('#slides').children('.slide_content'); 
		
		titles.bind('mouseover',function(i){
			var flag = $(this).next().is(':hidden');
			if(flag){
				$(this).next().show();
			}
		});
		
		titles.bind('mouseout',function(i){
			var flag = $(this).next().is(':hidden');
			var flagcontent = $(this).next().is(':hover');
			if(!flag){
				if(flagcontent){
					$(this).next().hover(function (){
						$(this).show();  
			        },function (){  
			        	$(this).hide();  
			        });
				}else{
					 $(this).next().hide();
				}
			}
		});  
		
		 $('li','.slidemenu').click(function(){
	            var url = $(this).attr('url');
	            var id = $(this).attr('id');
	            var name = $(this).attr('name');
	            Jc().tab($('#mainbar')).add({
	                tabID:id,
	                title:name,
	                panel:Jc().ajax({
	                	url:url
	                })
	            });
	        });
		$('#slides').css('display','none');
        
        $('.split').click(function(){
            var that = $(this);
            if(that.hasClass('split_right')){
                that.removeClass('split_right');
                $('#mainbar').animate({'left':175});
                $('.menubar').animate({'width':165});
                
                $('#slides').css('display','none');
                $('#menus').css('display','block');
            }else{
                that.addClass('split_right');
                $('.menubar').animate({'width':40});
                $('#mainbar').animate({'left':50});
                
                $('#menus').css('display','none');
                $('#slides').css('display','block');
            }
        });titles.bind('mouseover',function(i){
			var flag = $(this).next().is(':hidden');
			if(flag){
				$(this).next().show();
			}
		});
		
		titles.bind('mouseout',function(i){
			var flag = $(this).next().is(':hidden');
			var flagcontent = $(this).next().is(':hover');
			if(!flag){
				if(flagcontent){
					$(this).next().hover(function (){
						$(this).show();  
			        },function (){  
			        	$(this).hide();  
			        });
				}else{
					 $(this).next().hide();
				}
			}
		});  
		
		 $('li','.slidemenu').click(function(){
	            var url = $(this).attr('url');
	            var id = $(this).attr('id');
	            var name = $(this).attr('name');
	            Jc().tab($('#mainbar')).add({
	                tabID:id,
	                title:name,
	                panel:Jc().ajax({
	                	url:url
	                })
	            });
	        });
		$('#slides').css('display','none');
        
        $('.split').click(function(){
            var that = $(this);
            if(that.hasClass('split_right')){
                that.removeClass('split_right');
                $('#mainbar').animate({'left':175});
                $('.menubar').animate({'width':165});
                
                $('#slides').css('display','none');
                $('#menus').css('display','block');
            }else{
                that.addClass('split_right');
                $('.menubar').animate({'width':40});
                $('#mainbar').animate({'left':50});
                
                $('#menus').css('display','none');
                $('#slides').css('display','block');
            }
        });


CSS:

 

 

.slides{width:41px;}
.slide_title{width:41px;height:40px;font-size:16px;font-weight:normal;background:url(images/layout/split_menu.png) bottom center no-repeat;}
.slide_title .slidetitle{width:41px;height:31px;cursor:pointer;}
.slide_content{width:140px;float:left;background-color:#fff;position:absolute;display:none;z-index:110;}
.slidemenu{width:100%;text-align:right;background:url(images/layout/split_menu.png) bottom center no-repeat;padding-bottom:2px;border:1 px;}
.slidemenu span{float:left;width:130px;height:30px;line-height:30px;font-size:14px;margin-left:25px;}
.slide_title .slidetitle span{margin-left:30px;width:41px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

 

老大写了个完善了,所以我这就废弃了,暂时记录一下,也是一种思路:

 

效果:

        

 

 

wangxiaoming CSDN认证博客专家 架构 Spring Boot Redis
博客是很好的总结和记录工具,如果有问题,来不及回复,关注微信公众号:程序员开发者社区,获取我的联系方式,向我提问,也可以给我发送邮件,联系 1275801617@qq.com
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页
实付 19.89元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值