jTouchMenu

jTouchMenu é um plugin jQuery que adiciona a funcionalidade de menu suspenso em web sites quando visualizados em um dispositivo móvel.

Este projeto tem por objetivo disponibilizar um novo plugin jQuery que possibilita aos desenvolvedores Web a agregarem em seus sites para que quando, acessados por um telefone móvel com recursos de touch screen como iPhone, iPod Touch, Android, ou quaquer celular que utilize a engine webkit.

Baixe os arquivos aqui:

Passo 1 – Baixe a jQuery

Entre no site do framework jQuery disponível em http://www.jquery.com, e faça o download da versão mais recente. Coloque o arquivo jquery.js dentro do diretório de scripts do seu site, para este exemplo o diretório de scripts para o site chama-se ‘js’.

Passo 2 – Baixe os arquivos javascript e CSS do jTouchMenu

Entre no site do desenvolvedor e baixe a mais recente versão do jTouchMenu, disponível em http://webbdesign.com.br/ant-dev/jtouchmenu/ . Coloque o arquivo jquery.jtouchmenu.js, dentro do diretório de scripts do seu site, para este exemplo o diretório de scripts para o site chama-se ‘js/’. Coloque o arquivo CSS menu.css dentro da pasta para estilos utilizada no seu site, para este exemplo o diretorio que contem as folhas de estilo para o site chama-se ‘css/’

Passo 3 – Chame pelos arquivos no documento HTML.

Em todos os documentos HTML que você queira que o usuário tenha acesso ao menu você deve chamar pelos arquivos baixados na seção head do documento.
<link rel=”stylesheets” type=”text/css” href=”css/menu.css” media=”screen” />
Para chamar pelos scripts temos que ter atenção em chamar sempre a biblioteca jQuery como sendo o primeiro script a ser lido, caso contrário o funcionamento do plugin pode não acontecer.
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.jtouchmenu.js”></script>

Passo 4 – Criando as marcações HTML para serem lidas pelo script.

Da mesma forma que você deve chamar pelos scripts em todas as páginas, todas as páginas devem ter a presença das marcações link que fazem a referencia ao menu, da seguinte forma:
<link rel=”tipo_de_link” href=”destino_do_link” title=”relação_do_link” />
Como exemplo de uso pode-se usar como abaixo:

<link rel=”start” title=”inicial” href=”index.html” />
<link rel=”chapter” title=”blog” href=”blog.html” />
<link rel=”chapter” title=”artigos” href=”artigos.html” />
<link rel=”section” title=”[artigos] linux” href=”linux.html” />
<link rel=”section” title=”[artigos] mobile” href=”mobile.html” />
<link rel=”section” title=”[artigos] windows” href=”windows.html” />
<link rel=”subsection” title=”[artigos][windows] internet explorer” href=”internet.html” />
<link rel=”subsection” title=”[artigos][windows] firefox” href=”firefox.html” />

A instalação e uso do script não tem segredos, com poucos códigos conseguimos um bom resultado em um ambiente móvel.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s