2021 reactive navigation menu ️ | | CSS, JS

2021 reactive navigation menu 🎖 ️ | | CSS, JS

• • HTML
  • SCSS
  • JavaScript
  • The last

Let’s build responsive navigation burger menus for desktop and mobile screens from scratch in 2021 🎖️

Go to codepen. IO or any code editor and write them 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; }}}}Copy the code

HTML

Let’s start coding. Write this 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>
Copy the code

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.4 s ease;
    }
  }
}


// Style rules when btn is clicked

.hide{
  display: none;
}

.slide{
  right : -100%;
}
Copy the code

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');
Copy the code

The last