1
resposta

[Dúvida] Menu categoria... o figma aparece com um cor ao colocar o cursor em cima da palavra categoria

De agora com o figma ao clicar no menu categoria baixa um menu de opções, essas opções uma vez que o cursor esta em cima dela a cor muda para azul;

Menu categoria selecionado segue meu código para avaliação.

https://drive.google.com/file/d/1rB1FgcZ9nubFreBpWeNb7obTIx5vGn1K/view?usp=sharing

1 resposta

Oi Marcelo, tudo bem?

Bom, na verdade, essa parte do design tem alguns pontos que precisam de uma atenção.

Mas olhando o seu código eu consegui implementar essa mudança. Vou deixar abaixo o que eu precisei fazer para a mudança ser aplicada. Se tiver dúvidas a respeito de algo é só falar:

  1. No arquivo index.html na tag de <label for="opcoes__menu"> adicione uma classe nela, eu vou colocar a classe "label-for-menu", você pode usar outro nome, essa classe vai ser usada mais afrente;
  2. Agora no arquivo header.css, na @media screen and (min-width: 1024px) procure pela classe opcoes dentro dela, e abaixo da chamada do display: flex;, adicione isso: align-items: center; nela;
  3. Agora ainda dentro da @media screen and (min-width: 1024px) procure por esse bloco de código aqui:
    .opcoes__item:active {
            background-color: linear-gradient(98deg, #002F52 35.49%, #326589 165.37%);
        }
    
    Depois pegue esse código abaixo:
    .opcoes__botao:checked ~ .label-for-menu > .opcoes__item {
            background-color: #1e4c6d; /* Essa cor de fundo, é um azul que você pode trocar por outra cor de sua preferencia */
            color: #fff; /* Eu coloquei branco para dar um contraste com o fundo, mas use a cor que quiser */
            padding: 1em;
        }
    
        .lista-menu__item:hover {
            background-color: #1e4c6d; /* O mesmo que ali em cima, troque pela cor que sentir melhor */
        }
    
        .lista-menu__item:hover .lista-menu__link {
            -webkit-background-clip: inherit;
            -webkit-text-fill-color: inherit;
            background-clip: inherit;
            text-transform: uppercase;
            text-decoration: none;
            color: #fff; /* Branco novamente, mas use uma cor que lhe agrade */
            background: none;
        }
    
    E cole no lugar do outro mencionado, isso deve excluir o código antigo e manter esse novo.
  4. Esse novo código busca zerar algumas partes desenvolvidas no curso e adicionar uma cor de fundo na palavra "categorias" quando clicada, e ao passar o mouse por cima dos itens da lista, eles ficar com a cor de fundo azul e a cor muda para branco.
  5. Eu deixei uns comentários nos locais onde você pode colocar as cores que preferir.

Era isso, se não entender algo, ou tiver dúvidas quanto ao que eu fiz é só falar.

Espero que isso tenha sido útil. Se você tiver alguma pergunta adicional ou precisar de ajuda específica, por favor, me informe!

Abraços e bons estudos.

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