CSS mobile menu is a convenient way to display menu items on mobile devices. It is easy to use, so users can explore and access information.
<header class="css-mobile-header">
<div class="css-mobile-logo">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" width="40"
stroke="#fff">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
</svg>
</div>
<nav class="css-mobile-menu" role="navigation">
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</header>/* required */
html,
body {
overflow-x: hidden;
height: 100%;
}
.css-mobile-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #1e1e23;
padding: 12px 0;
}
.css-mobile-header .css-mobile-logo {
max-width: 150px;
padding-left: 1rem;
z-index: 9999999;
}
.css-mobile-header .css-mobile-menu {
display: flex;
justify-content: center;
align-items: center;
}
.css-mobile-header .css-mobile-menu #menuToggle {
display: flex;
flex-direction: column;
position: relative;
padding-right: 1.5rem;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
.css-mobile-header .css-mobile-menu #menuToggle input {
display: flex;
width: 40px;
height: 32px;
position: absolute;
cursor: pointer;
opacity: 0;
z-index: 2;
}
.css-mobile-header .css-mobile-menu #menuToggle span {
display: flex;
width: 29px;
height: 2px;
margin-bottom: 5px;
position: relative;
background: #ffffff;
border-radius: 3px;
z-index: 1;
transform-origin: 5px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}
.css-mobile-header .css-mobile-menu #menuToggle span:first-child {
transform-origin: 0% 0%;
}
.css-mobile-header .css-mobile-menu #menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
.css-mobile-header .css-mobile-menu #menuToggle input:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-3px, -1px);
}
.css-mobile-header
.css-mobile-menu
#menuToggle
input:checked
~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
.css-mobile-header
.css-mobile-menu
#menuToggle
input:checked
~ span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
.css-mobile-header #menu {
position: absolute;
width: auto;
min-width: 200px;
height: 400px;
margin: -50px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background-color: #1e1e23;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translateX(100%);
top: 0;
right: 0;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
list-style: none;
}
.css-mobile-header #menu li {
padding: 10px 0;
transition-delay: 2s;
}
.css-mobile-header #menu li a {
color: #fff;
text-decoration: none;
}
.css-mobile-header .css-mobile-menu #menuToggle input:checked ~ ul {
transform: none;
}
@media all and (max-width: 576px) {
.css-mobile-header #menu {
width: 100vw;
height: 100vh;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.css-mobile-header #menu li {
padding: 1rem 2rem;
}
.css-mobile-header .css-mobile-menu #menuToggle {
padding-right: 1rem;
}
}.css-mobile-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #1e1e23;
padding: 12px 0;
.css-mobile-logo {
max-width: 150px;
padding-left: 1rem;
z-index: 9999999;
}
.css-mobile-menu {
display: flex;
justify-content: center;
align-items: center;
#menuToggle {
display: flex;
flex-direction: column;
position: relative;
padding-right: 1.5rem;
z-index: 1;
-webkit-user-select: none;
user-select: none;
input {
display: flex;
width: 40px;
height: 32px;
position: absolute;
cursor: pointer;
opacity: 0;
z-index: 2;
&:checked {
~ {
span {
opacity: 1;
transform: rotate(45deg) translate(-3px, -1px);
&:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
&:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
}
ul {
transform: none;
}
}
}
}
span {
display: flex;
width: 29px;
height: 2px;
margin-bottom: 5px;
position: relative;
background: #ffffff;
border-radius: 3px;
z-index: 1;
transform-origin: 5px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
&:first-child {
transform-origin: 0% 0%;
}
&:nth-last-child(2) {
transform-origin: 0% 100%;
}
}
}
}
#menu {
position: absolute;
width: auto;
min-width: 200px;
height: 400px;
margin: -50px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background-color: #1e1e23;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translateX(100%);
top: 0;
right: 0;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
list-style: none;
li {
padding: 10px 0;
transition-delay: 2s;
a {
color: #fff;
text-decoration: none;
}
}
}
}
@media all and (max-width: 576px) {
.css-mobile-header {
#menu {
width: 100vw;
height: 100vh;
padding-left: 0;
padding-right: 0;
text-align: center;
li {
padding: 1rem 2rem;
}
}
.css-mobile-menu {
#menuToggle {
padding-right: 1rem;
}
}
}
}Author: alvarotrigo