HTML实用案例(1)—— 左侧菜单,右侧内容的布局(带左侧菜单点击隐藏显示效果)
效果图
代码部分
<!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)—— 左侧菜单,右侧内容的布局(带左侧菜单点击隐藏显示效果)的更多相关文章
- C# WPF 左侧菜单右侧内容布局效果实现
原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...
- HTMLCSS实现左侧固定宽度右侧内容可滚动
在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...
- HTML和CSS实现左侧固定宽度右侧内容可滚动
在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...
- 左侧菜单栏右侧内容(改进,有js效果)
(如有错敬请指点,以下是我工作中遇到并且解决的问题)上一篇文章是简洁版 这是上一篇文章的改进. 上一篇文章的左侧菜单是没有子目录的. 这是效果图: 左侧菜单代码: <div class=&quo ...
- 左侧栏与右侧内容之锚点、offsetHeight、scrollTop()
常用功能 1.点击左侧,右侧相关内容随时点到. 2.滚动右侧信息,左侧标题随之显示背景. 第一点很简单,只要在左侧栏 <li><a href="#aaa"&g ...
- ionic js 侧栏菜单 把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换
ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示: 用法 要使用侧栏菜单,添加一个父元素<ion ...
- 左侧点击后右侧添加tab标签栏以及内容
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- vue项目 菜单侧边栏随着右侧内容盒子的高度实时变化
测试的时候发现,在选择模板.选择产品第二步第三步的时候.如果超出两行的话会盖住看不见,(因为高度所有统一都被写死了,又加了overflow~emmm~)所以要改成走马灯形式.如图: 那么问题来了,我步 ...
- Android菜单项内容大全
一.介绍: 菜单是许多应用中常见的用户界面组件. Android3.0版本以前,Android设备会提供一个专用"菜单"按钮呈现常用的一些用户操作, Android3.0版本以后, ...
随机推荐
- 【AWS】订阅AWS论坛的RSS消息获取最新公告
背景:AWS在遇到系统升级.系统故障等问题的时候,会在其官方论坛发布通知,并同步到RSS 前言:我们在项目中遇到几次AWS的RDS出现故障导致系统受影响,当系统故障时,我们的监控系统会发送一堆告警出来 ...
- Python爬虫:获取新浪网新闻
代码 #coding:utf-8 import requests from bs4 import BeautifulSoup res = requests.get("http://news. ...
- vimium的使用介绍和基本用法
vimium是chrome浏览器的一个插件,fq去chrome应用商店搜索vimium,下载安装 纯键盘操作,脱离了鼠标,提高效率 核心是f,安装好vimium后只需要按f,输入对应的编号就能进入相应 ...
- 前端基础之Bootstrap介绍
bootstrap简介 http://v3.bootcss.com/ Bootstrap优点: 下载: Bootstrap引入 <meta name="viewport" ...
- Python基础(14)_python模块之configparser模块、suprocess
9.configparser模块 模块适用于配置文件的格式与windows ini文件类似,可以包含一个或多个节(section),每个节可以有多个参数(键=值). 常见的软件格式文档格式如下: [D ...
- rails generator
generate 查找顺序 rails/generators/initializer/initializer_generator.rb generators/initializer/initializ ...
- Loadrunder脚本篇——Run-time Settings之Browser Enmulation
浏览器模拟 所有Internet Vuser Header包含一个标识将被模拟的浏览器类型(或无线工具包)的User Agent header.例如User-Agent: Mozilla/3.01Go ...
- 01_Hadoop学习笔记内容说明
Hadoop学习笔记内容说明_00 1. 观看云帆大数据梦琪老师的<企业级 Hadoop 1.x 应用开发基础课程>2014年4月左右版本. 2. 博客是在梦琪老师的随堂笔记上改动的, ...
- 在安装mysqli的时候,出现error: ext/mysqlnd/mysql_float_to_double.h: No such file or directory
/application/php5.:: warning: /ext/mysqli/mysqli_api.c::: error: ext/mysqlnd/mysql_float_to_double.h ...
- INSPIRED启示录 读书笔记 - 第14章 产品评审团
制定更及时.更可靠的产品决策 制定决策通常是既耗时又费力的,产品公司需要一套机制让决策者和相关人员及时作出明智的产品决策.成立产品评审团是最好的解决途径 组织产品评审团的难点在于既要为高管制定产品决策 ...