菜单列表
<ul class="nav nav-list" style="top: 0px;">
<li class="active open">
<a href="/">
<i class="menu-icon fa fa-tachometer"></i>
<span class="menu-text"> 首页 </span>
</a>
<b class="arrow"></b>
</li>
<li class="" url="/test1">
<a href="javascript:void(0);" class="dropdown-toggle">
<i class="menu-icon fa"></i>
<span class="menu-text"> test1 </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu nav-hide" style="display: none;">
<li class="" url="test1-1">
<a href="javascript:void(0);">
<i class="menu-icon fa fa-caret-right"></i>
test1-1
</a>
<b class="arrow"></b>
</li>
<li class="" url="test1-2">
<a href="javascript:void(0);">
<i class="menu-icon fa fa-caret-right"></i>
test1-2
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
<li class="" url="/test1">
<a href="javascript:void(0);" class="dropdown-toggle">
<i class="menu-icon fa"></i>
<span class="menu-text"> test1 </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu nav-hide" style="display: none;">
<li class="" url="test2-1">
<a href="javascript:void(0);">
<i class="menu-icon fa fa-caret-right"></i>
test1-1
</a>
<b class="arrow"></b>
</li>
<li class="" url="test2-2">
<a href="javascript:void(0);">
<i class="menu-icon fa fa-caret-right"></i>
test2-2
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
</ul>
菜单列表对应的js
<script src="assets/js/jquery-2.1.4.min.js></script>
<script>
$(function () {
$('.nav ul > li').click(function () {
var self = $(this);
var url = self.attr("url");
$('#iframeMain').attr('src', url);
self.siblings().removeClass('active');
self.addClass('active');
var parent = $(this).parent().parent();
parent.siblings().removeClass('active open');
parent.addClass('active open');
parent.siblings().children('ul').attr('style', 'display:none;');
parent.siblings().children('ul').children('li').attr('class', '');
});
})
</script>
iframe框
<iframe name="iframeMain" id="iframeMain" src="/main" scrolling="no" frameborder="0" width="100%" height="100%">
该浏览器不支持iframe,请使用其他浏览器!
</iframe>
<!--iframe框自适应js-->
<script type="text/javascript">
function changeFrameHeight(){
var ifm= document.getElementById("iframeMain");
ifm.height=document.documentElement.clientHeight;
}
window.onresize=function(){
changeFrameHeight();
}
</script>
在laravel框架中,声明一个首页controller和view,ifarme放在首页view中,其他controller和view正常对应,通过首页iframe调用其他页面来实现管理后台的iframe嵌套功能。