Side Navigation with Fullscreen Menu

                                                
                                                <!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->
                                                                             <!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side Navigation with Fullscreen Menu</title>

<!-- font awesome library include 5.15.4 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- font library -->
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

<!-- css styles -->
<style>
 
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); 


/* default light theme */
:root, html{
  margin: 0;
  padding: 0;
  font-family: "Inter", arial, monospace;

  --primary-color: #f45b69;
  --secondary-color:#456990;
  --background-color: white;
  --button-color: black;
  --button-bg-color: yellow;
  --opacity: 0.75;


  --background-color: darkgrey;
  --animation-length : 0.5s;
}


/* dark-mode theme */
:root[data-theme="dark-mode"]{
  

}


/* main styles */
html, body{
  margin: 0;
  padding: 0;

}

body
{
  background-color:#f2f2f2;
  font-family: 'RobotoDraft', 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a{
  text-decoration: none;
  color: rgb(200, 200, 200);
}

a:hover{
  color: var(--primary-color);
}

*
{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

div[class*="section"]{
  height: 100vh;
}

.section-1{
  background-color: var(--primary-color);
}

.section-2{
  background-color: var(--secondary-color);
}


/* menu css */
.menu_container{
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 100;

  visibility: hidden;
}

.menu_overlay{
  background-color: rgba(0, 0, 0, 0.5);
  width: 100vw;
  height: 100vh;

  transition: opacity var(--animation-length) ease-in-out;
  opacity: 0;
}

nav{
  display: flex;
  position: relative;
  justify-content: end;

}

.ham-menu {
  margin: 0.5rem;
}
.ham-menu:hover{
  cursor: pointer;
}

.menu{
  background-color: black;
  width: 100vw;
  padding:1rem;

  position: fixed;
  top: 0;
  left: 0;

  height: 100vh;
  display: flex;
  flex-direction: column;

  transition: left var(--animation-length) ease-in-out;
}

.menu > .menu__exit {
  align-self: end;
  padding-right: 2rem;
}

.menu > .menu__exit *{
  font-size: 2rem;
}

.menu > .menu__items{
  padding-top: 0.5rem;
  padding-left: 0;
  list-style: none;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu > .menu__items li {
  font-size: 1.5rem;
  padding: 0.5rem 0;
}

.menu i{
  color: rgb(200, 200, 200);
}
.menu i:hover{
  cursor: pointer;
  color: white;
}


/* animation states */
.hide-active{
  left: -100%;
}

.overlay-active{
  opacity: 1;
}

</style>
</head>

<body>

<main>

  <div class="menu_container">
    <div class="menu_overlay">

    </div>
    <div class="menu hide-active">

      <div class="menu__exit">
        <i class="fa-solid fa-xmark js-exit_menu"></i>
      </div>
  
      <ul class="menu__items">
        <li><a href="http://www.javascriptfreecode.com">Javascript Free Code</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Clients</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </div>
  </div>

  
  <section>

      <div class="section-1">

        <nav>
          <div class="ham-menu">
            <i class="fa fa-bars fa-lg js-show_menu" aria-hidden="true"></i>
          </div>
        </nav>
      </div>

      <div class="section-2">
      
      </div>
  </section>

</main>

<script>


/*   

Tutorial Description

Side navigation with a full-screen menu.

*/

const show_menu = document.querySelector(".js-show_menu");
const exit_menu = document.querySelector(".js-exit_menu");
const menu_container = document.querySelector(".menu_container");
const menu_overlay = menu_container.querySelector(".menu_overlay");
const menu = document.querySelector(".menu");

if(show_menu != null){

  show_menu.addEventListener("click", (event) => {


    if(menu.classList.contains("hide-active")){
      menu_container.style.visibility = "visible";
      menu_overlay.classList.add("overlay-active");
      menu.classList.remove("hide-active");
    }
    
  })
}

if(exit_menu != null){

  exit_menu.addEventListener("click", (event) => {
    
    if(!menu.classList.contains("hide-active")){
      menu.classList.add("hide-active");
      menu_overlay.classList.remove("overlay-active");

      setTimeout( ()=> {
        menu_container.style.visibility = "hidden";
      }, 500);
    }

  })
}

</script>
</body>
</html>                                         
                                            <a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>

Example:

About @phuang

Help desk analyst transitioning to a full-stack developer role. Hoping to learn and collaborate with everyone. Happy coding!

Comments

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

0 / 300

Side Navigation with Fullscreen Menu

Code Snippet:

Example:

About @phuang

Comments

TRENDING POST

VISITORS

Create an Account

Login

Recover Account

Message Received!

Account Created!

Edit Code

Side Navigation with Fullscreen Menu

Code Snippet:

Example:

About @phuang

Comments

Let's stay in touch

TRENDING POST

VISITORS