效果图



代码部分

<!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. shell方式切割tomcat日志

    #!/bin/bash while true do cd /usr/local/tomcat/logs d=`date +%Y%m%d` d15=`date -d'15 day ago' +%Y%m% ...

  2. Kafka Confluent

    今天我们要讲的大数据公司叫作Confluent,这个公司是前LinkedIn员工出来后联合创办的,而创业的基础是一款叫作Apache Kafka的开源软件. Confluen联合创始人Jun Rao即 ...

  3. VC 取消warning

    #pragma warning (disable:4200) 4200是指具体哪个warning

  4. $Android AlertDialog的各种用法总结

    Refer:http://www.2cto.com/kf/201205/131876.html (一)最简单的用法(详见注释) 1 // 1.创建简单的AlertDialog // AlertDial ...

  5. python中完善decorator

    @decorator可以动态实现函数功能的增加,但是,经过@decorator“改造”后的函数,和原函数相比,除了功能多一点外,有没有其它不同的地方? 在没有decorator的情况下,打印函数名: ...

  6. Shell编程之循环控制及状态返回值

    1.break.continue.exit.return的对比 break.continue在条件语句和循环语句中用于控制程序走向: exit用于终止所有语句并退出当前脚本,还可以返回上一次程序或命令 ...

  7. SQL查询语句的执行顺序

  8. Django 详解<二> 之url和view

    Django URL(路由系统) RL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL模式以及要为该URL模式调用的视图函数之间的映射表:你就是以这种方式告诉Django,对 ...

  9. 重置密码解决MySQL for Linux错误 ERROR 1045 (28000)

    重置密码解决MySQL for Linux错误 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passwor ...

  10. R语言笔记001——读取csv格式数据

    读取csv格式数据 数据来源是西南财经大学 司亚卿 老师的课程作业 方法一:read.csv()函数 file.choose() read.csv("C:\\Users\\Administr ...