Cześć mam taki problem z wysuwanym menu w samym css... Zrobiłem wszystko fajnie super działa menu widać je itp. Niestety gdy nakładam transforma to menu znika, ale po naciśnięciu buttona nic się nie dzieje :(, nie wiem gdzie mam błąd czy mógłby ktoś skontrolować ? Byłbym mega wdzięczny. Poniżej HTML i CSS.
HTML:
<header id="header">
<nav class="site-nav">
<button class="site-nav-trigger">Menu</button>
<div class="site-menu">
<ul>
<li><a href="#about">About us</a></li>
<li><a href="#about">Download</a></li>
<li><a href="#about">Contact</a></li>
<li><a href="#about">Share</a></li>
</ul>
</div>
</nav>
</header>
CSS:
body {
padding: 0;
margin: 0;
background-color: #696e9e;
overflow: hidden;
}
.site-nav {
height: 20px;
width: 100%;
background-color: #414ba7;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 10px;
box-sizing: border-box;
}
.site-menu-trigger {
border: 0;
border-radius: 5px;
background: #fff;
}
.site-menu {
display: flex;
box-sizing: border-box;
position: absolute;
top: 20px;
right: 0;
height: 100%;
width: 300px;
background-color: #34b399;
transform: translateX(100%);
transition: 0.3s transform easy-in-out;
}
.site-menu ul {
padding: 0;
list-style-type: none;
margin: 0 10px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.site-menu li {
background: #fff;
margin-top: 20px;
color: #696e9e;
border-radius: 5px;
flex-basis: 100%;
display: flex;
height: 30px;
}
.site-menu a {
display: flex;
padding: 10px;
box-sizing: border-box;
text-decoration: none;
align-items: center;
height: 100%;
width: 100%;
border-radius: 5px;
}
.site-menu a:hover {
background-color: #696e9e;
color: #FFF;
}
.site-menu-trigger:focus ~ .site-menu, .site-menu:hover {
transform: translateX(0);
}