<!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. 使用Spring表达式语言进行装备--SpEL

    本文主要想记录最近的两个使用spring框架实现通过配置文件装备Bean,以及使用SpEL装备Bean. 1.使用配置文件装备Bean: 当我们写某些Bean的时候是希望这个Bean当中的属性是可以通 ...

  2. Python——设计模式——单例模式

    一个类始终只有一个实例 当你第一次实例化这个类的时候,就创建一个实例化得对象 当你之后再来实例化的时候,就用之前创建的对象 class A: __instance = False def __ini_ ...

  3. Python——Django-模板

    一.模板的种类 1.变量 {{变量名}} 2.语句类{% %} 2.1 {%for i in booklist%} {{i}} {%endfor%} 2.2 {%if 10>5%} {%else ...

  4. [WC2018]通道——边分治+虚树+树形DP

    题目链接: [WC2018]通道 题目大意:给出三棵n个节点结构不同的树,边有边权,要求找出一个点对(a,b)使三棵树上这两点的路径权值和最大,一条路径权值为路径上所有边的边权和. 我们按照部分分逐个 ...

  5. 协方差（Covariance）

    统计学上用方差和标准差来度量数据的离散程度 ,但是方差和标准差是用来描述一维数据的(或者说是多维数据的一个维度),现实生活中我们常常会碰到多维数据,因此人们发明了协方差(covariance),用来度 ...

  6. Django_RBAC_demo2 升级版权限控制组件

    RBAC 升级版 预期要求 前端在无权限时不在提供操作标签 更改部分硬编码 实现更加精准的权限控制 未改动前的版本 在这里 ⬇ Django_rbac_demo 权限控制组件框架模型 具体更改 数据库 ...

  7. Scrapy 框架 中间件，信号，定制命令

    中间件 下载器中间件 写中间件 from scrapy.http import HtmlResponse from scrapy.http import Request class Md1(objec ...

  8. mongoDB 文档概念

    mongoDB 文档概念 什么是文档 文档是 mongodb 基本的数据组织单元,类似于mysql 中的记录 文档由多个键值对组成,每个键值对表达一个数据项 属于 bson 数据 ps:  bson ...

  9. 洛谷 P3327 【[SDOI2015]约数个数和】

    前置芝士 关于这个题,你必须知道一个这样奇奇怪怪的式子啊QAQ \[d(i*j)= \sum_{x|i} \sum_{y|j}[gcd(x,y)=1] \] 留坑,先感性理解:后面那个gcd是为了去重 ...

  10. luoguP4841 城市规划

    题意: 求n个点的无相连通图的个数.有编号 思路一: 黏博客 至于为什么除以k!:(没有博客中说的那么简单) 实际上, 对于一个n的用k个自然数的拆分,每一个拆分的贡献是: $\frac{n!*\Pi ...