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
Add new comment