ИСХОДНЫЙ КОД:
Side Navbar
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
body{
overflow: hidden;
font-family: sans-serif;
background-color: #387b6a;
height: 100vh;
}
.menu{
height: 100%;
position: fixed;
left: 0;
top: 0;
width: 250px;
padding-top: 60px;
background-color: #212121;
transition: 0.5s;
transform: translateX(-250px);
}
.logo a{
padding: 15px 25px;
font-size: 40px;
text-transform: uppercase;
color: white;
/*margin-left: 5px*/
}
.logo a img{
max-width:140px;
border-radius: 50%;
margin-bottom: 10px;
}
ul li{
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
transition: 0.3s;
/*text-align: center;*/
padding-left: 25px;
}
ul li:hover{
padding-left: 35px;
background-color: #445665;
}
ul li a{
display: block;
color: #fff;
padding: 20px;
text-transform: uppercase;
font-weight: bold;
}
#open{
display: none;
}
.open{
height: 80px
width: 80px;
/*position: absolute;*/
/*background-color: #000;*/
}
.open i{
font-size: 25px;
cursor: pointer;
margin-left: 25px;
margin-top: 25px;
background-color: #000;
padding: 15px 15px;
color: white;
z-index: 99;
}
#open:checked ~ .menu{
transition: 0.5s;
transform: translateX(0);
}
#open:checked ~ .open i{
transition: 0.5s;
margin-left: 190px;
position: absolute;
}
Найди меня на:
Оригинал: “https://dev.to/technicalvandar885/responsive-sidebar-menu-using-pure-html-css-1mf5”