hamburger-menu
Version:
☰ A responsive CSS solution for a hamburger menu ☰
128 lines (125 loc) • 3.76 kB
CSS
/*! HamburgerMenu v0.3.3 ☰ github.com/center-key/hamburger-menu ☰ MIT License */
/*
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;
}
}
/******************************************************************************/
/* [override this section to customize] */
/* HamburgerMenu ~ Custom width and colors */
body {
padding-right: 50px; /* gutter on left and right sides of page */
padding-left: 200px; /* set to "padding-right" + "width"(aside) */
}
nav.hamburger-menu aside {
width: 150px; /* menu width */
}
nav.hamburger-menu {
color: gainsboro; /* menu font color */
background-color: teal; /* menu background color */
}
nav.hamburger-menu aside ul li.current {
border-color: white; /* border color for selected menu item */
}
nav.hamburger-menu aside ul li.current >span,
nav.hamburger-menu aside ul li.current >a,
nav.hamburger-menu aside ul li >span:hover,
nav.hamburger-menu aside ul li >a:hover {
color: white; /* menu font highlight color */
background-color: darkcyan; /* menu background highlight color */
}
/******************************************************************************/