divcss 如何实现左右分栏，左侧菜单能展开隐藏

html-css055

divcss 如何实现左右分栏，左侧菜单能展开隐藏,第1张

兄弟,div实现不了100%高度,最多只能自适应高度.你还是在iframe上定高度吧

=============================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>左右分栏</title>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<meta content="MSHTML 6.00.2900.2180" name="GENERATOR">

<script language="JavaScript">

//左右

function switchSysBarl(){

var imgsrc

imgsrc=document.all("makeleft").src

document.all("makeleft").src="img/menu_open.gif"

document.all("makeleft").title="显示左边的菜单"

parent.document.all("bbs_left").style.display="none"

}

else{

document.all("makeleft").src="img/menu_close.gif"

document.all("makeleft").title="隐藏左边的菜单"

parent.document.all("bbs_left").style.display=""

}

}

</script>

<link rel="shortcut icon" href="favicon.ico">

</head>

<body bottommargin="0" leftmargin="0" topmargin="0" scroll="no" rightmargin="0">

<div style="z-index: 2visibility: inheritwidth: autoheight: autofloat: left"

frameborder="0" scrolling="no" target="main">

<iframe name="bbs_left" style="z-index: 2visibility: inheritwidth: 180pxheight: 100%"

src="left.htm" frameborder="0" scrolling="no" target="main"></iframe>

</div>

<div style="background-color: #005fbdwidth: 10pxfloat: leftheight: 800pxcursor: hand

padding: 300px 0px 0px 0px" id="menuSwitch" onclick="switchSysBarl()">

<img src="img/menu_close.gif" name="makeleft" width="10" height="10" border="0" id="makeleft" /></div>

<div style="float: leftwidth: auto">

<iframe name="bbs_main" style="z-index: 1visibility: inheritwidth: 100%height: 100%" src="right.htm"

frameborder="0" scrolling="yes"></iframe>

</div>

</body>

</html>

分享一个常见于管理后台的左侧菜单栏折叠展开的效果，基于jquery，效果图如下：

一：页面结构：

二：页面样式css，放在head标签里

三：引入jquery文件

四：给一级菜单绑定点击事件，点击时展开下面的子菜单

五：给二级菜单绑定事件，点击时加入选中的深色背景

六：阻止二级菜单点击发生冒泡，当点击二级菜单的时候，一级菜单的事件也会发生，此时二级菜单会被收起，因此需要阻止事件冒泡

原文作者技术博客： https://www.jianshu.com/u/ac4daaeecdfe

95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。

欢迎留言交流

看你发了两次，我决定回答两次多赚点分~~嘿嘿！

你这个框架网页实际包含三个网页不是。在nain文件里frame标签下有有name="",记住引号里的东西。在left文件的链接标签上加上target="",引号里是你要右边框架的name。

如下：<a href="" target="mainFrame">

好像在main文件的frame标签下加上target="mainFrame" 也能实现这个效果，但是我昨天没试成功，令我很郁闷。网页有几种打开方式：1.在原来窗口中打开_self，2.在新窗口中打开_blank，3.在父窗口中打开_parent.自己试着玩吧，在dw中的设置是链接下的目标选择。