Make entire pseudo element clickable - html

Question

I have a hamburger menu which is created using the before and after pseudo.
The issue I'm having is that the spacing between these elements is not clickable (showing cursor: default). I'm looking for the entire div to be a clickable item and show the div on click, as demo'd below:
$(function() {
$(".checkbox").click(function() {
$('.hamburgerMenu').toggleClass('open');
});
});
body{
padding: 40px;
background: lightgrey;
}
.megaMenu__hamburger {
position: relative;
order: 3;
width: 31px;
cursor: pointer;
}
.megaMenu__hamburger #hamburger-checkbox {
visibility: hidden;
display: none;
}
.megaMenu__hamburger #hamburger-checkbox:checked + label {
width: 0px;
}
.megaMenu__hamburger #hamburger-checkbox:checked + label:before {
transform: rotate(45deg) translate(0px);
-webkit-transform: rotate(45deg) translate(0px);
}
.megaMenu__hamburger #hamburger-checkbox:checked + label:after {
transform: rotate(-45deg) translate(0px);
-webkit-transform: rotate(-45deg) translate(0px);
}
.megaMenu__hamburger label {
width: 31px;
height: 3px;
border-radius: 5px;
background: red;
cursor: pointer;
transition: 0.6s;
position: absolute;
}
.megaMenu__hamburger label:before {
content: "";
width: 31px;
height: 3px;
background: red;
position: absolute;
transform: translateY(-10px);
-webkit-transform: translateY(-10px);
border-radius: 5px;
}
.megaMenu__hamburger label:after {
content: "";
width: 31px;
height: 3px;
background: red;
position: absolute;
transform: translateY(10px);
-webkit-transform: translateY(10px);
border-radius: 5px;
}
.hamburgerMenu{
display: none;
}
.open.hamburgerMenu{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="megaMenu__hamburger">
<input id="hamburger-checkbox" class="checkbox" type="checkbox">
<label for="hamburger-checkbox"></label>
</div>
<div class="hamburgerMenu">open</div>

Answer 1

If you set "after" + position:absolute this is the result:
button:after{
content: "clickable";
position: absolute;
background: red;
}
button{
cursor: pointer;
}
<button class="test">test</button>
And next, you put translated:
button:after{
content: "after";
position: absolute;
background: red;
transform: translateY(110px);
}
button{
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
height: 2rem;
left: 2rem;
position: fixed;
top: 2rem;
width: 3.6rem;
z-index: 2;
}
<button class="test"></button>
The "green space" not clickable (And it should in your case):
The only way I know to solve this is by setting the height of the button (And in your case the height is 0px width 0px)
button:after{
content: "after";
position: absolute;
background: red;
transform: translateY(30px);
}
button{
cursor: pointer;
height: 100px;
width: 200px;
position: relative;
z-index: 2;
}
<button class="test">test</button>
Look at the code here (+- the same technique of before/after):
https://jonsuh.com/hamburgers/
var el = document.querySelector('.hamburger');
el.onclick = function() {
el.classList.toggle('is-active');
}
/*!
* Hamburgers
* #description Tasty CSS-animated hamburgers
* #author Jonathan Suh #jonsuh
* #site https://jonsuh.com/hamburgers
* #link https://github.com/jonsuh/hamburgers
*/
.hamburger {
padding: 15px 15px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
background-color: lightgray;
overflow: visible;
}
.hamburger:hover {
opacity: .9;
}
.hamburger.is-active:hover {
opacity: .9;
}
/* lines color for X */
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
background-color: blue;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
/* three lines */
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 40px;
height: 2px;
background-color: red;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block;
}
/* line middle */
.hamburger-inner::before {
top: -10px;
background-color: orange;
}
/* line top */
.hamburger-inner::after {
bottom: -10px;
background-color: blue;
}
/*
* Boring
*/
.hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after {
transition-property: none; }
.hamburger--boring.is-active .hamburger-inner {
transform: rotate(45deg);
}
.hamburger--boring.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
}
.hamburger--boring.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
}
/*
* Collapse
*/
.hamburger--collapse .hamburger-inner {
top: auto;
bottom: 0;
transition-duration: 0.13s;
transition-delay: 0.13s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse .hamburger-inner::after {
top: -20px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}
.hamburger--collapse .hamburger-inner::before {
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse.is-active .hamburger-inner {
transform: translate3d(0, -10px, 0) rotate(-45deg);
transition-delay: 0.22s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--collapse.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}
.hamburger--collapse.is-active .hamburger-inner::before {
top: 0;
transform: rotate(-90deg);
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
<div class="hamburger hamburger--collapse">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
I don't think there is a way to fix your code/idea.
checkbox
If you want to put checkbox inside your hamburger try this (Of course hide the checkbox):
var el = document.querySelector('.hamburger');
var checkbox = document.querySelector('.checkbox');
var checked = true;
checkbox.checked = checked;
el.onclick = function() {
el.classList.toggle('is-active');
checked = !checked;
checkbox.checked = checked;
}
/*!
* Hamburgers
* #description Tasty CSS-animated hamburgers
* #author Jonathan Suh #jonsuh
* #site https://jonsuh.com/hamburgers
* #link https://github.com/jonsuh/hamburgers
*/
.hamburger {
padding: 15px 15px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
background-color: lightgray;
overflow: visible;
border-radius: 10px;
}
.hamburger:hover {
opacity: .7;
}
.hamburger.is-active:hover {
opacity: .7;
}
/* lines color for X */
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
background-color: black;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
/* three lines */
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 40px;
height: 2px;
background-color: red;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block;
}
/* line middle */
.hamburger-inner::before {
top: -10px;
background-color: orange;
}
/* line top */
.hamburger-inner::after {
bottom: -10px;
background-color: blue;
}
/*
* Boring
*/
.hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after {
transition-property: none; }
.hamburger--boring.is-active .hamburger-inner {
transform: rotate(45deg);
}
.hamburger--boring.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
}
.hamburger--boring.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
}
/*
* Collapse
*/
.hamburger--collapse .hamburger-inner {
top: auto;
bottom: 0;
transition-duration: 0.13s;
transition-delay: 0.13s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse .hamburger-inner::after {
top: -20px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}
.hamburger--collapse .hamburger-inner::before {
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse.is-active .hamburger-inner {
transform: translate3d(0, -10px, 0) rotate(-45deg);
transition-delay: 0.22s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--collapse.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}
.hamburger--collapse.is-active .hamburger-inner::before {
top: 0;
transform: rotate(-90deg);
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
<div class="hamburger hamburger--collapse">
<div class="hamburger-box">
<div class="hamburger-inner">
<input id="hamburger-checkbox" class="checkbox" type="checkbox">
<label for="hamburger-checkbox"></label>
</div>
</div>
</div>
<br><br>
<br>
<br>
<a target="_blank" href="https://jonsuh.com/hamburgers">https://jonsuh.com/hamburgers</a>