侧边栏 – 有爱前端

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>toggle side-menu with label + checkbox</title> <META NAME="COPYRIGHT"CONTENT="http://codepen.io/Rplus/pen/EVyGyQ"> <style type="text/css"> .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .aside { position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: 80%; background-color: #689cb1; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } #aside-ctrl:checked ~ .aside { -webkit-transform: translateX(0); transform: translateX(0); } .aside-ctrl--label { position: absolute; top: 50%; right: 100%; padding: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: #689cb1; color: #fff; cursor: pointer; } .aside-ctrl--label::before { content: '◁'; } #aside-ctrl:checked ~ .aside .aside-ctrl--label::before { content: '▷'; } .aside-ctrl--reset { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; opacity: 0; visibility: hidden; background-color: #000; -webkit-transition: all .3s; transition: all .3s; } #aside-ctrl:checked ~ .aside-ctrl--reset { visibility: visible; opacity: .5; } .main-content { -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } #aside-ctrl:checked ~ .main-content { -webkit-transform: scale(.9); transform: scale(.9); -webkit-filter: blur(2px); filter: blur(2px); } body { margin: 0; overflow-x: hidden; } </style> </head> <body> <input id="aside-ctrl" type="checkbox" class="sr-only"/> <main class="main-content"> <h2>Lorem ipsum dolor sit amet.</h2> <article> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi nemo repudiandae, dolore molestias, assumenda consequatur consectetur dicta voluptatum magni accusantium at provident distinctio! Repellendus voluptatem reiciendis, optio laborum nemo ab!</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo eum officia assumenda, fuga alias quo hic magnam beatae inventore sed sit saepe eligendi aliquid doloribus, quam corporis iusto asperiores repellendus magni soluta maiores ipsum iste! Cupiditate nostrum fugit in laborum esse, accusamus repudiandae, quod optio saepe animi odit soluta nam.</p> </article> </main> <label for="aside-ctrl" class="aside-ctrl--reset"></label> <aside class="aside"> <label for="aside-ctrl" class="aside-ctrl--label"></label> </aside> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 侧边栏