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.