Side Navigation with Overlay Effect
Written by 9 April 2023
Side navigation menu with an overlay effect for emphasis.
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 Overlay 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 : 1s;
}
/* 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;
min-width: 15rem;
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;
}
.menu > .menu__exit *{
font-size: 2rem;
}
.menu > .menu__items{
padding-top: 0.5rem;
padding-left: 0;
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{
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="">About</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 menu with an overlay effect for emphasis.
*/
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";
}, 1000);
}
})
}
</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:
john.mav4, gech, ben.reed@laingbuisson.com, javaboy, Estevan Belo
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!