-1

Como fazer com que ao chamar a ação .burger:active alterar o style do componente menu no mesmo nivel hierárquico

components/Nav/index.js

import React from "react";
import { NavContainer } from "./styles";

export default function Nav() {
  return (
    <NavContainer>
      <div className="logo">Logo</div>
      <ul className="menu">
        <li>
          <a href="/">Menu1</a>
        </li>
        <li>
          <a href="/">Menu2</a>
        </li>
        <li>
          <a href="/">Menu3</a>
        </li>
      </ul>
      <div className="burger">
        <div className="linha1" />
        <div className="linha2" />
        <div className="linha3" />
      </div>
    </NavContainer>
  );
}

components/Nav/styles.js

import styled from "styled-components";

export const NavContainer = styled.nav`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: darkgray;
  align-items: center;
  min-height: 8vh;

  ul {
    display: flex;
    list-style: none;
    justify-content: space-between;
    width: 30%;
  }

  .burger {
    display: none;
  }

  .burger div {
    background: white;
    width: 25px;
    height: 4px;
    margin: 3px;
    border-radius: 2px;
  }

  .burger:active {
    .linha1 {
      margin: 0;
      transform: rotate(45deg);
    }
    .linha2 {
      margin: 0;
      display: none;
    }
    .linha3 {
      margin: 0;
      transform: rotate(-45deg);
    }
    .menu {
      transform: translateX(0%);
      background: red;
    }
  }

  @media screen and (max-width: 700px) {
    .burger {
      display: block;
    }

    ul {
      justify-content: space-around;
      position: absolute;
      top: 8vh;
      right: 0px;
      flex-direction: column;
      align-items: center;
      height: 92vh;
      background: darkgray;
      transform: translateX(100%);
    }
  }
`;

Para contornar tal situação eu criei uma classe estilizada onde é dado um toggle no menu através do evento click do burger.

1 Resposta 1

0

Então ... CSS é um linguagem com leitura em cascata, ou seja, nada pode ser feito de baixo pra cima, então pra que você possa selecionar um elemento irmão, ele precisa vir depois do seletor.

<div className="app">
  <div className="logo">[...]</div>
  <div className="burger">[...]</div>
  <ul className="menu">[...]</ul>
</div>

E só então você poderia acessar o elemento irmão através do seletor burger:active ~ .menu{}

Caso seja de suma importância que seu burger seja o último filho, sendo apresentado logo após o menu, você pode fazer uso da propriedade order: [numeroDeOrdem] do flexbox layout pra ordenar a posição desses elementos, como demonstrado abaixo:

.burger{ order: 2 }

.menu{ order: 1 }

.burger:active{
  [regras de estilo para o burger quando clicado]
}

.burger:active ~ .menu{
  [regras de estilo para o menu quando o burger é clicado]
}

Fiz um exemplo para fins de visualização no JSFiddle: https://jsfiddle.net/viniciusColares/7kmpj59r/15/

1
  • 1
    Obrigado amigo, eu consegui contornar a minha necessidade através de js, onde no evento do click eu adiciono ou retiro uma classe estilizada. Mas a sua resposta me ajudou muito. Muito obrigado! 2/05/2020 às 4:54

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 .