<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css"> <style> .custom-wrapper { background-color: #ffd390; margin-bottom: 1em; -webkit-font-smoothing: antialiased; height: 2.1em; overflow: hidden; -webkit-transition: height 0.5s; -moz-transition: height 0.5s; -ms-transition: height 0.5s; transition: height 0.5s; } .custom-wrapper.open { height: 14em; } .custom-menu-3 { text-align: right; } .custom-toggle { width: 34px; height: 34px; position: absolute; top: 0; right: 0; display: none; } .custom-toggle .bar { background-color: #777; display: block; width: 20px; height: 2px; border-radius: 100px; position: absolute; top: 18px; right: 7px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; } .custom-toggle .bar:first-child { -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); -ms-transform: translateY(-6px); transform: translateY(-6px); } .custom-toggle.x .bar { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .custom-toggle.x .bar:first-child { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } @media (max-width: 47.999em) { .custom-menu-3 { text-align: left; } .custom-toggle { display: block; } } </style>
<script> (function (window, document) { var menu = document.getElementById('menu'), WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize'; function toggleHorizontal() { [].forEach.call( document.getElementById('menu').querySelectorAll('.custom-can-transform'), function(el){ el.classList.toggle('pure-menu-horizontal'); } ); }; function toggleMenu() { // set timeout so that the panel has a chance to roll up // before the menu switches states if (menu.classList.contains('open')) { setTimeout(toggleHorizontal, 500); } else { toggleHorizontal(); } menu.classList.toggle('open'); document.getElementById('toggle').classList.toggle('x'); }; function closeMenu() { if (menu.classList.contains('open')) { toggleMenu(); } } document.getElementById('toggle').addEventListener('click', function (e) { toggleMenu(); e.preventDefault(); }); window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu); })(this, this.document); </script>