How to make menus in Java

Written by @kerixa 21 August 2012

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.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->

<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>
		   <li class="nav-list-item">
			
<a  class="nav-link" href="http://www.javascriptfreecode.com">Javascript Free Code</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'>JavaScript Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: admin_js, bloxio, yqaice, flooketsu, phuang_test
advertisement 2