效果图



代码部分

<!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. mysql数据库补充知识6 完整性约束

    一 介绍 约束条件与数据类型的宽度一样,都是可选参数 作用:用于保证数据的完整性和一致性主要分为: PRIMARY KEY (PK) 标识该字段为该表的主键,可以唯一的标识记录 FOREIGN KEY ...

  2. 使用Axure生成网站结构图

    使用Axure设计的各网站(产品)页面,生成网站(产品)结构图.这个对于了解网站整体结构很有帮助. 需要把它生成对应结构的网站结构图. 第一步:在“主页”上面新建一个和“主页”平级的页面,命名为“网站 ...

  3. UI控件之UITableView的基本属性

    UITableView:特殊的滚动视图,横向固定,可以在纵向上滚动,自动计算contentSize 创建tableView,初始化时指定样式,默认是plain UITableView *_tableV ...

  4. Linux Shell基础 Bash常见命令 echo命令

    概述 shell中常见的命令echo. 输出命令:echo echo命令的输出内容如果没有特殊含义,则将原内容输出到屏幕:如果输出内容有特殊含义,则输出打印其含义. 命令格式如下: [root@loc ...

  5. Android相机实时自动对焦的完美实现

    https://zhidao.baidu.com/question/873328177698804372.html Android相机实时自动对焦的完美实现 http://blog.csdn.net/ ...

  6. Python编程-常用模块及方法

    常用模块介绍 一.time模块 在Python中,通常有这几种方式来表示时间: 时间戳(timestamp):通常来说,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量.我们运行 ...

  7. Too many open files 问题

    1.解决办法 (1)查看 查看当前系统打开的文件数量 lsof | wc -l watch "lsof | wc -l" 查看某一进程的打开文件数量 lsof -p pid | w ...

  8. Java中Arrays.sort()和Collections.sort()

    1.简单示例 sort方法的使用非常的简单明了,下面的例子中,先定义一个比较Dog大小的Comparator,然后将其实例对象作为参数传给sort方法,通过此示例,你应该能够快速掌握Arrays.so ...

  9. 在unity 中，使用http请求，下载文件到可读可写路径

    在这里我用了一个线程池,线程池参数接收一个带有object参数的,无返回值的委托 ,下载用到的核心代码,网上拷贝的,他的核心就是发起一个web请求,然后得到请求的响应,读取响应的流 剩下的都是常见的I ...

  10. Windows Server 2008 架设 Web 服务器教程(图文详解)

    Windows Server 2008 架设 Web 服务器教程(图文详解) 一.安装 IIS 7.0 : 虽然 Windows Server 2008 内置了I IS 7.0,但是默认情况下并没有安 ...