#menuToggle { display: block; position: relative; top: -10px; left: 10px; z-index: 1; -webkit-user-select: none; user-select: none; } #menuToggle a { text-decoration: none; color: #7e7e7e; font-family: 'Microsoft Yahei'; transition: color 0.3s ease; } #menuToggle a:hover { color: white; } #menuToggle input{ display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: 2px; cursor: pointer; opacity: 0; z-index: 2; -webkit-touch-callout: none; } #menuToggle span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: #cdcdcd; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease; } #menuToggle span:first-child { transform-origin: 0% 0%; } #menuToggle span:nth-last-child(2) { transform-origin: 0% 100%; } #menuToggle input:checked~span { opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #FCFCFC; } #menuToggle input:checked~span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); } #menuToggle input:checked~span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); } #menu{ position: fixed; width: fit-content; background-color: #161618; margin: -100px 0 0 -50px; padding: 50px; box-shadow: 0 -2px 15px rgb(5, 5, 5); height: 1400px; padding-top: 125px; list-style-type: none; -webkit-font-smoothing: antialiased; transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0); } #menu li { padding: 10px 0; font-size: 22px; } #menuToggle input:checked~ul { transform: none; } .welcome-text { position: relative; color: #8AB4F8; font-size: 60px; top: 320px; left: 290px; text-align: center; font-weight: 700; font-family: 'Lato'; } .welcome-text::before { position: absolute; content: ""; display: block; width: 72%; height: 4px; margin-top: 66px; margin-left: 5px; background-color: #8AB4F8; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
<nav role="navigation"> <div id="menuToggle"> <input type="checkbox" /> <span></span> <span></span> <span></span> <ul id="menu"> <a href="home.html"> <li class="home">Home </li> </a> <a href="#"> <li>About</li> </a> <a href="index.html"> <li>Info</li> </a> <a href="#"> <li>Contact</li> </a> <a> <li style="color: white;">Qing</li> </a>
onclick
<input type="checkbox" />
<input type="checkbox" checked />
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)