We Keep Coding

Full screen responsive menu still clickable when closed

I am working on a website and I have included a full-screen menu that drops in when the menu icon is clicked. However, I am running into an issue where the menu items (buttons) are still clickable when the menu is closed.
I am using React.js + Scss.
const MyNav = () => {
const toggleClass = (element, stringClass) => {
if(element.classList.contains(stringClass))
element.classList.remove(stringClass);
else
element.classList.add(stringClass);
}
useEffect(() => {
const body = document.querySelector('body');
const menu = document.querySelector('.menu-icon');
menu.addEventListener('click', () => toggleClass(body, 'nav-active'));
},[]);
console.log("this is being loaded");
return (
<>
<div class="menu-icon">
<span class="menu-icon__line menu-icon__line-left"></span>
<span class="menu-icon__line"></span>
<span class="menu-icon__line menu-icon__line-right"></span>
</div>
<div class="nav">
<div class="nav__content">
<ul class="nav__list">
<li class="nav__list-item">Home</li>
<li class="nav__list-item">About</li>
<li class="nav__list-item">Portfolio</li>
<li class="nav__list-item">Journal</li>
<li class="nav__list-item">Contact</li>
</ul>
</div>
</div>
</>
)
}
export default MyNav;
$font--color:var(--primary);
$font--color--active:var(--primary);
$transition--length: .8;
//default state
.menu-icon{
$size: 30px;
height: $size;
width: $size;
position: fixed;
z-index:2;
left: 50px;
top: 30px;
cursor: pointer;
&__line{
height: 2px;
width: $size;
display: block;
background-color: $font--color;
margin-bottom: 4px;
transition: transform .2s ease, background-color .5s ease;
}
&__line-left{
width: $size / 2;
}
&__line-right{
width: $size / 2;
float: right;
}
}
.nav{
$width: 100vw;
$height: 100vh;
$font--size--calc: calc(2vw + 10px);
$transition--easing: cubic-bezier(.77,0,.175,1);
position: fixed;
z-index:1;
&:before,&:after{
content: "";
position: fixed;
width:$width;
height:$height;
background: rgba(#eaeaea, .2);
z-index: -1;
transition: transform $transition--easing $transition--length + s;
transform: translateX(0%) translateY(-100%);
}
&:after{
background: var(--highlight);
transition-delay: 0s;
}
&:before{
transition-delay: .1s;
}
&__content{
position: fixed;
top:50%;
transform: translate(0%,-50%);
width: 100%;
text-align: center;
font-size: $font--size--calc;
font-weight: 200;
cursor: pointer;
}
&__list-item{
position: relative;
display: inline-block;
transition-delay: $transition--length + s;
opacity: 0;
transform: translate(0%, 100%);
transition: opacity .2s ease, transform .3s ease;
margin-right: 25px;
&:before{
content: "";
position: absolute;
background: $font--color--active;
width: 20px;
height: 1px;
top: 100%;
transform: translate(0%, 0%);
transition: all .3s ease;
z-index: -1;
}
&:hover{
&:before{
width: 100%;
}
}
}
}
//active state
body.nav-active{
$menu--items--count: 5;
.menu-icon{
&__line{
background-color: var(--primary);
transform: translateX(0px) rotate(-45deg);
}
&__line-left{
transform: translateX(1px) rotate(45deg);
}
&__line-right{
transform: translateX(-2px) rotate(45deg);
}
}
.nav{
visibility:visible;
&:before,&:after{
transform: translateX(0%) translateY(0%);
}
&:after{
transition-delay: .1s;
}
&:before{
transition-delay: 0s;
}
&__list-item{
pointer-events: all;
opacity: 1;
transform: translateX(0%);
transition: opacity .3s ease, transform .3s ease, color .3s ease;
#for $i from 0 through $menu--items--count {
&:nth-child(#{$i}){
transition-delay: $transition--length * $i / 8 + .5 + s;
}
}
}
}
}
Bonus points if you can tell me how to not have the site scrollable when the menu is open.
Thanks!

