Suponhamos que estou criando um site, e coloco esse ícone de imagem, e quando eu clicar nessa imagem, abra um menu, tem como?
Desculpem se isso for muito óbvio, mas eu só vi menus com listas, pesquisei e não achei um que fosse nesse estilo.
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeSuponhamos que estou criando um site, e coloco esse ícone de imagem, e quando eu clicar nessa imagem, abra um menu, tem como?
Desculpem se isso for muito óbvio, mas eu só vi menus com listas, pesquisei e não achei um que fosse nesse estilo.
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).
2 - Menu contraído indicado pela existência do ícone de lista.
3 - Menu (vertical) exibido após clique no ícone.
É 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.
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>