Full screen menu

Developer
Gianluca Guarini
Size
3,702 Kb
Views
16,192
  1. Full screen menu Previews
  2. Full screen menu HTML Codes
  3. Full screen menu CSS Codes
  4. Full screen menu JS Codes

How do I make an full screen menu?

Full screen menu using css filters. What is a full screen menu? How do you make a full screen menu? This script and codes were developed by Gianluca Guarini on 04 November 2022, Friday.

Full screen menu Previews
IQ Test

Full screen menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Full screen menu </title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main> <img src="https://placeimg.com/1024/768/people" /> <h1 class="title">click da menu</h1> <aside> <h1>Click da menu</h1> <h2>by @gianlucaguarini</h2> </aside>
</main>
<nav class="menu"> <ul> <li> Home </li> <li> About </li> <li> Contact </li> </ul>
</nav>
<label class="trigger"> MENU <input type="checkbox" />
</label> <script src="js/index.js"></script>
</body>
</html>

Full screen menu - Script Codes CSS Codes

.menu-opened main { -webkit-filter: blur(3px) grayscale(100%); filter: blur(3px) grayscale(100%);
}
body { overflow: hidden; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; background: black;
}
main { position: relative; height: 100vh; width: 100%; background: black; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s;
}
.menu-opened main { -webkit-transform: scale(0.85); transform: scale(0.85);
}
main .title { color: #d5dea6; font-size: 4rem; font-weight: 600; text-align: right; width: 200px; background: black; padding: 2rem; text-shadow: 1px 1px 1px black; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
main img { min-width: 100%; min-height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.trigger { position: fixed; top: 20px; right: 10px; cursor: pointer; color: white; font-size: 1.6rem; font-weight: bold; text-shadow: 0 0 2px black;
}
.trigger input { opacity: 0;
}
.menu { position: fixed; top: 0; left: 0; bottom: 0; right: 0; color: white; background: rgba(0, 0, 0, 0.5); opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); pointer-events: none; -webkit-transition: all 0.3s; transition: all 0.3s;
}
.menu-opened .menu { opacity: 1; -webkit-transform: scale(1); transform: scale(1); pointer-event: default;
}
.menu ul { font-size: 4rem; line-height: 5rem; text-align: center; font-weight: 900; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.menu ul li { text-shadow: 0 0 10px black;
}
aside { position: fixed; color: #fff; text-align: right; bottom: 0; right: 0; padding: 1rem 2rem 0; line-height: 2.3rem; font-style: oblique; font-family: Georgia; background: black;
}
aside h1 { font-weight: normal; font-size: 20px; line-height: 10px;
}
aside h2 { color: #666; font-weight: normal; font-size: 13px;
}

Full screen menu - Script Codes JS Codes

'use strict';
var $ = function $(sel, ctx) { return (ctx || document).querySelector(sel);
}, on = function on(el, ev, fn) { return el.addEventListener(ev, fn);
};
var trigger = $('.trigger input'), html = $('html');
on(trigger, 'change', function (e) { return trigger.checked ? html.classList.add('menu-opened') : html.classList.remove('menu-opened');
});
Full screen menu - Script Codes
Full screen menu - Script Codes
Home Page Home
Developer Gianluca Guarini
Username GianlucaGuarini
Uploaded November 04, 2022
Rating 3
Size 3,702 Kb
Views 16,192
Do you need developer help for Full screen menu?

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!

Gianluca Guarini (GianlucaGuarini) Script Codes
Name
The Fly
Threejs-amd-bootstrap
Drunk on Google Maps
Fancy 404
Site under construction
The Best Flash Site Ever
The Dark Loop
Colored Wall
The 3D Worrying Cubes
Appletv
Create amazing sales emails 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!