Hướng dẫn làm Mobile Menu - CSS không dùng Jquery cho Wordpress

overlay

ec6451

Hướng dẫn làm Mobile Menu - CSS không dùng Jquery cho Wordpress

Cách phòng tránh OWASP Top 10 Security Risk

Đại học KHTN - Các module cơ bản cho các bạn học ngôn ngữ Ruby

Hiểu rõ 10 method xử lý mảng trong Javascript để lập trình tốt hơn

Cách phòng tránh OWASP Top 10 Security Risk

Đại học KHTN - Các module cơ bản cho các bạn học ngôn ngữ Ruby

Hiểu rõ 10 method xử lý mảng trong Javascript để lập trình tốt hơn

Hiểu rõ tường tận từng chút về async và defer trong jQuery

Cấu trúc Angular Apps các thành phần Angular trong năm 2021

Share Everywhere

Table of contents

1. HTML

<body>
<input type="checkbox" id="overlay-input" />
<label for="overlay-input" id="overlay-button"><span></span></label>
  <div id="overlay">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</body>

2. CSS

body {
  background: #87cc77;
  margin: 0;
  font-family: arial;
  width: 100vw;
  height: 100vh;
  animation: bugfix infinite 1s;
  -webkit-animation: bugfix infinite 1s;
}

@keyframes bugfix { from {padding:0;} to {padding:0;}}
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;}}

#overlay-button {
  position: absolute;
  right: 2em;
  top: 3em;
  padding: 26px 11px;
  z-index: 5;
  cursor: pointer;
  user-select: none;
  span {
      height: 4px;
      width: 35px;
      border-radius: 2px;
      background-color: white;
      position: relative;
      display: block;
      transition: all .2s ease-in-out;
      &:before {
        top: -10px;
        visibility: visible;
      }
      &:after {
        top: 10px;
      }
      &:before, &:after {
          height: 4px;
          width: 35px;
          border-radius: 2px;
          background-color: white;
          position: absolute;
          content: "";
          transition: all .2s ease-in-out;
      }
    }
    &:hover span, &:hover span:before, &:hover span:after {
      background: #333332;
    }
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox]:checked ~ #overlay {
  visibility: visible;
}

input[type=checkbox]:checked ~ #overlay-button {
  &:hover span, span{
    background: transparent;
  }
  span {
    &:before {
      transform: rotate(45deg) translate(7px, 7px);
      opacity: 1;
    }
    &:after {
      transform: rotate(-45deg) translate(7px, -7px);
    }
  }
}

#overlay {
  height: 100vh;
  width: 100vw;
  background: #ec6451;
  z-index: 2;
  visibility: hidden;
  position: fixed;
  &.active {
    visibility: visible;
  }
  ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    height: 100vh;
    padding-left: 0;
    list-style-type: none;
    li {
      padding: 1em;
      a {
        color: white;
        text-decoration: none;
        font-size: 1.5em;
        &:hover {
          color: #333332;
        }
      }
    }
  }
}