<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CSS3点击显示</title>

<style>

*{ margin:0; padding:0; }

html{ height:100%; }

p{ padding:10px 0; }

body{ min-height:100%; font-family:arial; position:relative; }

body.sideMenu{ margin:0; -webkit-transform:none; transform:none; }

#sideToggle{ display:none; }

#sideToggle:checked + aside{ left:0; }

#sideToggle:checked ~ #wrap{ padding-left:220px; }

body > aside{ position:absolute; top:0; bottom:0; left:-200px; width:200px; background:#f1103a; transition:0.2s ease-out; -webkit-transition:0.2s ease-out; }

body > aside > h2{ color:#FFF; text-align:center; font-weight:normal; padding:10px; }

#wrap{ margin-left:20px; padding:10px; transition:0.25s ease-out; -webkit-transition:0.25s ease-out; }

  #wrap > label{ display:inline-block; }

    #wrap > label{

      background:#f1103a;

      border-radius:50px;

      color: #FFF;

      cursor: pointer;

      display: block;

      font-family: Courier New;

      font-size: 25px;

      font-weight: bold;

      width: 30px;

      height: 30px;

      line-height: 35px;

      text-align: center;

      text-shadow: 0 -4px;

    }

    #wrap > label:hover{ background:#000; }

</style>

</head>

<body>

<input type='checkbox' id='sideToggle'>

<aside><h2>Side Menu</h2></aside>

<div id='wrap'>

     <label id='sideMenuControl' for='sideToggle'>=</label>

    <p>HTML5/CSS3点击显示侧边框   </p>

  </div>

</body>

</html>

效果：

转载：http://www.xszzz.com/2013/07/96.html

HTML5+CSS3点击指定按钮显示某些内容效果的更多相关文章

  1. 安卓TextView限定行数最大值，点击按钮显示所有内容

    问题展示 如上图所示,在普通的TextView中,要求: 最多显示3行 超过三行显示展开按钮 且点击展开按钮显示完整内容 这个需求看似简单,但解决起来会遇到两个较为棘手的问题:1,如何判断是否填满了前 ...

  2. 原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏

    <!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...

  3. js点击更多显示更多内容效果

    我写了一个简单的分段显示插件,用法很简单:1,把你要分面显示的内容的容器元素增加一个class=showMoreNChildren,并增加一个自定义属性pagesize="8" 这 ...

  4. HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  5. HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相冊

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  6. 使用HTML5+CSS3制作圆角内发光按钮----示例

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. 点击edittext并显示其内容

    package com.example.sum;//sum import com.example.sum.R;//sum import android.app.Activity; import and ...

  8. 点击当前选项显示当前内容jquery

    <script language="javascript"> $(document).ready(function(){ $(".moren a") ...

  9. html5+css3比较好的学习教程和demo效果

    1.css3 Animate.css 动画库--- http://daneden.github.io/animate.css/ 2.font-awesome 完美的图标字体,只为Bootstrap设计 ...

随机推荐

  1. MySQL 中触发器的应用

    在一个教育系统里面,有 科目表 ,章节表(每一科目对应若干大章节),小节表(每一大章节下面有若干小节),习题表(每一小节对应若干习题), 在后台管理系统中 有这样几个功能要实现,在 科目列表页面中  ...

  2. jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)

    一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...

  3. ☆ [洛谷P2633] Count on a tree 「树上主席树」

    题目类型:主席树+\(LCA\) 传送门:>Here< 题意:给出一棵树.每个节点有点权.问某一条路径上排名第\(K\)小的点权是多少 解题思路 类似区间第\(K\)小,但放在了树上. 考 ...

  4. [FJOI2016]建筑师

    题目描述 小 Z 是一个很有名的建筑师,有一天他接到了一个很奇怪的任务:在数轴上建 n 个建筑,每个建筑的高度是 1 到 n 之间的一个整数. 小 Z 有很严重的强迫症,他不喜欢有两个建筑的高度相同. ...

  5. “HtmlAgilityPack”已拥有为“System.Net.Http”定义的依赖项的解决方案

    #事故现场 在vs2013上用nuget安装 HtmlAgilityPack -Version 1.8.9时,报错如下: Install-Package : “HtmlAgilityPack”已拥有为 ...

  6. 深入学习CSS外边距margin（重叠效果，margin传递效果，margin:auto实现块级元素水平垂直居中效果）

    前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪 ...

  7. IScroll某些手机下不触发ScrollEnd问题处理

    同样是微信7.0,看起来内核都是x5内核,两款不同的手机,一个有问题,一个没有问题. IScroll在问题手机下会出现快速拨动时候不触发ScrollEnd事件现象,轻点一次才会触发,解决办法 docu ...

  8. ntp 服务：Server dropped: Strata too high

    1.通过ntpdate -d 服务端IP,显示Server dropped: Strata too high vi /etc/ntp.conf 在ntpd服务端的配置中添加 server 127.12 ...

  9. 后台挂载/卸载程序[Linux/Windows]

    后台挂载应用程序 即使关闭掉控制台窗口,该程序的进程也将会一直运行下去 #Windows 1.编写bat命令文件[形如:a.bat] 2.cmd执行:start /b a.bat #Linux noh ...

  10. CCPC-Wannafly Winter Camp Day5 (Div2, onsite) Sorting(线段树)

    题目链接 题意 对序列进行三种操作: 1.区间求和. 2.将区间小于等于$x$的数不改变相对顺序的前提下放到$x$左边,用同样规则将比$x$大的放到右边. 3.将区间大于$x$的数不改变相对顺序的前提 ...