hamburger-menu
Version:
☰ A responsive CSS solution for a hamburger menu ☰
3 lines (2 loc) • 1.97 kB
CSS
/*! hamburger-menu v0.7.2 ☰ https://github.com/center-key/hamburger-menu ☰ MIT License */
body{margin:0;padding-top:0;padding-bottom:0}nav.hamburger-menu a.hamburger{color:inherit;background-color:inherit;display:none}nav.hamburger-menu aside{float:none;background-color:inherit;z-index:5000;margin:0;padding:0;position:fixed;top:0;bottom:0;left:0;overflow-y:scroll}nav.hamburger-menu aside menu{margin:0;padding:0;list-style:none}nav.hamburger-menu aside menu li a,nav.hamburger-menu aside menu li span{text-align:left;color:inherit;cursor:pointer;border-top:1px solid #0000;border-bottom:1px solid #0000;padding:10px 0 10px 15px;font-size:1.1rem;font-weight:700;text-decoration:none;transition:all .4s;display:block}nav.hamburger-menu aside menu li.current>a,nav.hamburger-menu aside menu li.current>span{border-color:inherit;cursor:default}nav.hamburger-menu aside menu menu li a,nav.hamburger-menu aside menu menu li span{padding:4px 0 4px 30px;font-size:.8rem}@media (width<=667px){html body{cursor:pointer;padding:35px 10px 0}nav.hamburger-menu{cursor:auto}nav.hamburger-menu a.hamburger{padding:6px 10px 8px 8px;font-size:1.4rem;font-weight:700;text-decoration:none;display:block;position:absolute;top:0;left:0}nav.hamburger-menu a.hamburger:not(:hover){transition:opacity .5s .8s}nav.hamburger-menu a.hamburger:hover{opacity:0}nav.hamburger-menu aside{max-width:0;transition:max-width 1s;overflow:hidden}nav.hamburger-menu aside menu li{white-space:nowrap}nav.hamburger-menu:not(.collapse-menu):hover .hamburger+aside{max-width:400px;overflow-y:scroll}}body{padding-left:200px;padding-right:50px}nav.hamburger-menu aside{width:150px}nav.hamburger-menu{color:#dcdcdc;background-color:teal}nav.hamburger-menu aside menu li.current{border-color:#fff}nav.hamburger-menu aside menu li.current>span,nav.hamburger-menu aside menu li.current>a,nav.hamburger-menu aside menu li>span:hover,nav.hamburger-menu aside menu li>a:hover{color:#fff;background-color:#008b8b}