Side Navigation with Push Effect

Written by @phuang 9 April 2023

Side navigation menu with push effect that moves the page to the right.

Code Snippet:

                                                
                                                <!-- this script is provided by http://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 Push Effect</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-1 > .sub-section{
  display: flex;
  justify-content: center;
}
.section-2{
  background-color: var(--secondary-color);
}


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

}

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

.menu{
  background-color: black;
  width: 0;

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

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

  transition: width var(--animation-length);

  overflow-x: hidden;
}

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

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

.menu > .menu__items{
  padding: 0.5rem;
  list-style: none;
}

.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{
  width: 0;
}

.overlay-active{
  opacity: 1;
}


.main{
  transition: margin-left var(--animation-length);
}

.css-3d-text {
    font-size: 88px;
    color: #078bff;
    font-family: "Arial Black", Gadget, sans-serif;
    text-shadow: 0px 0px 0 rgb(-5,127,243),
                 1px 1px 0 rgb(-18,114,230),
                 2px 2px 0 rgb(-30,102,218),
                 3px 3px 0 rgb(-43,89,205),
                 4px 4px  0 rgb(-55,77,193),
                 5px 5px 4px rgba(0,0,0,0.38),
                 5px 5px 1px rgba(0,0,0,0.5),
                 0px 0px 4px rgba(0,0,0,.2);
 }
</style>
</head>

<body>

<main>


  <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="">About</a></li>
      <li><a href="">Services</a></li>
      <li><a href="">Clients</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </div>


  
  <section class="main">

      <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 class="sub-section">
          <div class="css-3d-text">KERIXA</div>
        </div>
  
      </div>

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

</main>

<script>


/*   

Tutorial Description

Side navigation menu with push effect that moves the page to the right.

*/

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

if(show_menu != null){

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

    if(menu.classList.contains("hide-active")){
      menu.classList.remove("hide-active");

      main.style.marginLeft = "15rem";
      menu.style.width="15rem";
    }
    
  })
}

if(exit_menu != null){

  exit_menu.addEventListener("click", (event) => {
    
    if(!menu.classList.contains("hide-active")){
      main.style.marginLeft = "0";
      menu.style.width= 0;

      menu.classList.add("hide-active");

    }

  })
}

</script>
</body>
</html><a target='_blank' href='http://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!

P

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: john.mav4, gech, ben.reed@laingbuisson.com, javaboy, Estevan Belo
advertisement 2