How to detect click on the focus button using just css3?

663
February 21, 2017, at 2:33 PM

is there any option to detect once visitor click again on the :focus element?

https://codepen.io/danzawadzki/pen/LxKMMz

Trigger

// Site Trigger
.site-menu-trigger {
  background: none;
  border: none;
  align-item: flex-end;
  z-index: 10;
  right: 20px;
  top: 20px;
  width: $trigger-width;
  height: $trigger-height;
  border-top: solid #fff $trigger-border-weight;
  position: relative;
  transition: all .5s linear;
  &:before,
  &:after {
    content: "";
    border-top: solid #fff $trigger-border-weight;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(($trigger-height * 0.5 - ($trigger-border-weight)));
    transition: all .5s linear;
  }
  &:after {
    transform: translateY($trigger-height - $trigger-border-weight);
  }
  &:focus {
    transform: rotate(45deg) translateX(-$trigger-width*.01) translateY($trigger-height*.5);
    & ~ .site-menu {
      transform: translateX(0%);
    }
    &:before {
      border-top: solid #fff 0;
    }
    &:after {
      transform: rotate(-90deg) translateX($trigger-width * .1);
    }
  }
}

I'm trying to build css-only hamburger sidebar menu. Currently I'm using focus selector, so once someone activate sidebar, he needs to click somewhere outside trigger to hide it. I would preffer to add also this option once someone click in the tigger second time (that's why im changing icon).

Second things is underline. Now it's block and taking whole available width. I would like to make it same width, as a link. Is it possible?

READ ALSO
Is body a parent tag for internal div?

Is body a parent tag for internal div?

I've started to learn html and css and encountered some misunderstanding

557
Bootstrap validation : 2 glyphicons are overlapping

Bootstrap validation : 2 glyphicons are overlapping

I have validation for 2 fields which are country code and actual mobile numberI have attached screenshot

647
Select Html row and get selected data

Select Html row and get selected data

I am trying to click on a html row and get all the elements but i can't figure it out,below are my HTML Land java script codes, Help!

468