jquery实现树形二级导航菜单 iframe链接页面

最新推荐文章于 2022-06-01 21:09:26 发布

原创最新推荐文章于 2022-06-01 21:09:26 发布 · 985 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery iframe

JQuery 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何利用jQuery实现一个二级树形导航菜单，并结合iframe来展示不同页面内容。通过提供的代码示例，读者可以了解具体实现步骤和效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>