You need to have the visibility property set to hidden on the nav when it is not visible like this
.nav{
$width: 100vw;
$height: 100vh;
//add this when nav is not active by default
visibility: hidden;
transition:visibility .3s cubic-bezier(.77,0,.175,1);
$font--size--calc: calc(2vw + 10px);
$transition--easing: cubic-bezier(.77,0,.175,1);
position: fixed;
z-index:1;
.
.
.
}
To remove the scrollbar when menu is open you can set the overflow hidden on body using .nav-active class only
body.nav-active{
overflow:hidden;
$menu--items--count: 5;
.menu-icon{
.
.
.
}
Hope this helps !

Hiding block from top to bottom

I have a filter , on click I'm hiding it. It has transition property and it goes from BOTTOM to TOP . I have recorded my screen , you can check it here https://pics.rocketfirm.com/jamilya/Screencast_14-48_13-08-2019.mp4 . The problem is I need to hide it from TOP to BOTTOM. Making same thing but opposite way , ending up when filter button shows up .
.filter-block {
background-color: #fff;
padding: 20px 0 1px;
position: relative;
transition: max-height 0.5s ease, padding 0.5s ease 0.3s;
> .container {
transition: opacity 0.5s ease-in 0.2s;
opacity: 1;
}
&--hide {
max-height: 0;
padding: 0;
overflow: hidden;
> .container {
transition: opacity 0.5s ease-in-out;
opacity: 0;
}
}
}
<div className={cn('filter-block', {
'filter-block--hide ': !showMainFilter
})}> code inside </div>

$('.shide').click(function(){
$(this).next().slideToggle();
});
.slidediv {
height:300px;
background-color: red;
color: #fff;
padding:20px;
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shide">Show/hide</div>
<div class="slidediv">
Hi Man. </div>
Look at: http://jsfiddle.net/uniak/249ybqgv/

back to top button doesn't hide

i am new to jquery. i am making a back to top arrow for my website, i have a problem about hiding the back to top button. It always show and never hide. All i want is to hide the button first and after maybe 90px height it will show again. Please help me with this.
Here is my jquery script from the top of my header:
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 90) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0}, 800);
return false;
});
});
});
</script>
Here is my back to top HTML :
<a id="back-top" href="#top">
<i id="back-topi" class="fa fa-arrow-circle-up"></i>
</a>
my css :
#back-top {
display: block !important;
background: none;
margin: 0;
position: fixed;
bottom: 50px;
right: 45%;
width: 40px;
height: 40px;
z-index: 100;
text-decoration: none;
color: #ffffff;
background-color: rgba(163,15,15,0.4);
border-radius: 8px !important;
}
#back-topi {
display: block !important;
font-size: 40px;
}

You have to change your CSS as well as jQuery as:
Code Snippet
$(document).ready(function(e) {
// browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 1200,
//duration of the top scrolling animation (in ms)
scroll_top_duration = 700,
//grab the "back to top" link
$back_to_top = $('#back-top');
//hide or show the "back to top" link
$(window).scroll(function() {
($(this).scrollTop() > offset) ? $back_to_top.addClass('is-visible'):
$back_to_top.removeClass('is-visible is-fade-out');
if ($(this).scrollTop() > offset_opacity) {
$back_to_top.addClass('is-fade-out');
}
});
//smooth scroll to top
$back_to_top.on('click', function(event) {
event.preventDefault();
$('body,html').animate({
scrollTop: 0,
}, scroll_top_duration);
});
});
body {
height: 1000px;
margin: 0;
padding: 0;
}
#back-top {
display: inline-block;
background: none;
margin: 0;
position: fixed;
bottom: 50px;
right: 45%;
width: 40px;
height: 40px;
z-index: 100;
text-decoration: none;
color: #ffffff;
background-color: rgba(163, 15, 15, 0.4);
border-radius: 8px;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
#back-topi {
font-size: 40px;
}
#back-top.is-visible,
#back-top.is-fade-out,
#back-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
#back-top.is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
#back-top:hover {
background-color: #0180ca;
opacity: 1;
}
#back-top:hover,
#back-top:active,
#back-top:focus {
outline: none;
text-decoration: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="back-top" href="#top">
<i id="back-topi" class="fa fa-arrow-circle-up"></i>
</a>

When you scroll you (top > 90) you need to show it with command
$("#back-top").show();
Edit
The thing is !important tag overrides display:none tag.
Just remove it (on css)
display:none;

Having packery grid items have opacity layer over them for hovering

