Criando menu responsivo css simples com hover e click no mobile -

A área de desenvolvimento Front-end vem evoluindo muito nos últimos tempos.

No inicio a maioria dos efeitos de hover e click só era possível com o uso de Javascript, porém as coisas evoluíram e hoje é possível adicionar evento click usando apenas CSS e HTML.

Hoje usando apenas o CSS você consegue resolver muitos problemas que a algum tempo atrás não era possível, efeitos, animações são criadas sem muita dificuldade e sem uso de JavaScript

Adicionei apenas um estilo básico de demonstração, você pode copiar e refazer o estilo da maneira que preferir e que se encaixar no projeto que esteja realizando no momento.

Para criar o menu, primeiro criei uma arquitetura básica de HTML, para criar o evento click na versão mobile usei um label e um input checkbox.

O checkbox ficará oculto na versão desktop, pois ele que fará o evento de click, quando o checkbox estiver marcado(checked) o menu abrirá como se fosse um dropdown.

<div class="menu-content">
  <label class="open-menu-all" for="open-menu-all">
   <input class="input-menu-all" id="open-menu-all" type="checkbox" name="menu-open">
  <div class="navegacao-mobile">
    <span class="linha-menu"></span>
    <span class="linha-menu"></span>
    <span class="linha-menu"></span>
  </div>
  <ul class="list-menu">
    <li class="item-menu">
      <a class="link-menu">Menu 1</a>
    </li>
    <li class="item-menu">
      <a class="link-menu">Menu 2</a>
    </li>
    <li class="item-menu">
      <a class="link-menu">Menu 3</a>
    </li>
    <li class="item-menu">
      <a class="link-menu">Menu 4</a>
    </li>
    <li class="item-menu">
      <a class="link-menu">Menu 5</a>
    </li>
 
 
</ul></label></div>

Em seguida criei a folha de estilo do meu menu, ela foi feita em SASS, você pode converter para CSS se preferir. Quando a classe input-menu-all que é a classe da label do checkbox estiver como checked ela dará um display: block na classe .list-menu e fará o menu abrir como se fosse um dropdown

 
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 991px) {
  .menu-content {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    display: block;
  }

  .list-menu {
    display: flex!important;
    justify-content: space-between;
    width: 100%;
    background: #fff;
    box-shadow: 2px 9px 49px -17px rgba(0, 0, 0, 0.3);
  }

  .item-menu {
    flex: auto;
  }
  .item-menu .link-menu {
    padding: 15px;
    color: #555;
    display: block;
    transition: .4s;
    cursor: pointer;
    text-align: center
  }

  .item-menu .link-menu:hover {
    background: #545bc4;
    color: #fff;
  }
  
  .navegacao-mobile {
    display: none!important;
  }
 }

.navegacao-mobile {
  background: #ccc;
  padding: 10px;
  display: block;
  width: 53px;
  cursor: pointer;
}
.linha-menu {
  width: 25px;
  height: 3px;
  border-radius: 5px;
  background: #555;
  margin: 4px;
  display: block;
}
.input-menu-all {
  display: none!important;
}
.list-menu {
  display: none;
   width: 100%;
   background: #fff;
   box-shadow: 2px 9px 49px -17px rgba(0, 0, 0, 0.3);
}
.item-menu {
    flex: auto;
  }
  .item-menu .link-menu {
    padding: 15px;
    color: #555;
    display: block;
    transition: .4s;
    cursor: pointer;
    text-align: center
  }
.input-menu-all:checked ~ .list-menu {
       display: block;
      
}
.input-menu-all:checked ~ .list-menu .link-menu  {
  text-align: left;
}

Abaixo você pode ver o resultado da configuração do menu usando apenas CSS.

Também temo sum artigo com 7 Bibliotecas CSS para desenvolvedores ideal para otimizar tempo em seus projetos de desenvolvimento.

Espero ter ajudado 🙂

Isto foi útil?

Obrigado pelo seu feedback!

Facebook Tweet Pin LinkedIn Email

Leonardo Florêncio

novembro 17, 2021 em 4:45 pm

Não reparei o código ainda. O que necessito é que o menu na versão mobile fique em linha, sem dropdown. É possível apenas apontando inline ao invés de in block? Não sei se fui claro.
Obrigado.
Leonardo

Responder

Gustavo
novembro 17, 2021 em 6:13 pm

Esse menu está feito com flex, acredito que o modo que você quer em linha não seria muito viável para um menu mobile, pois não caberia os itens.
Para deixar somente em linha basta criar uma

e dar um display flex nela. e um flex-direction row ou column.

Responder
1. Leonardo Florêncio
  novembro 18, 2021 em 1:37 pm
  
  Oi Gustavo valeu pela resposta. na verdade são apenas 3 itens. utilizei o elementor para isso, mas penso que o CSS ajudaria um tanto. Mas, vou testar da forma que apontou com os display flex e o flex-direction. Obrigadu
  
  Responder
2. Leonardo Florêncio
  novembro 18, 2021 em 2:45 pm
  
  Aqui você tem a maneira que gostaria de deixar na horizontal, sem ficar no dropdown.
  
  Responder

Criando menu responsivo css simples com hover e click no mobile

Isto foi útil?

4 comentários em “Criando menu responsivo css simples com hover e click no mobile”

Deixe um comentário Cancelar resposta

Isto foi útil?

Posts relacionados

4 comentários em “Criando menu responsivo css simples com hover e click no mobile”

Deixe um comentário Cancelar resposta