Skip to content

Instantly share code, notes, and snippets.

@markcaron

markcaron/hamburger-menu2.css

Last active April 21, 2021 22:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save markcaron/efc17e077c0af5e1730f2020cfebddc2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save markcaron/efc17e077c0af5e1730f2020cfebddc2 to your computer and use it in GitHub Desktop.
Download ZIP
CSS for a responsive hamburger menu built with pure CSS - Step 2
Raw
hamburger-menu2.css
/*
On small devices, allow it to toggle...
*/
/*
:target for non-JavaScript
[aria-expanded] will be used if/when JavaScript is added to improve interaction, though it's completely optional.
*/
.main-menu:target,
.main-menu[aria-expanded="true"] {
display: block;
left: 0;
outline: none;
-moz-box-shadow: 3px 0 12px rgba(0,0,0,.25);
-webkit-box-shadow: 3px 0 12px rgba(0,0,0,.25);
box-shadow: 3px 0 12px rgba(0,0,0,.25);
}
.main-menu:target .menu-close,
.main-menu[aria-expanded="true"] .menu-close {
z-index: 1001;
}
.main-menu:target ul,
.main-menu[aria-expanded="true"] ul {
position: relative;
z-index: 1000;
}
/*
We could us `.main-menu:target:after`, but
it wouldn't be clickable.
*/
.main-menu:target + .backdrop,
.main-menu[aria-expanded="true"] + .backdrop{
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 998;
background: #000;
background: rgba(0,0,0,.85);
cursor: default;
}
@supports (position: fixed) {
.main-menu,
.main-menu:target + .backdrop,
.main-menu[aria-expanded="true"] + .backdrop{
position: fixed;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment