Javascript Code: How to make menus in Java

In this code, we have a toggle button. Clicking on it opens a vertical sliding menu and the toggle button changes to close button. Clicking on the close button will close the menu and the close button will turn back into the toggle button. This code is very useful for websites that do not want the menu to appear normally and opens only with click of a button.

<!-- this script got from www.javascriptfreecode.com - Coded by: Krishna Eydat -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400&display=swap');

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
}

.container {
    width: 100%;
    height: 100vh;
    background: linear-gradient(-45deg, #ee7752, #e73c7e);
    background-size: 400% 400%;
    position: relative;
}

.nav-bar {
    position: absolute;
    background-color: #122;
    top: 0;
    left: -25rem;
    height: 100vh;
    width: 25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s ease-out;
}

.toggle {
    left: 0;
    box-shadow: 1px 0 15px 2px rgba(0, 0, 0, 0.4);
}

.toggle-menu {
    background-color: rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 2rem;
    left: 2rem;
    width: 4rem;
    height: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0.2rem 0.5rem;
    border-radius: 0.5rem;
}

.line {
    width: 100%;
    height: 4px;
    border-radius: 5px;
    background-color: #fff;
    transition: 0.2s ease-out;
}

.toggle .line1 {
    background-color: #e73c7e;
    transform: scale(0.9) rotateZ(-45deg) translate(-6px, 4px);
}

.toggle .line2 {
    display: none;
}

.toggle .line3 {
    background-color: #e73c7e;
    transform: scale(0.9) rotateZ(45deg) translate(-6px, -4px);
}

.toggle .toggle-menu {
    background-color: white;
}

.nav-list {
    list-style: none;
}

.nav-list-item {
    text-align: center;
    padding: 1rem 0;
}

.nav-link {
    color: #fff;
    font-size: 2.2rem;
    text-decoration: none;
    position: relative;
    padding-bottom: 0.4rem;
}

.nav-link::before {
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
    transform: scaleX(0);
    transition: 0.4s ease-in-out;
    transform-origin: left;
}

.nav-link:hover::before {
    transform: scaleX(1);
}


</style>
<div class="container">
      <nav class="nav-bar">
        <div class="toggle-menu">
          <div class="line line1"></div>
          <div class="line line2"></div>
          <div class="line line3"></div>
        </div>
        <ul class="nav-list">
          <li class="nav-list-item"><a href="#" class="nav-link">Home</a></li>
          <li class="nav-list-item"><a href="#" class="nav-link">About</a></li>
          <li class="nav-list-item">
            <a href="#" class="nav-link">Projects</a>
          </li>
          <li class="nav-list-item"><a href="#" class="nav-link">Clients</a></li>
          <li class="nav-list-item">
            <a href="#" class="nav-link">Contact Me</a>
          </li>
        </ul>
      </nav>
</div>
<script>
const toggleButton = document.querySelector('.toggle-menu');
const navBar = document.querySelector('.nav-bar');
toggleButton.addEventListener('click', () => {
    navBar.classList.toggle('toggle');
});
</script><a target="_blank" href="https://www.javascriptfreecode.com/" style="font-size: 8pt; text-decoration: none;font-family:Tahoma">Javascript Free Code</a>

If you don't know how to use this code or need more information Click here!

Compatible browsers:

Tags: effect, move, list

Javascript Best Codes

Javascript Code: How to make menus in Java

Links