Responsive Mobile Menu Using CSS Flexbox – ftwnav

Preview:

Description:

A responsive site nav that automatically collapses into a side hamburger menu (off-canvas menu) in mobile view.

Built with CSS flexbox and a little bit of JavaScript.

How to use it:

1. Add your site logo, menu items, and hamburger toggle button to the nav.

<nav>
  <div class="logo">
    <h2>Site Logo</h2>
  </div>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <div class="menu-bars">
    <input type="checkbox">
    <span></span>
    <span></span>
    <span></span>
  </div>
</nav>

2. The necessary CSS/CSS3 styles for the site nav.

/* Core */
nav{
  display:flex;
  background-color: rgb(126, 43, 204);
  justify-content: space-around;
  padding:20px 0;
  color:rgb(255, 254, 254);
  align-items: center;
}
nav.logo{
  letter-spacing: 3px;
}
nav ul{
  display:flex;
  list-style: none;
  width:40%;
  justify-content: space-between;
}
nav ul li a {
  color:rgb(255, 254, 254);
  text-decoration: none;
  font-size: 1em;
}
nav ul.slide{
  transform: translateX(0);
}
/* Hamburger */
.menu-bars{
  display:none;
  flex-direction: column;
  height:20px;
  justify-content: space-between;
  position:relative;
}
.menu-bars input{
  position: absolute;
  width:40px;
  height:28px;
  left:-5px;
  top:-3px;
  opacity: 0;
  cursor:pointer;
  z-index: 2;
}
.menu-bars span{
  display:block;
  width:28px;
  height:3px;
  background-color:rgb(255, 254, 254);
  border-radius: 3px;
  transition: all 0.3s;
}
.menu-bars span:nth-child(2){
  transform-origin: 0 0 ;
}
.menu-bars span:nth-child(4){
  transform-origin: 0 100% ;
}
.menu-bars input:checked ~ span:nth-child(2){
  background-color: white;
  transform: rotate(45deg) translate(-1px, -1px);
}
.menu-bars input:checked ~ span:nth-child(4){
  background-color: white;
  transform: rotate(-45deg) translate(-1px,0);
}
.menu-bars input:checked ~ span:nth-child(3){
  opacity: 0;
  transform: scale(0);
}
/* Mobile Menu */
@media only screen and (max-width: 768px){
  nav ul{
    width:50%;
  }
}
@media only screen and (max-width: 576px){
  .menu-bars{
    display:flex;
  }
  nav ul{
    position:absolute;
    right:0;
    top:0;
    width:80%;
    height:100vh;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
    background-color: rgb(126, 43, 204);
    z-index: -1;
    transform: translateX(100%);
    transition: all 1s;
  }
}

3. Enable the hamburger button to toggle the mobile menu.

const menuToggle= document.querySelector(".menu-bars");
const nav = document.querySelector("nav ul");
menuToggle.addEventListener("click", () => {
  nav.classList.toggle("slide");
});