UNPKG

hamburger-menu

Version:

☰ A responsive CSS solution for a hamburger menu ☰

3 lines (2 loc) 1.91 kB
/*! hamburger-menu v0.6.2 ☰ https://github.com/center-key/hamburger-menu ☰ MIT License */ body{margin:0;padding:0 50px 0 200px}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 400ms;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}}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}