<!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. centos7之zabbix3.2的fping监控

    zabbix通过fping检测主机网络状态 fping的官方网站:http://www.fping.org/ 官网指定的github的地址:https://github.com/schweikert/ ...

  2. git 学习(2) ----- 分支

    当我们进行程序开发的过程中,有时会产生一个新的想法,然后就想马上试验,那我们怎么办? 如果我们继续在现有的基础上进行开发,但最后想法不成功,我们还要进行版本回退?如果我们的新想法,需要很长时间才能实现 ...

  3. Qt中实现将float类型转换为QString类型

    在使用Qt Creator编程时,难免会用到将float类型转换为QString类型的时候下面是我所有的方法: 1. 将QString类型转化为float类型,很简单 QString data; fl ...

  4. [十二省联考2019]异或粽子——可持久化trie树+堆

    题目链接: [十二省联考2019]异或粽子 求前$k$大异或区间,可以发现$k$比较小,我们考虑找出每个区间. 为了快速得到一个区间的异或和,将原序列做前缀异或和. 对于每个点作为右端点时,我们维护出 ...

  5. LOJ #2533. 「CTSC2018」暴力写挂（边分治合并）

    题意 给你两个有 \(n\) 个点的树 \(T, T'\) ,求一对点对 \((x, y)\) 使得 \[ depth(x) + depth(y) - (depth(LCA(x , y)) + dep ...

  6. H5与APP混合开发相关知识点总结

    整理一: 现在有这么个需求,如下图 app端点击右上角的 加 号 ,弹出模态框 这个项目是基于vue写的,客户端需要调用H5页面里定义的js方法,但是在vue里,所有的方法都是在组件内部声明的,也只能 ...

  7. Vue+koa2开发一款全栈小程序(7.图书录入功能）

    1.图书录入功能 1.获取图书信息 1.在mydemo/src/until.js中封装工具函数post和get // 工具函数 import config from './config' // htt ...

  8. 【NOIP2013模拟】终极武器（经典分析+二分区间）

    No.2. [NOIP2013模拟]终极武器 题意: 给定你一些区间,然后让你找出\(1\sim 9\)中的等价类数字. 也就是说在任何一个区间里的任何一个数,把其中后\(k\)位中的某一位换成等价类 ...

  9. ComboBox下拉列表框

    属性:DropDownStyle(下拉.可编辑等).Items(条目) 事件:SelectedIndexChanged选择项改变触发 Items内容:总经理.副总经理.财务部 DropDownStyl ...

  10. CMDB服务器管理系统【s5day89】:深入理解Java的接口和抽象类

    对于面向对象编程来说,抽象是它的一大特征之一.在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类.这两者有太多相似的地方,又有太多不同的地方.很多人在初学的时候会以为它们可以随意互换使用, ...