Entrar Ainda não tem acesso?
2
respostas

[Dúvida] Quando nesse curso deixaremos o botão hambúrger branco com lundo azul?

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Criando Header, Flexbox e @import e atividade Customizando o Menu Hambúrguer

por Estudante
| 233k xp | 136 posts

Estive na aula 4 "Selecionando Media Queries" em "07 Aumentando o header", mas ainda não vi quando o botão ficará exatamente ao Figma: Insira aqui a descrição dessa imagem para ajudar na acessibilidade Até agora, o botão continua branco quando pressionado. Isso será revisto ainda no decorrer das aulas? Como poderei aplicar uma pseudoclasse? Uso checked?

Tentei isso, mas ainda não vi o funcionamento: 

.container__botao:checked~.container__imagem-hamburger {
    background-color: var(--azul);
    background-image: url("../img/Menu_white.svg");
}

        </div class="container">
            <input type="checkbox" id="menu" class="container__botao">
            <label for="menu">
                <span class="cabecalho__menu-hamburger container__imagem"></span>
            </label>
            <ul class="lista-menu">
                <li class="lista-menu__titulo">Categorias</li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link">Programação</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link">Front-end</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link">Infraestrutura</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link">Business</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link">Design & UX</a></li>
            </ul>
            <img src="img/Logo.svg" alt="Logo da Alurabooks." class="container__logo">
            <h1 class="container__titulo"><b class="container__titulo--negrito">Alura</b>Books</h1>
        </div>

Sendo "../img/Menu_white.svg" o caminho do nome do botão hambúrger na versão branca.

2 respostas
por Estudante
| 70.7k xp | 55 posts

Olá Akhenaton!

Para que o botão fique exatamente como no Figma, você pode usar a pseudoclasse :checked para aplicar o estilo desejado quando o botão hambúrguer é pressionado. No entanto, no código fornecido, você está usando a classe .container__botao:checked~.container__imagem-hamburger, mas a classe do elemento no HTML é .container__imagem-hamburger e não .container__imagem-hamburger. Além disso, você precisa ajustar o seletor para que ele se aplique ao elemento <span> correto dentro do label.

Aqui está como você pode fazer a seleção correta e aplicar a pseudoclasse:

HTML:

<div class="container">
    <input type="checkbox" id="menu" class="container__botao">
    <label for="menu">
        <span class="cabecalho__menu-hamburger container__imagem"></span>
    </label>
    <!-- Resto do seu código -->
</div>

CSS:

.container__botao:checked + label .container__imagem {
    background-color: var(--azul);
    background-image: url("../img/Menu_white.svg");
}

Observe que usei o seletor .container__botao:checked + label .container__imagem, onde:

  • .container__botao:checked seleciona o input do tipo checkbox que está marcado (pressed).
  • + label seleciona o elemento <label> que vem imediatamente após o input marcado.
  • .container__imagem seleciona o elemento com a classe container__imagem dentro do <label>.

Certifique-se de que o caminho para a imagem ../img/Menu_white.svg esteja correto em relação à localização do seu arquivo CSS.

Com essas alterações, o estilo deve ser aplicado corretamente quando o botão hambúrguer é pressionado (checked) e exibir a imagem branca corretamente.

Espero que isso ajude a alcançar o resultado desejado. Se tiver mais dúvidas ou precisar de mais assistência, estou aqui para ajudar!

por Estudante
| 233k xp | 136 posts

A professora do curso mostrou como se faz isso postereriormente.