Let's Build a Responsive Navigation Hamburger Menu in 2021 from Scratch for both desktop & mobile screen🎖️
Table of Contents -
Codepen
Youtube
Setup
Come over to Codepen.io or any code editor and write these in scss 👇
// Changing default styles
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
body{
font-family: sans-serif;
width: 100%;
min-height: 100vh;
font-size: 25px;
overflow-x: hidden;
}
}
// Managing all our breakpoints in this map
$bp : (
mobile : 480px,
tablet : 768px,
desktop : 1440px,
);
// Conditional Media query Mixins
// To save time
@mixin query($screen){
@each $key, $value in $bp{
@if ($screen == $key){
@media (max-width : $value){@content;}
}
}
}
HTML
Let's start Coding. Write these in HTML 👇
<!-- Using the BEM naming system -->
<!-- The Parent holding everything -->
<div class="container">
<!-- This section carries our header -->
<div class="header">
<!-- Logo here -->
<div class="header__logo">LOGO</div>
<!-- Button Managemnet -->
<div class="header__btn">
<i id="open" class='header__btn-open bx bx-menu' ></i>
<i id="close" class='header__btn-close bx bx-x hide'></i>
</div>
<!-- menu Items here -->
<div id="menu" class="header__menu slide">
<div class="item-1">
<!-- Using Radio buttons to toggle back & forth -->
<input type="radio" checked name="A" id="a">
<label for="a">Home</label>
</div>
<div class="item-2">
<input type="radio" name="A" id="b">
<label for="b">About</label>
</div>
<div class="item-3">
<input type="radio" name="A" id="c">
<label for="c">Services</label>
</div>
<div class="item-4">
<input type="radio" name="A" id="d">
<label for="d">Contacts</label>
</div>
</div>
</div>
<!-- This section carries our content -->
<div class="main">
<div class="main__header">Welcome !</div>
<div class="main__text">
Lorem ipsum dolor sit amet.
</div>
</div>
</div>
SCSS
// Style rules for desktop screen
.header{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: #c1c1c1;
height: 10vh;
padding: 0px 10px;
&__logo{
cursor: pointer;
}
&__btn{
display: none;
}
&__menu{
display: flex;
flex-direction: row;
[class ^="item-"]{
padding-left: 15px;
cursor: pointer;
}
}
}
// Style rules for .main class
.main{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 80vh;
text-align: center;
}
// Style Rules for Label
label:hover{
color : white;
cursor: pointer;
}
input[type = "radio"]{
display: none;
}
input[type = "radio"]:checked + label{
color: white;
text-decoration: underline;
}
// Media query rules for mobile screen
@include query(mobile){
.header{
justify-content:center;
&__logo{}
&__btn{
display: flex;
position: absolute;
right : 10px;
font-size: 40px;
cursor: pointer;
}
&__menu{
flex-direction: column;
align-items: center;
justify-content: space-evenly;
position: absolute;
z-index: 1;
right: 0px;
top: 10vh;
background-color: #c1c1c1;
width: 100%;
height: 90vh;
transition: all 0.4s ease;
}
}
}
// Style rules when btn is clicked
.hide{
display: none;
}
.slide{
right : -100%;
}
JavaScript
// Selecting id from HTML in JS
let open = document.getElementById("open"),
close = document.getElementById("close"),
menu = document.getElementById("menu");
// Creating a reuseable function
common = (x,y,z) =>{
x.addEventListener("click",()=>{
x.classList.toggle("hide");
y.classList.toggle("hide");
// defining conditions on if statements
if(z== "slide-in"){
menu.classList.toggle("slide");
}
if(z == 'slide-out'){
menu.classList.toggle("slide");
}
})
}
// Calling functions here
common(open,close,"slide-in");
common(close,open,'slide-out');
Credits
Read Next :
Master CSS Flexbox 2021 🔥- Build 5 Responsive Layouts🎖️|| CSS 2021
Joy Shaheb ・ Feb 4 '21
#css
#tutorial
#beginners
#webdev
Acing CSS Grid Model in 2021 with 5 Exercises || CSS 2021 🔥
Joy Shaheb ・ Dec 22 '20
#tutorial
#beginners
#webdev
#css
Conclusion
Here's Your Medal For reading till the end ❤️
Suggestions & Criticisms Are Highly Appreciated ❤️
YouTube / Joy Shaheb
Twitter / JoyShaheb
Instagram / JoyShaheb
Top comments (2)
No no no a thousand times no!
Do not use radio buttons for navigation! This is the least accessible solution you could probably have come up with next to just straight
<div>
s.As they aren't in a form they may not be keyboard accessible, as you hide the radio inputs with
display: none
they are definitely not accessible.But lets assume you don't care about disabled people, what about SEO? What about valid HTML. I mean it isn't difficult:-
I don't normally put negative comments on a post but you should probably delete this, it may do a lot more harm than good!
I'm sorry to, but I completely agree, also you shoudn't animate right property because it cause repaint in browsers. csstriggers.com/