<nav>
<input type="checkbox" role="button" aria-label="Display the menu" aria-expanded="false" aria-controls="menu">
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/shop">Shop</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
nav {
background: teal;
display: flex;
}
ul {
margin-left:auto;
padding:0;
display: flex;
list-style:none;
}
ul li a {
padding: 10px 20px;
color: #fff;
text-decoration: none;
font-size: 20px;
font-weight: bold;
font-family: sans-serif;
}
ul li a:hover {
text-decoration: underline;
}
nav input {
width: 40px;
aspect-ratio: 1;
display: none;
overflow: hidden;
margin:10px 20px 10px auto;
box-sizing: border-box;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
}
nav input:before,
nav input:after {
content:"";
grid-area:1/1;
transition:.3s;
}
nav input:before {
background:
radial-gradient(closest-side at 12.5% 25%,#fff 96%,#0000) 0 0/80% 40%,
linear-gradient(#fff 50%,#0000 0) top/80% 40% repeat-y;
}
nav input:after {
padding: 10%;
background:
radial-gradient(closest-side at 50% 12.5%,#fff 96%,#0000) top /20% 80% repeat-y,
radial-gradient(closest-side at 12.5% 50%,#fff 96%,#0000) left/80% 20% repeat-x,
conic-gradient(from 90deg at 33% 33%, #0000 90deg, #fff 0)
100% 100%/60% 60% padding-box content-box;
transform: translate(-100%) translateZ(0) rotate(45deg);
opacity:0;
}
nav input:checked:before {
transform: translate(100%);
opacity:0;
}
nav input:checked:after {
transform: translate(0) translateZ(0) rotate(45deg);
opacity:1;
}
@media (max-width:600px) {
ul {
position: fixed;
background: inherit;
flex-direction: column;
inset: 0 0 0;
padding: 40px;
margin: 0;
align-items: center;
justify-content: center;
gap: 30px;
transform: translate(-100%);
opacity: 0;
transition: .3s;
}
nav input {
display: grid;
z-index: 3;
}
nav input:checked + ul {
transform: translate(0);
opacity: 1;
}
}
body {
margin: 0;
}
document.querySelector('nav input').onclick = function() {
if(this.checked)
this.setAttribute("aria-expanded",true)
else
this.setAttribute("aria-expanded",false)
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.