Last active
February 16, 2023 13:59
-
-
Save Pageboy/3a2a9b08fa7df8cf6c1b179e68a3caba to your computer and use it in GitHub Desktop.
Simple Navigation with CSS Flexbox
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
* { | |
box-sizing: border-box; | |
margin: 0; | |
padding: 0; | |
} | |
body { | |
font-family: verdana, sans-serif; | |
margin: 2em; | |
padding: 0; | |
} | |
nav { | |
width: 100%; | |
position: fixed; | |
top: 0; | |
left: 0; | |
background-color: silver; | |
} | |
nav ul { | |
list-style: none; | |
display: flex; | |
align-items: center; | |
justify-content: flex-end; | |
} | |
nav ul li { | |
flex: 0 0 8rem; /*the same as flex-grow, flex-shrink, flex-basis */ | |
text-align: center; | |
} | |
/* we turn off the underline and set the padding and the color O */ | |
nav ul li a { | |
text-decoration: none; | |
padding: 0.8rem 1rem; | |
display: block; | |
color: green; | |
} | |
/* feedback for the user with a background when hovering hover */ | |
nav ul li:hover { | |
background-color: black; | |
} | |
nav ul li a:hover { | |
color: white; | |
} | |
/* sub menus */ | |
li ul { | |
display: none; | |
position: absolute; | |
background-color: black; | |
} | |
li ul li a { | |
padding: 0.3rem 1.5rem; | |
/* font-size: 0.8rem; */ | |
} | |
nav ul li:hover ul { | |
display: flex; | |
flex-direction: column; | |
} | |
nav ul li ul li { | |
flex: 0 1 auto; | |
width: 8rem; /* the same as the value for flex-basis on the parent li */ | |
} | |
/* now for the smaller displays */ | |
@media screen and (max-width: 900px) { | |
nav ul { | |
flex-direction: column; | |
} | |
li ul { | |
position: static; | |
} | |
nav ul li { | |
flex: 0 0 auto; /*the same as flex-grow, flex-shrink, flex-basis */ | |
width: 100%; | |
} | |
nav ul li:hover ul { | |
display: flex; | |
flex-direction: column; | |
width: 100%; | |
} | |
} | |
/* Now let’s try with the hamburger menu | |
In this version we need to use a hamburger menu item that will reveal the menu. For this we need a checkbox as input that will toggle this on and off. | |
We need to add this the following HTML inside the nav */ | |
/* <input type="checkbox" id="toggle"> | |
<label for="toggle" class="hamburger">☰</label> */ | |
/* Note that ☰ is an HTML entity that displays the ☰ (hamburger icon.) | |
Now in the CSS we need to hide this item when we are in the normal wide screen view: */ | |
/* we hide the hamburger icon until we are on a small screen */ | |
input[type="checkbox"] { | |
display: none; | |
} | |
.hamburger { | |
display: none; | |
font-size: 2rem; | |
color: white; | |
} | |
/* So when the display is small we can use our media query to hide the menu but reveal the hamburger */ | |
@media screen and (max-width: 900px) { | |
.hamburger { | |
display: block; | |
float: right; | |
cursor: pointer; | |
} | |
/* but we also need to hide the menu until that hamburger is clicked */ | |
nav ul { | |
display: none; | |
} | |
/*when the hamburger is clicked the ul below it will be made to show */ | |
/* the tilda ~ points to the next sibling selector */ | |
input[type="checkbox"]:checked ~ ul { | |
display: block; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment