Side Navigation with Push Effect
Written by 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="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>
<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:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Online Users:
12
Recent Members:
mastap, AppPh, kerixa4, Ash, john.mav4
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!