<!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之添加开机启动服务/脚本

    一.添加开机启动脚本 #!/bin/bash # THIS FILE IS ADDED FOR COMPATIBILITY PURPOSES # # It is highly advisable to ...

  2. python 装饰器练习题

    1.写出完整的装饰器(不用开了带参装饰器,就是普通装饰器)语法 2.有一个计算两个数和的方法,为其添加一个确保两个参数都是int或float类型的装饰器,保证运算不会抛异常 3.有一个一次性录入人名并 ...

  3. Drag（拖拽）和Move（移动）两个脚本

    Drag using System.Collections; using System.Collections.Generic; using UnityEngine; public class Dra ...

  4. python学习日记（内置、匿名函数练习题）

    用map来处理字符串列表 用map来处理字符串列表,把列表中所有水果都变成juice,比方apple_juice fruits=['apple','orange','mango','watermelo ...

  5. js侧边菜单

    目标 实现一个侧边栏菜单,最多二级,可以收起展开.用于系统左侧的主菜单. 大多数系统都会有这样的菜单,用于导航功能,切换到不同的操作页面.在单页应用系统中,菜单一般是固定在左侧,分组节点上配图标,高亮 ...

  6. React Native——react-navigation的使用

    在 React Native 中,官方已经推荐使用 react-navigation 来实现各个界面的跳转和不同板块的切换. react-navigation 主要包括三个组件: StackNavig ...

  7. springboot2.0整合es的异常总结

    异常: availableProcessors is already set to [4], rejecting [4] 在启动类中加入 System.setProperty("es.set ...

  8. bzoj4671: 异或图——斯特林反演

    [BZOJ4671]异或图 - xjr01 - 博客园 考虑先算一些限制少的情况 gi表示把n个点的图,划分成i个连通块的方案数 连通块之间不连通很好处理(怎么处理看下边),但是内部必须连通,就很难办 ...

  9. DOS批处理：FOR中的Delims和Tokens参数

    在For命令语句的参数F中,最难理解的就是Delims和Tokens两个选项,本文简单的做一个比较和总结. “For /f”常用来解析文本,读取字符串.分工上,delims负责切分字符串,而token ...

  10. matlab中cumsum函数

    matlab中cumsum函数通常用于计算一个数组各行的累加值.在matlab的命令窗口中输入doc cumsum或者help cumsum即可获得该函数的帮助信息. 格式一:B = cumsum(A ...