Сделайте весь псевдоэлемент кликабельным - PullRequest
Новая
       6

Сделайте весь псевдоэлемент кликабельным

0 голосов
/ 20 апреля 2020

У меня есть меню гамбургера, которое создается с использованием псевдо before и after.

Проблема, с которой я сталкиваюсь, заключается в том, что интервал между этими элементами не кликабелен (показывает cursor: default) , Я ищу, чтобы весь div был кликабельным элементом и отображал div при клике, как показано ниже: 

$(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>

1 Ответ

1 голос
/ 20 апреля 2020

Если вы установите «после» + position:absolute, это будет результат: 

button:after{
  content: "clickable";  
  position: absolute;
  background: red;
}

button{
  cursor: pointer;
}
<button class="test">test</button>

И далее, вы положили перевод: 

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>

«Зеленое пространство» не активируется (и оно должно быть в вашем случае): enter image description here

Единственный способ решить эту проблему - установить высоту кнопки (а в вашем случае высота 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>

Посмотрите на код здесь (+ - та же техника до / после): 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>

Я не думаю, что есть способ исправить ваш код / ​​идею.

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...