HTML5+CSS3点击显示网页侧边栏的效果

2014-04-07 06:20:24 -0400

代码说明

CSS3实现的网页侧边栏效果，点击指定按钮，显示或隐藏侧菜单，CSS3运行于HTML5环境，IE8及以下版本不支持，因此测试时请确认你的浏览器支持HTML5技术，推荐使用火狐或谷歌Chrome浏览器。转自源码爱好者

HTML代码

<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>

代码演示

=

HTML5/CSS3点击显示侧边框

«Newer Older»

Back to home

Subscribe | Register | Login | N