0

Suponhamos que estou criando um site, e coloco esse ícone de imagem, e quando eu clicar nessa imagem, abra um menu, tem como?

Ex;Ícone do menu

Desculpem se isso for muito óbvio, mas eu só vi menus com listas, pesquisei e não achei um que fosse nesse estilo.

1
  • Seria um menu dropdown?
    – Meu ovo
    1/10/2017 às 17:32

2 Respostas 2

1

Este é um ícone utilizado para indicar a existência de um menu, que pode ser facilmente aplicado em seu projeto utilizando o framework css Bootstrap.

O Bootstrap é um css que você adiciona ao seu projeto. Ele contém várias definições de regras css padronizadas para estilizar diversos componentes html.

Este é um framework muito utilizado no mercado.

Por padrão, em um site, exibimos o menu de forma completa, porém, quando a tela do dispositivo que está exibindo este site não possui um tamanho adequando para a exibição completa do menu, aplicamos a exibição deste ícone, para indicar a existência de um menu, de modo que, ao se acionar o ícone, os itens do menu serão exibidos verticalmente para melhor visualização pelo usuário.

Veja os exemplos:

1 - Menu completo em exibição padrão (horizontal).

inserir a descrição da imagem aqui

2 - Menu contraído indicado pela existência do ícone de lista.

inserir a descrição da imagem aqui

3 - Menu (vertical) exibido após clique no ícone.

inserir a descrição da imagem aqui

É importante entender que, a exibição do ícone do menu ou não é aplicada automaticamente pelo Bootstrap, desde que você siga as classes definidas neste framework para a criação do seu menu.

Esse comportamento de exibir o ícone de acordo com o tamanho da tela do dispositivo é o que chamamos de um layout responsivo. O Bootstrap aplica layouts para outros elementos utilizando esse mesmo conceito.

Caso você queira estudar mais sobre o Bootstrap, veja o link: Bootstrap Framework

Caso você queria trabalhar com o exemplo citado, veja o link: Exemplo de Menu com Bootstrap

Caso você esteja testando o exemplo do Bootstrap e queria simular a exibição em um dispositivo mobile, basta diminuir a tela do seu navegador ou utilizar a depuração do Chrome em modo mobile.

Ná página de exemplo, você pode visualizar o menu em seu navegador e também verificar os códigos html, css e javascript utilizados.

1
  • Obrigado pela atenção amigo.
    – Fabio
    2/10/2017 às 14:43
1

Tem sim e vc nem precisa criar uma imagem pra isso. Utilizando FontAwesome vc tem centenas de icones q vc pode usar nas aplicações, e com boostrap vc tem médodos de fazer o menu sem precisar quebrar muito a cabeça.

Veja um exemplo:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

2
  • Obrigado amigo, vou pesquisar sobre o bootstrap, já vi que ele tem bastantes funções legais.
    – Fabio
    2/10/2017 às 14:43
  • Tem sim, quebra um galhão em muitas coisas ^^ Se a resposta foi útil pra vc, por favor marque ela como escolhida por favor ^^ Abraços amigo 2/10/2017 às 18:39

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 .