2

Eu preciso fazer com que meu menu hamburguer que tem uma animação totalmente feita por html e css fique sincronizada, ou seja, quando eu apertar nele ambas as animações acontecerão... O código que estou usando é esse

HTML

<nav>
          <input type="checkbox" id="check">
                 <label id="icone" for="check">
                     <label>
                         <div id="menu">
                             <input type="checkbox" id="check" value="value">
                             <label class="tent" for="check"></label>
                             <span></span>
                         </div>
                     </label>
                 </label>
                 <div class="barra"> 
                     <nav id="navMenu">
                         <a href="cursos480.html"><div class="link">Cursos</div></a>
                         <a href="unidades480.html"><div class="link">Unidades</div></a>
                         <a href="noticias480.html"><div class="link">Notícias</div></a>
                         <a href="vestib480.html"><div class="link">Vestibulinho</div></a>
                         <a href="test480.html"><div class="link">Teste Vocacional</div></a>
                         <a href="contat480.html"><div class="link">Contato</div></a>
                     </nav>
                 </div>
             </nav>

CSS

    #check{
    display:none;
}
#icone{
    position: absolute;
    z-index: 3;
    margin-left: 64%;
    margin-top: 4%;
}
.barra{
    width: 100%;
    position:absolute;
    text-align:  center;
    z-index: 2;
    transition: all .2s linear;
}
#navMenu{
    width: 51%;
    margin-left: 42%;
    margin-top: 5%;
    position:absolute;
    visibility: hidden;
}
#navMenu a{
    text-decoration:none;
}
.link{
    background-color:#494950;
    padding: 6%;
    font-family:"arial";
    font-size:12pt;
    transition: .2s ease-in-out;
    color:#f4f4f9;
    border-bottom: 2px solid #222;
    opacity:0;
}
.link:hover{
    background-color:#050542;
}

#check:checked ~ .barra #navMenu a .link{
    opacity:1;
    margin-top: 0%;
    visibility: visible;
}
#menu{
    width: 48px;
    float: left;
    opacity: 0.6;
    height: 48px;
    position: relative;
}
#menu:hover{
    opacity: 1;
}
.tent{
    width: 100%;
    height: 100%;
    float: left;
    background-color: #5f5855;
    position: absolute;
    box-shadow: 5px 2px 23px;
    transition: all 0.1s linear;
    border-radius: 50%;
}
#check{
    position: absolute;
    /* z-index: 3; */
    display: none;
}
span{
    width: 54%;
    height: 7%;
    top: 47%;
    left: 24%;
    position: absolute;
    background-color: #fff;
    transition: all 0.1s linear;
}
span:before{
    content:'';
    top: 7px;
    position: absolute;
    background-color: #ffffff;
    transition: all 0.1s linear;
    width: 100%;
    height: 100%;
}
span:after{
    content:'';
    bottom: 7px;
    position: absolute;
    background-color: #ffffff;
    transition: all 0.1s linear;
    width: 100%;
    height: 100%;
}
#check:checked ~ span{
    background-color: transparent;
}
#check:checked ~ span:before{
    transform: translate(0px, -6px) rotate(-45deg);
}
#check:checked ~ span:after{
    transform: translate(0px, 8px) rotate(45deg);
}
#check:checked ~ .tent{
    border-radius: 50%;
}

Imagem sem o menu

Imagem com o menu

1 Resposta 1

2

Cara seu CSS e HTML tinham uma série de problemas. O HTML estava com a semântica meio errada, com uma label dentro de outra, dois elementos com o mesmo ID etc.

Tive que fazer uma série de ajustes no CSS para fazer funcionar pois as regras do seletores adjacentes não estava correta devido a ordem das tags no HTML... De qualquer forma agora está funcionando, mas acredito que vc possa ter problema ao aplicar esse menu em um projeto final, principalmente devido a quantidade de positions e z-index e margins com %.

Segue o modelo do menu funcionando. De uma estudada no HTML e CSS para entender melhor como ficou a dinâmica.

#check{
    display:none;
}
#icone{
    position: absolute;
    z-index: 3;
    margin-left: 64%;
    margin-top: 4%;
}
.barra{
    width: 100%;
    position:absolute;
    text-align:  center;
    z-index: -1;
    transition: all .2s linear;
}
#navMenu{
    width: 51%;
    margin-left: 42%;
    margin-top: 5%;
    position:absolute;
    visibility: hidden;
}
#navMenu a{
    text-decoration:none;
}
.link{
    background-color:#494950;
    padding: 6%;
    font-family:"arial";
    font-size:12pt;
    transition: .2s ease-in-out;
    color:#f4f4f9;
    border-bottom: 2px solid #222;
    opacity:0;
}
.link:hover{
    background-color:#050542;
}

#check:checked ~ .barra #navMenu a .link{
    opacity:1;
    margin-top: 0%;
    visibility: visible;
}
label{
    width: 48px;
    float: left;
    opacity: 0;
    height: 48px;
    position: relative;
    float: left;
    position: absolute;
    box-shadow: 5px 2px 23px;
    transition: all 0.1s linear;
    border-radius: 50%;
    cursor: pointer;

}
label:hover + #menu{
    opacity: 1;
}
#menu {
  width: 48px;
    float: left;
    opacity: 0.6;
    height: 48px;
    position: relative;
    float: left;
    background-color: #5f5855;
    /* position: absolute; */
    box-shadow: 5px 2px 23px;
    transition: all 0.1s linear;
    border-radius: 50%;
    position: absolute;

    margin-left: 64%;
    margin-top: 4%;
}

#check{
    position: absolute;
    /* z-index: 3; */
    display: none;
}
span{
    width: 54%;
    height: 7%;
    top: 47%;
    left: 24%;
    position: absolute;
    background-color: #fff;
    transition: all 0.1s linear;
}
span:before{
    content:'';
    top: 7px;
    position: absolute;
    background-color: #ffffff;
    transition: all 0.1s linear;
    width: 100%;
    height: 100%;
}
span:after{
    content:'';
    bottom: 7px;
    position: absolute;
    background-color: #ffffff;
    transition: all 0.1s linear;
    width: 100%;
    height: 100%;
}
#check:checked + label + div > span{
    background-color: transparent;
}
#check:checked + label + div > span:before{
    transform: translate(0px, -6px) rotate(-45deg);
}
#check:checked + label + div > span:after{
    transform: translate(0px, 8px) rotate(45deg);
}
#check:checked + label + div > .tent{
    border-radius: 50%;
}
<nav>
    <input type="checkbox" id="check">
    <label id="icone" for="check"></label>
    <div id="menu">
        <span></span>
    </div>
    
    <div class="barra"> 
        <nav id="navMenu">
            <a href="cursos480.html"><div class="link">Cursos</div></a>
            <a href="unidades480.html"><div class="link">Unidades</div></a>
            <a href="noticias480.html"><div class="link">Notícias</div></a>
            <a href="vestib480.html"><div class="link">Vestibulinho</div></a>
            <a href="test480.html"><div class="link">Teste Vocacional</div></a>
            <a href="contat480.html"><div class="link">Contato</div></a>
        </nav>
    </div>
</nav>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .