Is there a way to implement a menu button that, when clicked, reveals a menu with blurred content in the background? And when clicked again, the content returns to normal?
Here's the current HTML structure:
<div class="menu">
<div class="line"></div>
<nav>
<ul>
<li><a target="_parent" href="">A</a></li>
<li><a target="_parent" href="">B</a></li>
<li><a target="_parent" href="">C</a></li>
<li><a target="_parent" href="">D</a></li>
</ul>
</nav>
</div>
The CSS styling used:
$square: 50px;
* {
@include box-sizing(border-box);
}
body {
background: #111;
font: 300 14px Consolas, system, monospace;
color: #fff;
}
.menu {
position: fixed;
height: $square;
width: $square;
cursor: pointer;
top: 0;
right: 0;
background: #fff;
@include transition(all 250ms ease-in-out);
z-index: 100;
overflow: hidden;
nav {
position: fixed;
left: 50%;
top: 50%;
@include transform(translateY(-50%) translateX(-50%));
opacity: 0;
@include transition(all 250ms linear 250ms);
pointer-events: none;
ul {
list-style-type: none;
padding: 0;
li a {
display: block;
padding: 10px;
text-decoration: none;
color: #000;
text-align: center;
&:hover {
background: #000;
color: #fff;
}
}
}
}
.line {
height: 5px;
width: $square - 10;
background: #000;
position: absolute;
top: ($square/2)-(5/2);
left: ($square - ($square - 10))/2;
@include transition(all 250ms linear);
&:after, &:before {
content: ' ';
height: 5px;
width: $square - 10;
background: #000;
position: absolute;
@include transition(all 250ms linear);
}
&:before {
top: -10px;
}
&:after {
bottom: -10px;
}
}
&.active {
width: 100%;
height: 100%;
nav {
opacity: 1;
pointer-events: all;
}
.line {
background: transparent;
&:before {
background: #000;
@include transform(rotate(-405deg));
top: 0px;
}
&:after {
background: #000;
@include transform(rotate(405deg));
bottom: 0px;
}
}
}
}
This JavaScript functionality is included:
$('.menu').click(function(){
$this = $(this);
if ($this.hasClass('active')) {
$this.removeClass('active');
}
else {
$this.addClass('active');
}
});
Your assistance on this matter would be greatly appreciated. Thank you.