Mobile Menu open close

by marusti

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <input type="checkbox" id="responsive-nav">
  <label for="responsive-nav" class="responsive-nav-label">Menü</label>
  <div class="overlay">
  <a href="#">X</a>
  </div>

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
}

body {}

input[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

label {
  display: block;
  position: relative;
  margin-left: 25px;
}

label::before {
  display: block;
  position: absolute;
  left: -25px;
  font-family: 'FontAwesome';
}

label::before {
  content: '\f0c9'; /* close */
}

input:checked+label::before {
  content: '\f00d';  /* open */
}
.overlay {visibility:hidden}
input:checked ~ .overlay {visibility: visible;    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;}