Menu Concept #4

HTML
<div class="menu-wrapper"> <div class="letter m"></div> <div class="letter e"></div> <div class="letter n"></div> <div class="letter u"></div> <div class="hidden-menu"> <ul class="menu"> <li class="item">yes</li> <li class="item">no</li> <li class="item">maybe</li> </ul> </div> </div>
CSS
html { font-size: 14px; } @media screen and (max-width: 480px) { html { font-size: 11px; } } body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100vh; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .menu-wrapper { margin: 0 auto; } .menu-wrapper:not(.open) .letter { cursor: pointer; } .menu-wrapper:not(.open) .letter:hover { border-color: #f00; } .menu-wrapper:not(.open) .letter:hover:after, .menu-wrapper:not(.open) .letter:hover:before { background: #f00; border-color: #f00; } .letter { font-size: 4em; height: 1em; width: 1em; display: inline-block; margin: 0 0.25rem; position: relative; vertical-align: top; opacity: 1; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } .letter:before, .letter:after { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .letter.m { border-left: 2px solid #000; border-right: 2px solid #000; } .letter.m:before { content: ''; width: 2px; height: 1em; background: #000; display: inline-block; -webkit-transform: rotate(-30deg); transform: rotate(-30deg); -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; } .letter.m:after { content: ''; width: 2px; height: 1em; position: absolute; right: 0; background: #000; display: inline-block; -webkit-transform: rotate(28deg); transform: rotate(28deg); -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; } .letter.e { border-left: 2px solid #000; border-top: 2px solid #000; border-bottom: 2px solid #000; width: 0.8em; -webkit-transition: all 0.2s ease-in-out 0.2s; transition: all 0.2s ease-in-out 0.2s; } .letter.e:after { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background-color: #000; -webkit-transition: all 0.2s ease-in-out 0.2s; transition: all 0.2s ease-in-out 0.2s; } .letter.n { border-left: 2px solid #000; border-right: 2px solid #000; width: 0.7em; } .letter.n:after { content: ''; position: absolute; top: 0; bottom: -13px; width: 2px; background: #000; -webkit-transform: rotate(-35deg); transform: rotate(-35deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; } .letter.u { border-left: 2px solid #000; border-right: 2px solid #000; border-bottom: 2px solid #000; border-radius: 0 0 0.5em 0.5em; } .hidden-menu { visibility: hidden; opacity: 0; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); left: 50%; right: 0; text-align: center; font-family: monospace; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .hidden-menu ul { margin: 0; padding: 0; } .hidden-menu li { text-align: left; width: 50%; margin: 0 auto; font-size: 2em; cursor: pointer; line-height: 1.4; } .hidden-menu li:before { content: '>'; max-width: 0; overflow: hidden; display: inline-block; vertical-align: middle; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .hidden-menu li:hover:before { max-width: 100px; } .menu-wrapper.open .hidden-menu { visibility: visible; opacity: 1; } .menu-wrapper.open > .letter:nth-child(even):not(.e) { opacity: 0; } .menu-wrapper.open > .letter:nth-child(even):not(.e):before, .menu-wrapper.open > .letter:nth-child(even):not(.e):after { -webkit-transform: rotate(90deg) translate(500%, -500%); transform: rotate(90deg) translate(500%, -500%); } .menu-wrapper.open > .letter:nth-child(odd):not(.e) { opacity: 0; } .menu-wrapper.open > .letter:nth-child(odd):not(.e):before, .menu-wrapper.open > .letter:nth-child(odd):not(.e):after { -webkit-transform: rotate(-90deg) translate(-1000%, 0%); transform: rotate(-90deg) translate(-1000%, 0%); } .menu-wrapper.open .e { padding: 0 4em; -webkit-transform: scale3d(1, 4, 1) rotateX(180deg); transform: scale3d(1, 4, 1) rotateX(180deg); border-right: 2px solid #000; } @media screen and (max-width: 480px) { .menu-wrapper.open .e { padding: 0 2em; } } .menu-wrapper.open .e:after { opacity: 0; }
ES6
const menu = document.querySelectorAll('.menu-wrapper')[0]; menu.addEventListener('click', e => { e.preventDefault(); menu.classList.toggle('open'); });
Expand for more options Login