Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Soluções] HTML e CSS: responsividade com mobile-first - Criando o Menu Hambúrguer

  1. Estou compartilhando outra ideia para criar um submenu como elementos de tag os expemplo dos codigo.
  2. Sobre o elemento Summay e Details na W3C: https://www.w3schools.com/tags/tag_summary.asp
  3. Estarei deixando o meu Github com os codigo: https://github.com/lipeomiguel/AluraTools
  • HTML Codigo:
<div class="header_left">
    <details>
          <summary><span></span></summary>
          <ul>
            <li><a href="" class="active">Categorias</a></li>
            <li><a href="">PROGRAMAÇÃO</a></li>
            <li><a href="">FRONT-END</a></li>
            <li><a href="">INFRAESTRUTURA</a></li>
            <li><a href="">BUSINESS</a></li>
            <li><a href="">DESIGN & UX</a></li>
          </ul>
    </details>
</div>
  • CSS Codigo:

body header .header_left details {
  position: relative;
}
body header .header_left details summary::marker {
  content: none;
}
body header .header_left details summary span {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-block;
  background-image: url("../img/menu.svg");
  background-repeat: no-repeat;
  background-position: center;
}
body header .header_left details ul {
  width: 15rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  background-color: var(--branco-de-fundo);
  position: absolute;
  top: 3.5rem;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
body header .header_left details ul a {
  width: 14rem;
  height: 2.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: var(--cor-header-text);
  font-size: clamp(1.3rem, 2.5vw, 0.9rem);
  font-family: "Roboto" sans-serif;
  text-transform: uppercase;
}
  • SCSS Codigo:
.header_left {
      display: flex;
      gap: 1.5rem;
      margin-left: 0.8rem;
      details {
        position: relative;
        summary {
          &::marker {
            content: none;
          }
          span {
            width: 2.4rem;
            height: 2.4rem;
            display: inline-block;
            background-image: url("../img/menu.svg");
            background-repeat: no-repeat;
            background-position: center;
          }
        }
        ul {
          width: 15rem;
          display: flex;
          flex-direction: column;
          align-items: start;
          background-color: var(--branco-de-fundo);
          position: absolute;
          top: 3.5rem;
          left: 0;
          display: flex;
          flex-direction: column;
          gap: 0.3rem;
          a {
            width: 14rem;
            height: 2.7rem;
            display: flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            color: var(--cor-header-text);
            font-size: clamp(1.3rem, 2.5vw, 0.9rem);
            font-family: "Roboto" sans-serif;
            text-transform: uppercase;
          }
        }
      }
    }
1 resposta
solução!

Oii Felipe, tudo bem?

Muito obrigada por compartilhar sua solução para criar um submenu utilizando os elementos <details> e <summary>. É uma abordagem interessante e demonstra sua criatividade e familiaridade com as ferramentas HTML e CSS.

Seu código está bem estruturado e organizado, tornando-o fácil de entender e dar manutenção.

A inclusão dos links para a documentação da W3C e para seu repositório no GitHub é muito útil para quem deseja entender melhor os conceitos envolvidos e explorar o código em mais detalhes.

Continue compartilhando suas soluções e contribuindo para a comunidade! Ótimo trabalho!

Um abraço e bons estudos.