Responsive Navigation Menu for 2021🎖️|| CSS JS
Tags: css, beginners, tutorial, javascript
Published: 2021-02-13 21:58:09

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

# Table of Contents -
   * [Codepen](#level-1)
   * [Setup](#level-2)
   * [HTML](#level-3)
   * [SCSS](#level-4)
   * [JavaScript](#level-5)
   * [Conclusion](#level-6)


# Codepen <a name="level-1"></a>

{% codepen https://codepen.io/joyshaheb/pen/mdOOrNd %}

# Youtube <a name="level-2"></a>

{% youtube dmrigoFKlLc %}

# Setup 

Come over to [Codepen.io](codepen.io) or any code editor and write these in scss 👇

```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 <a name="level-3"></a>

Let's start Coding. Write these in HTML 👇

```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 <a name="level-4"></a>


```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 <a name="level-5"></a>


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

![Credits](https://dev-to-uploads.s3.amazonaws.com/i/uzo5e477tn0sc4oz3mec.png)

## Read Next : 

{% link https://dev.to/joyshaheb/master-css-flexbox-2021-build-5-responsive-layouts-css-2021-3n9k %}

{% link https://dev.to/joyshaheb/acing-css-grid-model-in-2021-with-5-exercises-css-2021-51ci %}

# Conclusion <a name="level-6"></a>

Here's Your Medal For reading till the end ❤️

## Suggestions & Criticisms Are Highly Appreciated ❤️

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/usxsz1lstuwry3jlly4d.png)


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rts3fyi4q53i4qn0um58.png)


   * **YouTube[ / Joy Shaheb](youtube.com/channel/UCHG7IJuST_BXJkne-0u0Xtw)**

   * **Twitter[ / JoyShaheb](https://twitter.com/JoyShaheb)**

   * **Instagram[ / JoyShaheb](https://www.instagram.com/joyshaheb/)**