Menubar blur content

Developer
Andreas Neeven
Size
3,942 Kb
Views
32,384
  1. Menubar blur content Previews
  2. Menubar blur content HTML Codes
  3. Menubar blur content CSS Codes
  4. Menubar blur content JS Codes

How do I make an menubar blur content?

Quick and dirty concept. Menu triggers overlay that shows navigation and blurs the content under it. Have fun!. What is a menubar blur content? How do you make a menubar blur content? This script and codes were developed by Andreas Neeven on 18 September 2022, Sunday.

Menubar blur content Previews
IQ Test

Menubar blur content - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Menubar blur content</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <i class="iphone-5s">	<div class="overlay"></div>	<div class="overlay-trigger">menu</div>	<nav role='navigation'>	<a href="#">Home</a>	<a href="#">Blog</a>	<a href="#">Lab</a>	<a href="#">About</a>	</nav>	<div class="content">	<h1>Lorem ipsum dolor sit amet</h1>	<img src="http://lorempixel.com/output/nature-q-c-640-480-3.jpg" alt="" />	<p>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.	</p>	</div>
</i> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Menubar blur content - Script Codes CSS Codes

/* Credits for the iPhone go to: https://codepen.io/alikhalilifar/pen/Jrlbc
*/
* { margin: 0; padding: 0;
}
body { background: #4A90E2;
}
.iphone-5s { width: 30px; height: 30px; background: #f3f3f3; display: inline-block; width: 11.7em; height: 19.826em; border-radius: 1.4018em; border: 1px solid #333; border-width: 3.712em .9em; box-shadow: 0 7px #D2D7D8; position: relative; left: 50%; top: 50%; margin-left: -5.85em; margin-top: 2em;
}
.iphone-5s:before { content: ""; width: 50px; height: 5px; background: #f3f3f3; position: absolute; z-index: 10; top: -30px; margin: 0 auto; border-radius: 10px; left: 69px;
}
.iphone-5s:after { content: ""; border-radius: 50%; bottom: -48px; position: absolute; border: 4px solid #D5D5D5; width: 30px; height: 30px; left: 75px;
}
.content { font-size: 12px; font-style: normal; margin: 10px;
}
.content h1 { font-size: 18px;
}
.content p { position: relative; height: 10em;
}
.content img { position: relative; width: 100%; height: auto; margin-bottom: 5px;
}
nav { position: absolute; width: 100%; height: 100%; display: none; z-index: 9000;
}
nav a { display: block; width: 100%; text-align: center; margin-top: 40px; text-decoration: none; color: white; font-style: normal; font-weight: inherit; -webkit-transition: color 0.2s ease-in; transition: color 0.2s ease-in;
}
nav a:hover { color: #50E3C2;
}
.overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(51, 51, 51, 0.6); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s, visibility 0.5s; transition: opacity 0.5s, visibility 0.5s;
}
.overlay.open { opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s;
}
.overlay-trigger { position: relative; border-bottom: 1px solid #333; margin-top: 5px; padding-bottom: 5px; font-size: 16px; font-style: normal; text-align: center; cursor: pointer; text-decoration: none; z-index: 90;
}
.overlay-trigger:after { content: '\25B4'; position: relative; left: 3px; display: inline-block;
}
.overlay.open + .overlay-trigger { border-bottom: 1px solid #D8D8D8;
}
.overlay.open + .overlay-trigger { color: #D8D8D8;
}
.overlay.open + .overlay-trigger:after { top: 3px; color: #D8D8D8; -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.blur { -webkit-filter: blur(10px); filter: blur(10px);
}

Menubar blur content - Script Codes JS Codes

 var content = $('.content'); var overlay = $('.overlay'); var overlayTrigger = $('.overlay-trigger'); overlayTrigger.on('click', function() { if(!overlay.hasClass('open')) { overlay.addClass('open'); content.addClass('blur');	$('nav').css('display', 'block'); } else { overlay.removeClass('open'); content.removeClass('blur');	$('nav').css('display', 'none'); } });
Menubar blur content - Script Codes
Menubar blur content - Script Codes
Home Page Home
Developer Andreas Neeven
Username aneeven
Uploaded September 18, 2022
Rating 3
Size 3,942 Kb
Views 32,384
Do you need developer help for Menubar blur content?

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!

Andreas Neeven (aneeven) Script Codes
Name
Spinning Loader
Yay for blend-modes
Yet another card...
Mail Element Concept
Neon Hexagons SVG Image-Fill
Flexbox grow, shrink and basis
Flexbox Demo
Some card animation
SVG Heart Animation
Flexbox align
Create amazing Facebook ads 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!