标签：菜单 curr area menu list li 树形 iframe main

1、效果图

2、代码

<style>
		/*common css begin*/
		*{margin:0px;padding:0px;}
		a { color: #666; text-decoration: none; cursor: pointer; }
		a, input { outline: none; }
		ul li{list-style: none;}
		.fl { float: left; }
		.fr { float: right; }
		.clearfix:after{content:"";display:block;clear: both;}
		/*common css end*/
		/*main 开始*/
		#main{margin-top: 15px;}
		#main .main-area {width: 1100px;margin: 0 auto;}
		#main .main-area-content{ background: #fff; border: 1px solid #ddd;padding:0 0 15px 0;height: auto;}
		#main .main-area-content .left-menu{margin: 15px 0 0 0;overflow: hidden;}
		#main .main-area .menu-area{width:180px;border-right: 1px solid #ddd;min-height: 400px;}
		
		#main .main-area .menu-area a{font-size:16px;}
		#main .main-area .menu-area .menu .icon{width:10px;height:10px; border:1px solid #337FE5;display:inline-block;margin-right:10px;transform: rotate(45deg);position: relative;}
		#main .main-area .menu-area .menu .icon .icon_inner{width:5px;height:5px; border:.3px solid #337FE5;display:inline-block;position: absolute; left:2px; top:2px;}
		#main .main-area .menu-area .menu .menu-name{width:150px;padding-left:15px;color: #333;background:url(images/icons/menu_close.png) no-repeat right center;line-height: 40px;display:block;}
		
		#main .main-area .menu-area .menu .menu-list li{line-height: 30px;background:url(images/icons/menu-list_bg.png) no-repeat 40px center;font-size: 12px;padding-left: 50px;margin-bottom:2px;}
		#main .main-area .menu-area .menu .menu-list a{font-size:12px;}
		#main .main-area .menu-area .menu .menu-list li.distance a{display: block;line-height: 30px;height:30px;width:115px;word-break: keep-all; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
		#main .main-area .menu-area .menu .menu-list li a{color:#666;}
		#main .main-area .menu-area .menu .menu-list li:hover{background: #f8fcff url(images/icons/menu-list_bg.png) no-repeat 40px center;}
		#main .main-area .menu-area .menu .menu-list li:hover a{color: #3aace9;display: block;}
		#main .main-area .menu-area .menu .menu-list .curr{background-color:#f8fcff;}
		#main .main-area .menu-area .menu .menu-list .curr a{color: #3aace9;}
		#main .main-area .content-box{width:880px;padding-left: 20px; border-left:1px solid #ddd; margin-left:-1px;}
		/*main 结束*/		
	</style>
	<!--main 开始-->
	<div id="main">
		<div class="main-area">
			<div class="main-area-content clearfix">
				<div class="left-menu fl">
					<ul class="menu-area">
						<li class="menu">
							<a href="javascript:;" class="menu-name"><span class="icon"><span class="icon_inner"></span></span>一级标题</a>
							<ul class="menu-list"> 
								<li class="distance"><a href="链接页面.html" target="mainFrame" title="二级标题">二级标题</a></li>
								<li class="distance"><a href="链接页面.html" target="mainFrame" title="二级标题">二级标题</a></li>
								<li class="distance"><a href="链接页面.html" target="mainFrame" title="二级标题">二级标题</a></li>
							</ul>
						</li>
						<li class="menu">
							<a href="javascript:;" class="menu-name"><span class="icon"><span class="icon_inner"></span></span>一级标题</a>
							<ul class="menu-list" style="display:none;"> 
								<li class="distance"><a href="链接页面.html" target="mainFrame" title="二级标题">二级标题</a></li>
								<li class="distance"><a href="链接页面.html" target="mainFrame" title="二级标题">二级标题</a></li>
							</ul>
						</li>
						<li class="menu">
							<a href="javascript:;" class="menu-name"><span class="icon"><span class="icon_inner"></span></span>一级标题</a>
							<ul class="menu-list" style="display:none;"> 
								<li class="distance"><a href="链接页面.html" target="mainFrame" title="二级标题">二级标题</a></li>
								<li class="distance"><a href="链接页面.html" target="mainFrame" title="二级标题">二级标题</a></li>
							</ul>
						</li>
					</ul>
				</div>
			    <div class="content-box fl">
					<div id="main" style="height:600px;">
					<iframe frameborder="no" name="mainFrame" id="mainFrame" scrolling="auto" src="链接页面.html" width="100%" height="100%">
				       	您的浏览器不支持嵌入式框架，或者当前配置为不显示嵌入式框架。
				    </iframe>
					</div> 
			    </div>
			</div>
		</div>
	</div>
	<!--main 结束--> 
	<script src="js/jquery.min.js"></script>
	<script>
		$(function(){
			//判断有没有子菜单
			$('#main .menu-area .menu').each(function(){
				var len=$(this).find('.menu-list li').length;
				if(len==0){
					$(this).find('a').css('background','none');
				};
			});
			//菜单切换
			$(".header-box .nav-box ul .width li").click(function(){
				$(this).addClass("curr").siblings().removeClass("curr");
			});
			//左侧菜单
			$(".main-area .menu-area .menu-list li").click(function(e){
				e.stopPropagation();
				if($(this).hasClass("curr")){
					$(this).removeClass("curr");
				}else{
					$(".menu-list li").removeClass("curr");
					$(this).addClass("curr");
				};
			});
			//手风琴
			$(".main-area .menu-area > li.menu").click(function(){
				$(this).children("a").toggleClass("curr");
				$(this).siblings(".menu").find("a").removeClass("curr");
				$(this).siblings(".menu").find(".menu-list").hide();
				$(this).find(".menu-list").toggle();
			});
		});
	</script>

标签：菜单,curr,area,menu,list,li,树形,iframe,main
来源： https://blog.csdn.net/fengxue_snow/article/details/98480465

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。