效果图



代码部分

<!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. vue+django前后端分析解决csrf token问题

    vue-resource post数据 参考:https://www.cnblogs.com/linxizhifeng/p/8995077.html 阅读django CsrfViewMiddlewa ...

  2. 剑指offer 面试60题

    面试60题 题目:把n个骰子扔在地上,所有骰子朝上一面的点数之和为s.输入n,打印出s的所有可能的值出现的概率. 解决代码:

  3. c# 执行批处理文件

    ProcessStartInfo proc = new ProcessStartInfo(); proc.UseShellExecute = false; proc.CreateNoWindow = ...

  4. centos7+cobbler安装

    cobbler工作流程 1.安装软件包: yum -y install httpd dhcp tftp python-ctypes cobbler xinetd cobbler-web pykicks ...

  5. $用python玩点有趣的数据分析——一元线性回归分析实例

    Refer:http://python.jobbole.com/81215/ 本文参考了博乐在线的这篇文章,在其基础上加了一些自己的理解.其原文是一篇英文的博客,讲的通俗易懂. 本文通过一个简单的例子 ...

  6. 对”唯一键可以包含NULL值，并且每个NULL值都是唯一的（即NULL！=NULL）“理解

    因为最近在写一篇关于字符串模糊检索的论文,开始比较细致的研究数据库(MySQL)中的index问题,变到图书馆借了本<Effective MySQL之SQL语句最优化>(Ronald Br ...

  7. oracle 定时删除3天前的备份数据

    不需要保留那么多,按公司要求只需要保留一个星期的即可. 1.那么有什么方法自动删除7天以前备份的*.log文件呢? 2.服务器过多,不可能一一手动创建,有没有自动完成这个创建计划任务的批处理呢? 首先 ...

  8. linux下安装mysql遇到的一些问题

    安装命令: groupadd mysql useradd -r -g mysql -s /bin/false mysql cd /usr/local tar zxvf /path/to/mysql-V ...

  9. Win32 API编程：CHAR TCHAR WCHAR的区别

    #ifdef   UNICODE               typedef   wchar_t   TCHAR;     #else               typedef   unsigned ...

  10. Windows批量添加和删除IP

    随着天气变冷了,好多小伙伴都开始变懒了,都想用最快的方式完成任务 下面给大家介绍一下Windows批量添加和删除IP的办法 (1)批量添加IP 直接在CMD下边运行下边命令. for /l %i in ...