hamburger-menu/dist/hamburger-menu.min.css

☰ A responsive CSS solution for a hamburger menu ☰

/*! HamburgerMenu v0.3.3 ☰ github.com/center-key/hamburger-menu ☰ MIT License */
body{padding-top:0;padding-bottom:0;margin:0}nav.hamburger-menu a.hamburger{display:none;color:inherit;background-color:inherit}nav.hamburger-menu aside{position:fixed;top:0;bottom:0;left:0;float:none;background-color:inherit;padding:0;margin:0;overflow-y:scroll;z-index:5000}nav.hamburger-menu aside ul{list-style:none;padding:0;margin:0}nav.hamburger-menu aside ul li a,nav.hamburger-menu aside ul li span{display:block;font-size:1.1rem;font-weight:700;text-align:left;text-decoration:none;color:inherit;border-top:1px solid transparent;border-bottom:1px solid transparent;padding:10px 0 10px 15px;transition:all .4s;cursor:pointer}nav.hamburger-menu aside ul li.current>a,nav.hamburger-menu aside ul li.current>span{border-color:inherit;cursor:default}nav.hamburger-menu aside ul ul li a,nav.hamburger-menu aside ul ul li span{font-size:.8rem;padding:4px 0 4px 30px}@media (max-width:667px){html body{padding:35px 10px 0;cursor:pointer}nav.hamburger-menu{cursor:auto}nav.hamburger-menu a.hamburger{display:block;position:absolute;top:0;left:0;font-size:1.4rem;font-weight:700;text-decoration:none;padding:6px 10px 8px 8px}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;overflow:hidden;transition:max-width 1s}nav.hamburger-menu aside ul li{white-space:nowrap}nav.hamburger-menu:not(.collapse-menu):hover .hamburger+aside{max-width:400px;overflow-y:scroll}}body{padding-right:50px;padding-left:200px}nav.hamburger-menu aside{width:150px}nav.hamburger-menu{color:#dcdcdc;background-color:teal}nav.hamburger-menu aside ul li.current{border-color:#fff}nav.hamburger-menu aside ul li.current>a,nav.hamburger-menu aside ul li.current>span,nav.hamburger-menu aside ul li>a:hover,nav.hamburger-menu aside ul li>span:hover{color:#fff;background-color:#008b8b}