效果图



代码部分

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>综合信息</title>

<style>

html,body {

	width: 100%;

	height: 100%;

	font-family: "Microsoft Yahei", "SimSun", Arial;

	font-size:12px;

	overflow:hidden;

}

body,h3,ul,li {

	margin: 0;

	padding: 0;

}

h3,th{

	font-weight:normal;

}

.ul,ul li {

	list-style-type: none;

}

a{

	text-decoration: none;

}

.header {

	width: 100%;

	height: 50px;

	position: absolute;

	top: 0;

	/*以上设置是重点必须的*/

	line-height: 50px;

}

.header h3 {

	margin-left: 12px;

	color: #0075C7;

}

.mainBox {

	width: 100%;

	position: absolute;

	top: 50px;

	bottom: 0;

	/*以上设置是重点必须的*/

}

.mainBox .leftBox {

	height: 100%;

	width: 240px;

	float: left;

	overflow: auto;

	/*以上设置是重点必须的*/

	background: #f8f8ee;

	font-size: 12px;

	font-family: "Microsoft Yahei", "SimSun", Arial;

	border-right: 1px solid #D9D9D9;

	border-top: 1px solid #D9D9D9;

}

.menuItem a,.menuItem a:visited {

	padding-left: 20px;

	width: 220px;

	height: 32px;

	background-color: #f8f8f8;

	border-bottom: solid 1px #EAEAEA;

	border-top: solid 1px #FFFFFF;

	display: block;

	line-height: 32px;

	color: #000000;

}

.menuItem a:hover,.menuItem a:active {

	background: #f2f2f2;

	color: #0075c7;

}

.menuItem img {

	width: 18px;

	height: 18px;

	vertical-align: middle;

	margin-right: 10px;

}

.mainBox .rightBox {

	height: 100%;

	margin-left: 241px;

	/*以上设置是重点必须的*/

	padding-right: 1px;

	padding-left: 1px;

	border-left: 1px solid #E6E6E6;

	border-top: 1px solid #D9D9D9;

	overflow: auto;

}

.slideBtn {

	cursor: pointer;

	width: 1em;

	position: absolute;

	top: 40%;

	left: 1;

	display: block;

}

</style>

<script type="text/javascript"

	src="jquery.js"></script>

</head>

<body>

	<div class="header">

		<h3>

			综合信息

		</h3>

	</div>

	<div class="mainBox">

		<div class="leftBox">

			<div class="menuItem zzjg">

				<a href="zhxx.jsp?type=zzjg">组织机构</a>

			</div>

			<div class="menuItem ygfc">

				<a href="zhxx.jsp?type=ygfc">员工风采</a>

			</div>

			<div class="menuItem wghf">

				<a href="zhxx.jsp?type=wghf">网格划分</a>

			</div>

			<div class="menuItem xxyd">

				<a href="zhxx.jsp?type=xxyd">学习园地</a>

			</div>

			<div class="menuItem tzgg">

				<a href="zhxx.jsp?type=tzgg">通知公告</a>

			</div>

			<div class="menuItem xwzx">

				<a href="http://www.gz121.gov.cn/gqqx/hzq/zwgk_99/qxxw_104/"

					target="_blank">新闻资讯</a>

			</div>

		</div>

		<div class="rightBox">

			<div class="slideBtn">伸缩</div>

		</div>

	</div>

	<script type="text/javascript">

		//左侧菜单栏伸缩效果

		$('.slideBtn').click(

			function() {

				$('.leftBox').toggle();

				var status = $('.leftBox').css("display");

				if (status == 'none') {

					$('.rightBox').css("marginLeft", "0");

					$(this).css("background",

							"red");

				} else {

					$('.rightBox').css("marginLeft", "241px");

					$(this).css("background",

							"green");

				}

			});

	</script>

</body>

</html>

