效果图



代码部分

<!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. 【读书笔记】Java核心技术-基础知识-反射

    在网页中运行Java程序称为applet. 反射 这项功能被大量地应用于JavaBeans中,它是Java组件的体系结构. 能够分析类能力的程序称为反射(reflective).反射机制的功能及其强大 ...

  2. SQL模糊查找

    编辑器加载中... /*********************实现模糊查找**************************/ SELECT [UserId] ,[UserName] ,[User ...

  3. iOS 11系列 - Xcode 9新特性

    Xcode 9最近刚刚发布,带来了一系列不错的新特性,可以更好的帮助到开发者完成开发工作. Xcode Runtime Tool Xcode 9中有许多Runtime Tool可以帮助开发者找到代码错 ...

  4. 大道至简（第五i章）读后感

    大道至简(第五章)读后感 再一次在不想看的情况下读大道至简第五章,一个项目的实现中,“过程”与“工程”是同一个概念吗?答案自然是否定的.“过程”是一个确定的模板,而“工程”是有一个目的的实现在里面. ...

  5. 用js来实现那些数据结构 第一章

    在开始正式的内容之前,不得不说说js中的数据类型和数据结构,以及一些比较容易让人混淆的概念.那么为什么要从数组说起?数组在js中是最常见的内存数据结构,数组数据结构在js中拥有很多的方法,很多初学者记 ...

  6. arcgis flex aqi 3大util

    第一:webMapUtil 主要用来根据id或者json创建map,跟webmap相关 第二:GeometryUtil 主要用来计算面积,长度,还有判断是否相交等,跟geometry相关. 第三:We ...

  7. GP DBA基本操作

    1.查看队列情况 SELECT * FROM gp_toolkit.gp_resqueue_status; 如果出现了资源占用大于1.1 e+11SQL,则可能存在不合理执行计划的SQL, 基本跑不出 ...

  8. 【HackerRank】 The Full Counting Sort

    In this challenge you need to print the data that accompanies each integer in a list. In addition, i ...

  9. C语言：内存字节对齐详解

    转:http://blog.csdn.net/arethe/article/details/2548867 一.什么是对齐,以及为什么要对齐: 1. 现代计算机中内存空间都是按照byte划分的,从理论 ...

  10. SQL性能调优策略

    1.建立索引 2.避免全表扫描 避免使用is null, is not null,这样写会放弃该字段的索引. 如果会出现这种情况,尽量在设计表的时候设置默认值 比较操作符中!= <>等避免 ...