スマホ用ナビゲーション。ハンバーガーから横くるりんぱっ!
スマートフォン用ハンバーガーメニューをCodePenから使いやすいように編集。
【HTML】
<a href="#" class="burger js-burger"><i></i></a> <nav class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Menu</a></li> <li><a href="#">Company</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="overlay"></div>
【CSS】
.menu { position: fixed; top: 0; left: -100%; bottom: 0; z-index: 1; width: 250px; background: white; color: #444; padding: 40px; box-sizing: border-box; -webkit-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1); } .menu ul { list-style: none; padding: 0; } .menu li { padding: 12px 0; } .menu a { font-size: 1.2rem; display: inline-block; text-decoration: none; color: #444; line-height: 1.2; position: relative; overflow: hidden; text-transform: uppercase; -webkit-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1); position: relative; padding: 2px 0; font-weight: 600; } .menu a:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #444; -webkit-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); } .menu a:hover:before { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } .menu span { font-weight: 300; margin-right: 5px; } .burger { position: absolute; width: 40px; height: 40px; background-color: #0288D1; overflow: hidden; top: 0; left: 0; margin: 10px; display: block; border-radius: 50%; z-index: 2; -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0) translate(0, 0); transform: rotate(0) translate(0, 0); } .burger, .burger i, .burger:before, .burger:after { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1); } .burger i, .burger:before, .burger:after { content: ''; position: absolute; left: 10px; right: 10px; width: 20px; height: 2px; background: white; display: block; } .burger i { top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .burger:before { top: 14px; } .burger:after { bottom: 14px; } /*ホバーした時の→矢印をつけるならコメントアウトはずす .burger:hover:before, .burger:hover:after { width: 15px; left: 30px; } .burger:hover:before { top: 20px; -webkit-transform: rotate(30deg); transform: rotate(30deg); } .burger:hover:after { bottom: 20px; -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } */ .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; -webkit-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1); } body.nav-open .menu { left: 0; } body.nav-open .burger { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); left: 250px; } body.nav-open .burger i, body.nav-open .burger:before, body.nav-open .burger:after { width: 20px; left: 10px; } body.nav-open .burger i { -webkit-transform: translateX(-200%); transform: translateX(-200%); } body.nav-open .burger:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 19px; } body.nav-open .burger:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); bottom: 19px; } body.nav-open .overlay { opacity: 1; visibility: visible; }
var burger = document.querySelector('.js-burger'), body = document.body; burger.addEventListener('click', function(event) { event.preventDefault(); body.classList.toggle('nav-open'); });
サンプルはコチラ
See the Pen sp navi by Tarou (@mikemame) on CodePen.
ちなみに元のはこれ
See the Pen Smooth Off Canvas Menu by Aimen ZENASNI (@AimenZenasni) on CodePen.