Transform nie działa.

Question

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);
}

 

Comments

Czy tutaj jest jeszcze jakiś js? Po wklejeniu do copedena nie ma żadych rezultatów :v

Answer 1

Wszystko działa dobra literówka ;) Fajny pomysł na selektor ;)
 

.site-menu-trigger:focus ~ .site-menu, .site-menu:hover {
    transform: translateX(0);
}

Twoja klasa nazywa się site-nav-trigger a w CSS szukasz site-menu-trigger

 

Comments

Masz rację, drobna literówka :), dzięki za pomoc.