Creating a Sliding Menu with HTML, CSS, and JavaScript

Creating a Sliding Menu with HTML, CSS, and JavaScript 

Introduction

A sliding menu is a trendy and user-friendly way to present navigation options on a website. In this article, we will create a sliding menu with cool animations using HTML, CSS, and JavaScript. The menu will slide in from the left side when clicking on a hamburger menu button, and the menu items will appear with a fade-in effect.

HTML Structure

We start by setting up the HTML structure for our sliding menu. The navigation bar will consist of a menu button (hamburger icon) and a list of navigation links.

  
    
  <nav>
<div class="menu-btn">
    <div class="line line--1"></div>
    <div class="line line--2"></div>
    <div class="line line--3"></div>
  </div>

  <div class="nav-links">
    <a href="" class="link">Home</a>
    <a href="" class="link">Contact</a>
    <a href="" class="link">Profile</a>
    <a href="" class="link">About</a>
  </div>
</nav>


<div class="inform">
  Sliding Menu
</div>

<div class="support">
  <a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
  <a href="https://codepen.io/dev_loop/" target="_blank"><i class="fab fa-codepen"></i></a>
</div>
  

CSS Styling

Next, we add the CSS styles to create the sliding effect and the appearance of the menu and navigation links.

  
    
    * {
box-sizing: border-box;
}

html,
body {
    height: 100vh;
    width: 100%;
}

body {
    margin: 0;
    padding: 0;
  background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);
  
}

nav {
    overflow: hidden;
    position: relative;
    transform: translateX(-300px);
    height: 100%;
    width: 400px;
    transition: all 800ms cubic-bezier(.8, 0, .33, 1);
    border-radius: 0% 0% 100% 50%;
}

nav.nav-open {
    transform: translateX(0px);
    border-radius: 0% 0% 0% 0%;
   background: rgba(255, 255, 255, 0.6);
}

nav .menu-btn {
    position: absolute;
    top: 10%;
    right: 5%;
    padding: 0;
    width: 30px;
    cursor: pointer;
    z-index: 2;
}

nav .menu-btn .line {
    padding: 0;
    width: 30px;
    background: #fff;
    height: 2px;
    margin: 5px 0;
    transition: all 700ms cubic-bezier(.9, 0, .33, 1);
}

nav .menu-btn .line.line--1 {
    width: 30px;
    transform: rotate(0) translateY(0);
}

nav .menu-btn .line.line--1.line-cross {
    width: 30px;
    transform: rotate(45deg) translateY(10px);
   background: rgba(0,0,0,0.6);
}

nav .menu-btn .line.line--2 {
    width: 28px;
    transform: translateX(0);
}

nav .menu-btn .line.line--2.line-fade-out {
    width: 28px;
    transform: translate(30px);
    opacity: 0;
}

nav .menu-btn .line.line--3 {
    width: 20px;
    transform: rotate(0) translateY(0);
}

nav .menu-btn .line.line--3.line-cross {
    width: 30px;
    transform: rotate(-45deg) translateY(-10px);
   background: rgba(0,0,0,0.6);
}

nav .nav-links {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateX(-100px);
    opacity: 0;
    transition: all 900ms cubic-bezier(.9, 0, .33, 1);
}

nav .nav-links.fade-in {
    opacity: 1;
    transform: translateX(0px);
}

nav .nav-links .link {
    margin: 20px 0;
    text-decoration: none;
    font-family: sans-serif;
    color: rgba(0,0,0,0.9);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.2rem;
    transition: all 300ms cubic-bezier(.9, 0, .33, 1);
}

nav .nav-links .link:hover {
    color: rgba(0, 0, 0, .5);
}


.inform{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.8);
  font-size: 2rem;
  font-family: sans-serif;
  text-transform: uppercase;
  letter-spacing: 5px;
  text-shadow: 0 0 20px rgba(0,0,0,0.6);
}

.support{
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 10px;
  display: flex;
}
a{
  margin: 0 20px;
  color: #fff;
  font-size: 2rem;
  transition: all 400ms ease;
}

a:hover{
  color: #222;
}
  

/* Add your CSS here */ JavaScript Functionality

Finally, we implement the JavaScript logic to toggle the sliding menu when clicking on the menu button.

javascript

  
     var menuBtn = document.querySelector('.menu-btn');
var nav = document.querySelector('nav');
var lineOne = document.querySelector('nav .menu-btn .line--1');
var lineTwo = document.querySelector('nav .menu-btn .line--2');
var lineThree = document.querySelector('nav .menu-btn .line--3');
var link = document.querySelector('nav .nav-links');
menuBtn.addEventListener('click', () => {
    nav.classList.toggle('nav-open');
    lineOne.classList.toggle('line-cross');
    lineTwo.classList.toggle('line-fade-out');
    lineThree.classList.toggle('line-cross');
    link.classList.toggle('fade-in');
})
  

/* Add your JavaScript here */ Conclusion

In this tutorial, we learned how to create a sliding menu using HTML, CSS, and JavaScript. By combining animations and transitions, we achieved a visually appealing and user-friendly navigation experience. Feel free to customize the styles and add more functionality to suit your website's design and requirements. Sliding menus are versatile and can be adapted to various projects, making them a popular choice among web developers. Happy coding!