HTML实用案例（1）—— 左侧菜单，右侧内容的布局（带左侧菜单点击隐藏显示效果）的更多相关文章

  1. C# WPF 左侧菜单右侧内容布局效果实现

    原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...

  2. HTMLCSS实现左侧固定宽度右侧内容可滚动

    在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...

  3. HTML和CSS实现左侧固定宽度右侧内容可滚动

    在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...

  4. 左侧菜单栏右侧内容（改进，有js效果）

    (如有错敬请指点,以下是我工作中遇到并且解决的问题)上一篇文章是简洁版 这是上一篇文章的改进. 上一篇文章的左侧菜单是没有子目录的. 这是效果图: 左侧菜单代码: <div class=&quo ...

  5. 左侧栏与右侧内容之锚点、offsetHeight、scrollTop()

    常用功能 1.点击左侧,右侧相关内容随时点到. 2.滚动右侧信息,左侧标题随之显示背景. 第一点很简单,只要在左侧栏  <li><a  href="#aaa"&g ...

  6. ionic js 侧栏菜单 把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换

    ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示: 用法 要使用侧栏菜单,添加一个父元素<ion ...

  7. 左侧点击后右侧添加tab标签栏以及内容

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. vue项目 菜单侧边栏随着右侧内容盒子的高度实时变化

    测试的时候发现,在选择模板.选择产品第二步第三步的时候.如果超出两行的话会盖住看不见,(因为高度所有统一都被写死了,又加了overflow~emmm~)所以要改成走马灯形式.如图: 那么问题来了,我步 ...

  9. Android菜单项内容大全

    一.介绍: 菜单是许多应用中常见的用户界面组件. Android3.0版本以前,Android设备会提供一个专用"菜单"按钮呈现常用的一些用户操作, Android3.0版本以后, ...

随机推荐

  1. 剑指offer 面试24题

    面试24题: 题目:反转链表 题:输入一个链表,反转链表并输出反转后链表的头节点. 解题思路:注意反转时出现断裂现象,定义3个指针,分别指向当前遍历到的节点pNode.它的前一个节点pPrev及后一个 ...

  2. jmeter 测试restful接口

    jmeter 测试restful接口,JSON数据格式 1.添加线程组 2.添加HTTP信息头管理器 请求发送JSON数据格式参数,需要设置Content-Type为application/json ...

  3. iOS学习之库

    一.什么是库 库是程序代码的集合,是共享程序代码的一种方式. 二.库的分类 根据源代码的公开情况,库可以分为2种类型. 1.开源库 公开源代码,能看到具体实现. 比如,SDWebImage.AFNet ...

  4. Python框架之Tornado(概述)

    本系列博文计划: 1.剖析基于Python的Web框架Tornado的源码,为何要阅读源码? Tornado 由前 google 员工开发,代码非常精练,实现也很轻巧,加上清晰的注释和丰富的 demo ...

  5. $Java-json系列（二）：用JSONObject解析和处理json数据

    本文中主要介绍JSONObject处理json数据时候的一些常用场景和方法. (一)jar包下载 所需jar包打包下载百度网盘地址:https://pan.baidu.com/s/1c27Uyre ( ...

  6. Windows下MarialDB使用

    命令行控制启动和关闭:mysqld --console     #这样启动ctrl+c即为关闭 启动:双击mysqld.exe即可   #此为后台启动 关闭:mysqladmin -uroot -pr ...

  7. Win32 API编程：WinMain无法重载函数或_tWinMain无法重载

    #include "windows.h" #include "tchar.h" int APIENTRY _tWinMain( HINSTANCE hInsta ...

  8. iOS_触摸事件与手势识别

    目  录: 一.触摸事件 1.1iOS的输入事件 1.2 触摸事件的处理 1.3 UITouch类中包含五个属性 1.4 UITouch类中包含两个成员函数 1.5响应者链 二.手势识别 2.1使用手 ...

  9. Android 开发人员必须掌握的 10 个开发工具

    Android 开发人员必须掌握的 10 个开发工具 Android SDK 本身包含很多帮助开发人员设计.开发.测试和发布 Android 应用的工具,在本文中,我们将讨论 10 个最常用的工具. ...

  10. SQL题

    1.取出sql表中第31到40的记录(以自动增长ID为主键) sql server方案: select top 10 * from t where id not in (select top 30 i ...