Criar um botão Mobile em HTML5 - CSS3 e jQUERY
Quem desenvolve sites e aplicativos já está familiarizado com as recomendações dos mecanismos de busca que diz que os sites sejam acessíveis a todas as resoluções, incluindo dispositivos móveis. Devido ao pequeno tamanho da tela dos smartphones e dos tablets, os links utilizados nesses dispositivos não devem ser iguais aos usados em desktops e notebooks que possuem telas maiores. Nesse contexto, observamos a importância da construção de um botão mobile. Este artigo desenvolvido pelo programador Thiago Arteweb vai explicar passo a passo como fazer um botão para dispositivos móveis.
1- Requisitos importantes de um botão mobile
O botão mobile deve seguir dois princípios fundamentais: o primeiro é a estética do design, ou seja, deve se encaixar perfeitamente e harmonicamente ao layout proposto, o segundo princípio é que ele seja funcional e fácil para o toque do dedo, cumprindo seu objetivo principal, que é levar o usuário à página desejada.
2- Diferentes formas de se fazer um botão para smartphone e tablet
Existem inúmeras formas de se criar um botão mobile, uma delas é criar uma imagem com o formato do botão que deseja e inserir os links em sincronismo com essa imagem. Outra maneira é utilizando o clássico botão de formulário já existente no HTML . A terceira forma, que julgo ser a mais leve e funcional e que é tema desse artigo, é utilizando CSS, HTML e JQUERY.
3- HTML 5
3.1 Linkando os documentos associados
O primeiro passo na criação de um botão mobile é linkar os arquivos acessórios ao HTML, dentre eles o CSS, o JQuery e o Javascript. Ainda é necessário incluir a meta tag viewport.
<link href="/stylesheet.css" rel="stylesheet" type="text/css">
<script type="text/javascript" GARBAGE></script>
<script type="text/javascript" src='javascript.js'></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" GARBAGE></script>
<script type="text/javascript" src='javascript.js'></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
3.2 Criando o menu
Criaremos um menu no HTML5, utilizando o seguinte código:
<div class='menu'>
<ul>
<li><h1><a href='/'>Home</a></h1></li>
<li><h1><a href=’link1.php’>Link 1</a></h1></li>
<li><h1><a href=’link2.php’>Link 2</a></h1></li>
<li><h1><a href=’link3.php’>Link 3</a></h1></li>
</ul>
</div>
<ul>
<li><h1><a href='/'>Home</a></h1></li>
<li><h1><a href=’link1.php’>Link 1</a></h1></li>
<li><h1><a href=’link2.php’>Link 2</a></h1></li>
<li><h1><a href=’link3.php’>Link 3</a></h1></li>
</ul>
</div>
Linha 1 e 8: inserimos o menu em uma div.
Linha 2 e 7: inserimos a tag unordered list.
Linha 3 a 6: tag li e o menu propriamente dito.
Um detalhe importante e que é muito valorizado pelos mecanismos de busca, é criar o menu associado a um estrutura que esteja entre as tags h1.
3.3 Criando o botão mobile
<div class=’botao_mobile’>
___<br>___<br>___
</div>
___<br>___<br>___
</div>
Linha 1 e 3: setamos a div que será o botão.
Linha2: criação das três linhas clássicas do botão.
Linha2: criação das três linhas clássicas do botão.
4- CSS
No CSS faremos com que esse menu apareça expandido somente em telas maiores (notebooks e desktops) e que fique colapsado em dispositivos móveis. Para isso faremos uso das media queries e do atributo display.
Além disso estilizaremos nosso botão mobile, com alguns atributos como border-radius, cursor pointer e line-height , conforme demonstrado no código abaixo:
Além disso estilizaremos nosso botão mobile, com alguns atributos como border-radius, cursor pointer e line-height , conforme demonstrado no código abaixo:
.botao_mobile
{
position:relative;
float: left;
width: 20%;
height: 40px;
display: block;
left: 20%;
border-radius: 4px;
line-height: 8px;
cursor: pointer;
font-weight: bold;
background: #2E666D;
text-align:center;
color: #FFF;
}
.menu
{
display: none;
}
@media only screen and (min-width: 481px) {
{
.botao_mobile
{
width: 12%;
left: 43%;
display: block;
}
.menu
{
display: none;
}
}
@media only screen and (min-width: 769px) {
{
.botao_mobile
{
display: none;
}
.menu
{
display: block;
}
}
{
position:relative;
float: left;
width: 20%;
height: 40px;
display: block;
left: 20%;
border-radius: 4px;
line-height: 8px;
cursor: pointer;
font-weight: bold;
background: #2E666D;
text-align:center;
color: #FFF;
}
.menu
{
display: none;
}
@media only screen and (min-width: 481px) {
{
.botao_mobile
{
width: 12%;
left: 43%;
display: block;
}
.menu
{
display: none;
}
}
@media only screen and (min-width: 769px) {
{
.botao_mobile
{
display: none;
}
.menu
{
display: block;
}
}
4.1 Media queries
Quanto às media queries, foram divididas em três blocos de códigos, sendo o primeiro bloco para resoluções abaixo de 480px, o segundo bloco para resoluções entre 481px e 768px e o terceiro bloco para resoluções maiores que 769px.
4.2 Menu
Quanto ao menu, foi setado o atributo display: none para o primeiro bloco e segundo bloco e display: block para o terceiro bloco, ou seja, o menu só ficará visível para telas maiores (desktops e notebooks).
5- jQuery
A função do JQuery na criação do botão mobile será de mudar o atributo no CSS fazendo com que ele mostre o menu quando o botão mobile seja clicado uma vez e que desapareça esse menu quando clicado duas vezes. Com esse propósito utilizaremos o .toggle do JQuery.
$(document).ready(function(){
$('. botao_mobile').click(function() {
$('.menu li').toggle();
});
});
$('. botao_mobile').click(function() {
$('.menu li').toggle();
});
});
6- Resultado final
Artigo escrito por: Thiago Arteweb
