-
-
Save lideo/4af53ef22657bf29d441 to your computer and use it in GitHub Desktop.
RrwZYP
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Document</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <nav>Navbar</nav> | |
| <div class="container"> | |
| <section id="sidePanel" class="columna1">Sección 1</section> | |
| <section id="mainPanel" class="columna2">Sección 2</section> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min.js"></script> | |
| <script src="scripts.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(){ | |
| var mainPanel = document.getElementById('mainPanel'); | |
| var sidePanel = document.getElementById('sidePanel'); | |
| var hammerPanel = new Hammer(mainPanel); | |
| hammerPanel | |
| .on('swiperight', function(e) { | |
| sidePanel.classList.toggle('open'); | |
| }) | |
| .on('swipeleft', function(e) { | |
| sidePanel.classList.toggle('open'); | |
| }); | |
| }()); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .columna1 { | |
| position: absolute; | |
| width: 250px; | |
| height: 100vh; | |
| -webkit-transition: -webkit-transform 0.3s ease-out; | |
| transition: transform 0.3s ease-out; | |
| z-index: 1; | |
| background-color: red; | |
| color: white; | |
| } | |
| .columna1 { | |
| -webkit-transform: translate(-250px, 0); | |
| transform: translate(-250px, 0); | |
| } | |
| .columna1.open { | |
| -webkit-transform: translate(0, 0); | |
| transform: translate(0,0); | |
| } | |
| .columna2 { | |
| width: 100%; | |
| height: 100vh; | |
| position: absolute; | |
| background-color: green; | |
| color: white; | |
| } | |
| @media (min-width: 600px) { | |
| .container { | |
| display: -webkit-flex; | |
| display: flex; | |
| -webkit-flex-flow: row nowrap; | |
| flex-flow: row nowrap; | |
| } | |
| .columna1 { | |
| -webkit-transform: translate(0, 0); | |
| transform: translate(0, 0); | |
| } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment