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

Written by Tommy
Posted on Wed, 08/25/2021 - 17:51
10 views

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;
        }
      }
    }
  }
}

3. JS 

Không sữ dụng trong Wordpress luôn nha mọi người

4. Hình ảnh

Dùng hình ảnh để tưởng tượng dễ hơn

Dùng hình ảnh để tưởng tượng dễ hơn

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
6 + 8 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
Profile picture for user Tommy
Câu nói tâm đắc: “Điều tuyệt với nhất trong cuộc sống là làm được những việc mà người khác tin là không thể!”