I am trying to mimic this animation over my grid items in my packery grid when the user hovers over them (note the grid items contain background images):
http://thefoxwp.com/portfolio-packery-4-columns/
To do this they use the technique highlighted here:
https://jsfiddle.net/q0d2rqt0/5/
where a overlay div is hidden underneath another div to act like another layer on top of it:
.box {
position: absolute;
//background: blue;
width: 100%;
height: 100%;
background-image: url("http://lorempixel.com/380/222/nature");
}
.overlay {
position: absolute;
z-index: 1;
opacity: 0;
width: 100%;
height: 100%;
background: white;
-webkit-transition: opacity 0.25s ease-out;
-moz-transition: opacity 0.25s ease-out;
-o-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
}
.overlay:hover {
opacity: 1.0;
}
<div class="wrapper">
<div class="box">
</div>
<div class="overlay">
</div>
</div>
I am trying to accomplish this with my packery grid, but I am unsure how I can accomplish this because I do not know how to make my overlay div layer move along with my packery grid when it acts responsively.
I can identify the hover effect over each item in the grid fine with:
$container.on('mouseenter', ".item", function (event) {
var target = event.target;
var $target = $(target);
//code here to make the opacity adjustment to white on hover on
});
$container.on('mouseleave', ".item-", function (event) {
var target = event.target;
var $target = $(target);
//code here to make the opacity adjustment reverse when hover away
});
So I have identified the hovering mechanism here with the correct grid item no matter where its location is, but I am having trouble with the CSS to make the opacity go to white on hover without an overlay div layer.
Item Css:
.item1 {
padding: 5px;
width: 250px;
height: 250px;
-webkit-filter: saturate(1);
filter: saturate(1);
}
.item-content1 {
width: 100%;
height: 100%;
background-size: 100% 100%;
border:1px solid #021a40;
-webkit-transition: width 0.4s, height 0.4s;
-moz-transition: width 0.4s, height 0.4s;
-o-transition: width 0.4s, height 0.4s;
transition: width 0.4s, height 0.4s;
}
.item1.is-expanded {
width: 375px;
height: 400px;
}
.item1:hover {
cursor: pointer;
}
.item1:hover .item-content1 {
}
.item1.is-expanded {
z-index: 2;
}
.item1.is-expanded .item-content1 {
}
.item1.is-viewed {
opacity: 0.8;
-webkit-filter: sepia(1) hue-rotate(200deg);
filter: sepia(1) hue-rotate(200deg);
}
Any idea? Can I simply add something to image: hover with a webkit transition? Am I misunderstanding the concept of an opacity layer here since I am using a background image for my grid? The problem seems to be that background image is not animatable.

If i understand correctly,
Best practice is to use a container with 'overflow:hidden', and hide the masked content with 'transform: translate' with height equal to the container. 100% width will work responsively with any content.
codepen
css:
.container {
width: 300px;
position: relative;
margin: 0 auto;
height: 300px;
overflow:hidden;
}
.org-content {
background: red;
height: 300px;
}
.mask {
height: 300px;
top: 300px;
width: 100%;
background-color: #3aa6db;
opacity: 0;
transition: all ease-in 0s;
left: 0;
overflow: hidden;
position: absolute;
pointer-events: none;
}
.container:hover>.mask {
opacity: 1;
transition: all ease-out 0.2s;
transform: translate(0px, -300px);
transition: all ease-in 0.25s;
}
html:
<div class='container'>
<div class="mask">
masked content
</div>
<div class='org-content'>
original content
</div>
</div>

CSS3 (or jQuery) Background Color Animation Vertically from Center of div

I'm trying to create an effect like the right nav on this site:
http://dianabobar.com/
With jQuery. The way the color opens up from the middle is the effect I'm going for but unfortunately that site is done in Flash so I don't have the option of studying how it's done. I'm not really sure what to search for. I was thinking something like 'background radial animation jquery' or 'background color animation from center jquery.'
I also considered a CSS3 ease-in like they've detailed here (Expand background from center (CSS / Javascript)). The problem is that the answer on this question is only showing the CSS3 transition working horizontal when I'll need it to work vertically. I've worked with the JSFiddle that they were using on the answer (http://jsfiddle.net/SNzgs/) but I can only seem to get the transition to animate going down from the top and not out from the center. The code they have is:
.redline {background:red;height:10px;width:0;margin:auto;}
.container:hover .redline {
width:200px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}
The code I tried was:
.redline {background:red;height:0px;width:10px;margin:auto;}
.container:hover .redline {
height:200px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}
Thanks for your help!

