hamburger-menu/src/hamburger-menu.css

☰ A responsive CSS solution for a hamburger menu ☰

/*
Structure for HamburgerMenu:
   nav.hamburger-menu
      a.hamburger
      aside
         ul
            li a|span
            li a|span
            li a|span
*/

/* HamburgerMenu style and behavior (override these settings with caution) */
body {
   padding-top: 0px;
   padding-bottom: 0px;
   margin: 0px;
   }
nav.hamburger-menu a.hamburger {
   display: none;
   color: inherit;
   background-color: inherit;
   }
nav.hamburger-menu aside {
   position: fixed;
   top: 0px;
   bottom: 0px;
   left: 0px;
   float: none;
   background-color: inherit;
   padding: 0px;
   margin: 0px;
   overflow-y: scroll;
   z-index: 5000;
   }
nav.hamburger-menu aside ul {
   list-style: none;
   padding: 0px;
   margin: 0px;
   }
nav.hamburger-menu aside ul li a,  /* menu item contents */
nav.hamburger-menu aside ul li span {
   display: block;
   font-size: 1.1rem;
   font-weight: bold;
   text-align: left;
   text-decoration: none;
   color: inherit;
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
   padding: 10px 0px 10px 15px;
   transition: all 0.4s;
   cursor: pointer;
   }
nav.hamburger-menu aside ul li.current >a,  /* highlighted menu item */
nav.hamburger-menu aside ul li.current >span {
   border-color: inherit;
   cursor: default;
   }
nav.hamburger-menu aside ul ul li a,  /* nested menu item */
nav.hamburger-menu aside ul ul li span {
   font-size: 0.8rem;
   padding: 4px 0px 4px 30px;
   }
@media (max-width: 667px) {  /* selects iPhone 6/6s/7/8 landscape and anything narrower */
   html body {
      padding: 35px 10px 0px 10px;
      cursor: pointer;  /* enables closing menu */
      }
   nav.hamburger-menu {
      cursor: auto;
      }
   nav.hamburger-menu a.hamburger {
      display: block;
      position: absolute;
      top: 0px;
      left: 0px;
      font-size: 1.4rem;
      font-weight: bold;
      text-decoration: none;
      padding: 6px 10px 8px 8px;
      }
   nav.hamburger-menu a.hamburger:not(:hover) {
      transition: opacity 0.5s 0.8s;  /* delay to allow menu time to hide */
      }
   nav.hamburger-menu a.hamburger:hover {
      opacity: 0;
      }
   nav.hamburger-menu aside {
      max-width: 0px;
      overflow: hidden;
      transition: max-width 1.0s;
      }
   nav.hamburger-menu aside ul li {
      white-space: nowrap;
      }
   nav.hamburger-menu:not(.collapse-menu):hover .hamburger + aside {
      max-width: 400px;  /* used for animation -- must be greater than actual displayed width */
      overflow-y: scroll;
      }
   }