Responsive Navigation Menu for 2021🎖️|| CSS JS

Let's Build a Responsive Navigation Hamburger Menu in 2021 from Scratch for both desktop & mobile screen🎖️

Table of Contents -

• Codepen
• Setup
• HTML
• SCSS
• JavaScript
• Conclusion

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

Comments

[GrahamTheDev]

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:-

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contacts">Contacts</a></li>
    <ul>
</nav>

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!

[Andelko Cvjetkovic]

I'm sorry to, but I completely agree, also you shoudn't animate right property because it cause repaint in browsers. csstriggers.com/