My solution is similar to that of by matewka, but uses both :before and :after pseudo-elements. The example markup is as follow:
<nav>
<ul>
<li>Link</li>
</ul>
</nav>
For the CSS:
nav ul {
list-style: none;
width: 6em;
}
nav ul li {
background-color: #eee;
position: relative;
}
nav ul li:before,
nav ul li:after {
background-color: #333;
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
top: 50%; /* Vertically positions pseudo elements in the center */
bottom: 50%; /* Vertically positions pseudo elements in the center */
transition: all .125s ease-in-out;
z-index: 50;
}
nav ul li a {
color: #333;
display: block;
padding: .5em 1em;
position: relative;
z-index: 100;
transition: all .125s ease-in-out;
}
nav ul li a:hover {
color: #eee;
}
nav ul li:hover:before {
top: 0; /* Forces :before to stretch to fill top half */
}
nav ul li:hover:after {
bottom: 0; /* Forces :after to stretch to fill bottom half */
}
http://jsfiddle.net/teddyrised/rRtmB/

You can easily do it with :after pseudo element and absolute positioning. Then you can combine height and top properties of that shading box.
I made a completely new fiddle: http://jsfiddle.net/SNzgs/5/ since yours was built to do the job horizontaly.
.container:after {
content: "";
display: block;
background: #ccc;
width: 100%;
height: 0;
top: 0.5em;
position: absolute;
left: 0;
transition: all 1s ease-out;
}
.container:hover:after {
top: 0;
height: 100%;
}

You can use the :after pseudo element to create the animating background:
CSS
ul {
margin: 0;
padding: 0;
}
ul > li {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
ul > li > a {
display: block;
padding: 10px;
color: #000000;
text-decoration: none;
position: relative;
z-index: 10;
-webkit-transition: all 400ms;
transition: all 400ms;
}
ul > li:hover > a {
color: #ffffff;
}
ul > li:after {
content: " ";
position: absolute;
top: 50%;
bottom: 50%;
left: 0;
right: 0;
background: #353535;
z-index: 0;
-webkit-transition: all 400ms;
transition: all 400ms;
}
ul > li:hover:after {
top: 0;
bottom: 0;
}
HTML
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
Demo

This works (though I'm not sure this is exactly what you want):
.container {height:100px;width:200px;background:#eee;position:relative;}
.container span {display:block;}
.greyline {background:#ccc;height:10px;width:200px;position:absolute;bottom:0;}
.redline {background:red;height:0;width:200px;margin:auto; top:5px;position:relative;}
.container:hover .redline {
height:10px;
top: 0px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}

You can recreate a similar effect with few modifications at your fiddle:
<div class="container">
<span class="vertgrey">
<span class="vertredline"></span>
</span>
<span class="greyline">
<span class="redline"></span>
</span>
</div>
and the css:
.container {height:100px;width:200px;background:#eee;position:relative;}
.container span {display:block;}
.greyline {background:#ccc;height:10px;width:200px;position:absolute;bottom:45px;}
.redline, .vertredline {background:red;height:10px;width:0;margin:auto;}
.vertgrey {
background: #CCC;
height: 100%;
position: absolute;
width: 10px;
left: 90px;
}
.container:hover .redline {
width:200px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}
.container:hover .vertredline {
height:100%;
width: 10px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}
This is the link to the updated fiddle: http://jsfiddle.net/SNzgs/4/

Here's my shot at a solution for you:
fiddle: http://jsfiddle.net/itsmikem/gF28Y/
css:
.container {height:100px;width:200px;background:#eee;position:absolute;}
.greyline {display:block;position:relative;background:#000;height:0%;width:100%;}
.redline {display:block;position:relative;background:#f00;height:0%;width:100%;margin-top:50px;}
.container:hover .redline {
margin-top:0px;
height:100px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}
html:
<div class="container">
<div class="greyline">
<div class="redline"></div>
</div>
</div>