<div class="lab-container">
<div class="lab-title">A simple responsive menu with CSS</div>
<div class="lab-description">
<p>Demonstrating a simple, responsive, CSS-only navigation menu. Easily customizable to match your website's theme.</p>
</div>
<nav class="nav-menu">
<a href="#">Home</a>
<a href="#" class="active">Active</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Store</a>
</nav>
</div>
:root {
--accent: oklch(60.6% 0.25 292.717);
--nav-bg: color-mix(in hsl, var(--accent) 80%, white 5%);
--nav-link-color: color-mix(in hsl, var(--accent) 20%, white 80%);
--nav-link-hover-bg: color-mix(in hsl, var(--accent) 20%, white 80%);
--nav-link-hover-color: color-mix(in hsl, var(--accent) 20%, black 80%);
}
.lab-container {
max-width: 45rem;
padding: 10rem 2rem;
margin: 0 auto;
}
.nav-menu {
display: flex;
flex-direction: column;
gap: 0.35rem;
background-color: var(--nav-bg);
color: var(--nav-link-color);
border-radius: 0.75rem;
padding: 0.35rem;
}
.nav-menu a {
color: currentColor;
padding: 0.5rem 1rem;
text-decoration: none;
border-radius: 0.5rem;
transition: background-color 0.25s, color 0.1s ease-in-out;
}
.nav-menu a:hover,
.nav-menu .active {
background-color: var(--nav-link-hover-bg);
color: var(--nav-link-hover-color);
}
/* 1rem = 16px => 48 * 16 = 768 */
@media only screen and (min-width: 48rem) {
.nav-menu {
flex-direction: row;
}
}