Solution 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):
enter image description here

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>

Problem :

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>

By

Leave a Reply

Your email address will not be published. Required fields are marked *