Menu Overlay

Developer
Patrick
Size
4,302 Kb
Views
10,120
  1. Menu Overlay Previews
  2. Menu Overlay HTML Codes
  3. Menu Overlay CSS Codes
  4. Menu Overlay JS Codes

How do I make an menu overlay?

What is a menu overlay? How do you make a menu overlay? This script and codes were developed by Patrick on 21 November 2022, Monday.

Menu Overlay Previews
IQ Test

Menu Overlay - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Menu Overlay</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *, *:before, *:after { box-sizing: border-box;
}
html, body, main, nav { height: 100%;
}
html { font-size: 62.5%; background: orange;
}
body { margin: 0; background: lightBlue; font: 1.4rem "Helvetica Neue", sans-serif;
}
main { padding: 50px;
}
blockquote { border-left: 5px solid rgba(0, 0, 0, 0.2); padding: 15px 0 15px 20px; font-style: italic;
}
.navToggle { position: fixed; top: 50px; right: 50px; z-index: 10; text-align: center;
}
.navToggle:hover { cursor: pointer;
}
.navToggle:hover .menu, .navToggle:hover .menu:before, .navToggle:hover .menu:after { background: white;
}
.navToggle:hover .menuOn { background: transparent;
}
.menu, .menu:before, .menu:after { position: relative; display: inline-block; width: 30px; height: 5px; background: #ff274d; transition: 0.3s;
}
.menu:before, .menu:after { content: ""; position: absolute; left: 0;
}
.menu:before { top: 10px;
}
.menu:after { bottom: 10px;
}
.menuOn { background: transparent;
}
.menuOn:before { top: 0; transform: rotate3d(0, 0, 1, 45deg);
}
.menuOn:after { bottom: 0; transform: rotate3d(0, 0, 1, -45deg);
}
nav { /* display: none; */ position: fixed; z-index: -1; top: 0; left: 100%; width: 100%; height: 100%; padding: 50px 125px 50px 50px; transition: all .2s ease-in-out; color: #fff;
}
nav a { color: #fff; text-decoration: none;
}
nav a:hover { color: red;
}
nav.navOn { display: block; z-index: 5; left: 0; background: rgba(0, 0, 0, 0.9);
}
nav ul { list-style: none; padding: 0; margin: 0;
}
nav ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
nav ul li a { display: block; padding: 20px; font-weight: 100; font-size: 4rem; text-transform: lowercase;
}
nav ul li a:hover { color: #ff274d;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <main> <section> <div> <h1>Lorem ipsum dolor sit amet</h1> <p>Consectetur adipiscing elit. Nunc a commodo tellus. Integer consectetur risus quis lacus volutpat, porta congue lorem hendrerit. Vivamus lobortis, lorem at euismod faucibus, nibh nisl aliquet lacus, ac ornare nulla nunc eget libero. Vivamus rhoncus ullamcorper libero, vel lacinia orci mollis sed.</p> <blockquote>Aliquam quis tristique libero. Suspendisse laoreet aliquet nulla. Nullam eros sapien, porttitor sed lorem et, tempor eleifend leo.</blockquote> <p>Nullam quis arcu et nibh malesuada dictum. Nam quis sapien rutrum, auctor diam ac, tempus odio. Proin a tellus vulputate, mollis elit et, bibendum elit. Phasellus tincidunt sit amet leo ac pharetra. Aliquam molestie odio massa, sit amet dignissim ipsum dictum in.</p> </div> </section>
</main>
<div class="navToggle"><span class="menu"></span></div>
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Menu Overlay - Script Codes CSS Codes

*, *:before, *:after { box-sizing: border-box;
}
html, body, main, nav { height: 100%;
}
html { font-size: 62.5%; background: orange;
}
body { margin: 0; background: lightBlue; font: 1.4rem "Helvetica Neue", sans-serif;
}
main { padding: 50px;
}
blockquote { border-left: 5px solid rgba(0, 0, 0, 0.2); padding: 15px 0 15px 20px; font-style: italic;
}
.navToggle { position: fixed; top: 50px; right: 50px; z-index: 10; text-align: center;
}
.navToggle:hover { cursor: pointer;
}
.navToggle:hover .menu, .navToggle:hover .menu:before, .navToggle:hover .menu:after { background: white;
}
.navToggle:hover .menuOn { background: transparent;
}
.menu, .menu:before, .menu:after { position: relative; display: inline-block; width: 30px; height: 5px; background: #ff274d; transition: 0.3s;
}
.menu:before, .menu:after { content: ""; position: absolute; left: 0;
}
.menu:before { top: 10px;
}
.menu:after { bottom: 10px;
}
.menuOn { background: transparent;
}
.menuOn:before { top: 0; transform: rotate3d(0, 0, 1, 45deg);
}
.menuOn:after { bottom: 0; transform: rotate3d(0, 0, 1, -45deg);
}
nav { /* display: none; */ position: fixed; z-index: -1; top: 0; left: 100%; width: 100%; height: 100%; padding: 50px 125px 50px 50px; transition: all .2s ease-in-out; color: #fff;
}
nav a { color: #fff; text-decoration: none;
}
nav a:hover { color: red;
}
nav.navOn { display: block; z-index: 5; left: 0; background: rgba(0, 0, 0, 0.9);
}
nav ul { list-style: none; padding: 0; margin: 0;
}
nav ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
nav ul li a { display: block; padding: 20px; font-weight: 100; font-size: 4rem; text-transform: lowercase;
}
nav ul li a:hover { color: #ff274d;
}

Menu Overlay - Script Codes JS Codes

$('.navToggle').click(function(){ $('.menu').toggleClass('menuOn'); $('nav').toggleClass('navOn');
})
Menu Overlay - Script Codes
Menu Overlay - Script Codes
Home Page Home
Developer Patrick
Username hinducows
Uploaded November 21, 2022
Rating 3
Size 4,302 Kb
Views 10,120
Do you need developer help for Menu Overlay?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Patrick (hinducows) Script Codes
Name
Hexagon v2
Simple Button
Item Display
Fixed Scrolling Backgrounds
Arrow Navigation
3D Transforms Flip
Overlay Drop Description
JQuery CSS Transition Content Slide-In
Sloppy Panels
Log In Modal
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!