|
|
| Line 1: |
Line 1: |
| − | <!doctype html> | + | <html> |
| − | <html lang="en" class="fullHeight"> | + | <body> |
| − | <head> | + | <style> |
| − | <meta charset="UTF-8">
| + | .top { |
| − | <title>demo</title>
| + | position: absolute; |
| − | <link rel="stylesheet" type="text/css" href="sidebar.css">
| + | left: 0; right: 0; |
| − | </head>
| + | height: 72px; |
| − | <body class="fullHeight">
| + | } |
| | + | .sidebar { |
| | + | position: absolute; |
| | + | left: 0; top: 72px; bottom: 0; |
| | + | width: 178px; |
| | + | } |
| | + | .content { |
| | + | position: absolute; |
| | + | left:178px; top: 72px; right: 0; bottom: 0; |
| | + | } |
| | + | #sideToggle { |
| | + | display: none; |
| | + | } |
| | + | .sidebar { |
| | + | display: none; |
| | + | } |
| | + | .content { |
| | + | position: absolute; |
| | + | left:0; top: 72px; right: 0; bottom: 0; |
| | + | } |
| | + | #sideToggle:checked + .sidebar{display: block} |
| | + | #sideToggle:checked ~ .content{left: 178px} |
| | + | |
| | + | |
| | + | |
| | | | |
| | | | |
| | | | |
| − | <style>
| |
| − | .move_right {
| |
| − | -webkit-animation-name : move_right;
| |
| − | animation-name : move_right;
| |
| − | -webkit-animation-duration : 1s;
| |
| − | animation-duration : 1s;
| |
| − | -webkit-animation-iteration-count : 1;
| |
| − | animation-iteration-count : 1;
| |
| − | -webkit-animation-fill-mode : forwards;
| |
| − | animation-fill-mode : forwards;
| |
| − | }
| |
| − | .move_left {
| |
| − | -webkit-animation-name : move_left;
| |
| − | animation-name : move_left;
| |
| − | -webkit-animation-duration : 1s;
| |
| − | animation-duration : 1s;
| |
| − | -webkit-animation-iteration-count : 1;
| |
| − | animation-iteration-count : 1;
| |
| − | -webkit-animation-fill-mode : forwards;
| |
| − | animation-fill-mode : forwards;
| |
| − | }
| |
| − | .move_up {
| |
| − | -webkit-animation-name : move_up;
| |
| − | animation-name : move_up;
| |
| − | -webkit-animation-duration : 1s;
| |
| − | animation-duration : 1s;
| |
| − | -webkit-animation-iteration-count : 1;
| |
| − | animation-iteration-count : 1;
| |
| − | -webkit-animation-fill-mode : forwards;
| |
| − | animation-fill-mode : forwards;
| |
| − | }
| |
| − | .fadeIn {
| |
| − | -webkit-transform : translateX(120px);
| |
| − | transform : translateX(120px);
| |
| − | opacity: 1;
| |
| − | }
| |
| − | .fadeInUp {
| |
| − | -webkit-transform : translateY(-250px);
| |
| − | transform : translateY(-250px);
| |
| − | opacity: 1;
| |
| − | -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;
| |
| − | transition :transform .2s ease-out, opacity .2s ease-out;
| |
| − | }
| |
| − | .fadeOutLeft {
| |
| − | -webkit-transform : translateX(-120px);
| |
| − | transform : translateX(-120px);
| |
| − | opacity: 0.0;
| |
| − | -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;
| |
| − | transition :transform .2s ease-out, opacity .2s ease-out;
| |
| − | }
| |
| | </style> | | </style> |
| | | | |
| | | | |
| | | | |
| − | <div class='sidebar fullHeight'>sidebar</div> | + | <div class="top"> |
| − | <div class="controller"> | + | <label id="sideBarControl" for="sideToggle">显示/隐藏菜单</label> |
| − | <div> | + | </div> |
| − | <button onclick="fadeIn()">淡进</button> | + | <input type="checkbox" id="sideToggle"> |
| − | <button onclick="fadeOut()">淡出</button> | + | <div class="sidebar"> |
| − | </div> | + | <p>菜单内容</p> |
| − | <div> | + | <ul class="nav"> |
| − | <button onclick="fadeInUp()">向上淡进</button> | + | <li><a id="_1" href="#">Menu1</a> </li> |
| − | <button onclick="fadeOutLeft()">向左淡出</button> | + | <li><a id="_2" href="#">Menu2</a> </li> |
| − | </div> | + | <li><a id="_3" href="#">Menu3</a> </li> |
| − | </div> | + | </ul> |
| − | <script src="sidebarEffects.js"></script> | + | </div> |
| − | <script>
| + | |
| − | var sidebarEl = document.querySelector(".sidebar");
| + | |
| − | function fadeIn (e) {
| + | <div class="content"> |
| − | sidebarEl.className = 'sidebar fullHeight';
| + | </div> |
| − | sidebarEl.style.top = '0px';
| + | |
| − | sidebarEl.style.left = '0px';
| + | |
| − | sidebarEl.classList.add('move_right');
| + | |
| − | }
| + | |
| − | function fadeOut (e) {
| + | |
| − | sidebarEl.className = 'sidebar fullHeight';
| + | |
| − | sidebarEl.style.left = '120px';
| + | |
| − | sidebarEl.classList.add('move_left');
| + | |
| − | }
| + | |
| − | function fadeInUp(e) {
| + | |
| − | sidebarEl.className = 'sidebar fullHeight';
| + | |
| − | sidebarEl.style.top = '250px';
| + | |
| − | sidebarEl.style.left = '120px';
| + | |
| − | sidebarEl.classList.add('move_up');
| + | |
| − | }
| + | |
| − | function fadeOutLeft(e) {
| + | |
| − | sidebarEl.className = 'sidebar fullHeight';
| + | |
| − | sidebarEl.style.top = '0px';
| + | |
| − | sidebarEl.style.left = '120px';
| + | |
| − | sidebarEl.classList.add('move_left');
| + | |
| − | }
| + | |
| − | </script>
| + | |
| | | | |
| − | </body> | + | </body> |
| | </html> | | </html> |
