Last active
October 25, 2023 12:16
-
-
Save lambdaschmied2/fe226a473bf938f5691031b34aea775d to your computer and use it in GitHub Desktop.
CSS-only Responsive Navbar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<link rel="stylesheet" href="style.css"> | |
</head> | |
<body> | |
<header> | |
<strong>My Blog</strong> | |
<nav> | |
<ul> | |
<li><a href="/">About</a></li> | |
<li><a href="/">Blog</a></li> | |
<li><a href="/">Contact</a></li> | |
</ul> | |
<details> | |
<summary aria-label="open mobile menu"></summary> | |
<ul> | |
<li><a href="/">About</a></li> | |
<li><a href="/">Blog</a></li> | |
<li><a href="/">Contact</a></li> | |
</ul> | |
</details> | |
</nav> | |
</header> | |
<main> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus pellentesque neque, sit amet maximus urna | |
porttitor vel. Mauris interdum turpis id mollis porta. Suspendisse potenti. Vestibulum ante ipsum primis in | |
faucibus | |
orci luctus et ultrices posuere cubilia curae; Maecenas ut massa sem. Duis dui arcu, gravida vitae lacinia a, | |
suscipit | |
id odio. Sed eu ipsum viverra, aliquet justo id, aliquet ligula. Donec sodales lorem quis condimentum aliquet. | |
Vestibulum vitae accumsan ex. Maecenas feugiat neque lorem, sit amet mollis ligula porttitor in. Lorem ipsum | |
dolor sit | |
amet, consectetur adipiscing elit. | |
</main> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
don't forget to add your own menu/close icons and replace the URLs in this file | |
this example uses svg icons from https://ionic.io/ionicons | |
*/ | |
body { | |
margin: 0; | |
font-family: sans-serif; | |
line-height: 2; | |
} | |
main { | |
/** [1.1] **/ | |
/* don't forget to increase vertical padding with fixed navbar */ | |
padding: 1rem 1rem; | |
height: 200vh; | |
background-color: antiquewhite; | |
} | |
header { | |
background-color: aliceblue; | |
display: flex; | |
justify-content: space-between; | |
/** [1.2] **/ | |
/** toggle sticky header **/ | |
position: fixed; | |
width: 100%; | |
} | |
header>* { | |
padding: 1rem; | |
} | |
header>strong { | |
font-size: 1.5rem; | |
line-height: 1; | |
} | |
header ul { | |
display: flex; | |
list-style: none; | |
gap: 1rem; | |
} | |
/* hide details containing mobile menu when page is wider then 991px */ | |
nav>details { | |
display: none; | |
} | |
nav>details>summary { | |
cursor: pointer; | |
list-style: none; | |
display: block; | |
text-align: end; | |
height: 2rem; | |
/* slight transition */ | |
transition: margin-bottom 150ms ease-out; | |
} | |
/* add margin for slight transition */ | |
nav>details[open]>summary { | |
margin-bottom: 1rem; | |
} | |
/* custom image for mobile menu */ | |
nav>details>summary::after { | |
content: ''; | |
background-image: url(img/menu.svg); | |
background-size: 2rem 2rem; | |
display: inline-block; | |
width: 2rem; | |
height: 2rem; | |
} | |
/* alternative image for open mobile menu */ | |
nav>details[open]>summary::after { | |
background-image: url(img/close.svg); | |
} | |
nav>details>ul { | |
flex-direction: column; | |
align-items: end; | |
margin: 0; | |
/** [2] **/ | |
/** toggle full page menu **/ | |
/* height: calc(100vh - 64px); */ | |
} | |
/* when page is smaller then 991px */ | |
@media (max-width: 991px) { | |
/* header { | |
align-items: start; | |
} */ | |
/* hide desktop menu */ | |
nav>ul { | |
display: none !important; | |
} | |
/* show mobile menu */ | |
nav>details { | |
display: block !important; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment