Para nós, desenvolvedores, existem scripts, códigos, métodos, estruturas que carregamos conosco ano após ano. Utilizamos essas soluções empacotadas em determinados momentos, muitas vezes salvando nossas horas de descanso.

Há muito tempo, em um sistema web em que o foco era a visualização de documentos, o cliente solicitou que o menu fosse retrátil. Ou seja, o menu superior da aplicação tinha que desaparecer se não estivesse sendo utilizado e aparecer quando o cursor do mouse se aproximasse dele. Para suprir isso criei uma função Javascript (utilizando CSS), e ficou bem bacana, simples e bastante útil. Esse script eu carrego comigo desde lá.

Precisei disso novamente alguns dias atrás, mas dessa vez fiz diferente. Tornei o script genérico, de modo que posso utilizar mais facilmente em qualquer aplicação web que tenha jQuery, e ainda coloquei em um repositório no Github (repositório GIT).

Sei que ainda é bastante primitivo e não está nos padrões de plugin jQuery. Mas essa é uma das intenções de colocar em um repositório público. Quem quiser usar e acoplar funcionalidades, otimizações e mesmo dar opiniões será muito bem-vindo. Pra quem não quer nem tocar no repositório, segue o link pra download (versão mais recente). Veja um exemplo do seu funcionamento aqui.

Pra explicar o que, como, onde, vou transcrever o README do repositório no Github abaixo.

upper-box

API javascript que transforma qualquer elemento de seu HTML (uma div, por exemplo) em uma caixa móvel posicionada na parte de cima da tela.

Para utilizá-lo é necessário estar com o jQuery adicionado ao documento.

O que acontece?

O elemento upper-box vai virar uma caixa invisível na parte de cima da tela.

Quando o usuário se aproxima com o mouse da parte superior da tela (body), o elemento ira rolar, abrindo e exibindo seu conteúdo.

Como usar?

Primeiro inclua os arquivos jQuery e upper-box no seu html, desta forma:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="upper-box.js"></script>

Seu uso é bem simples, basta adicionar upper-box ao class do elemento que vai virar upper-box.

Exemplo:

<div id='div1' class='divClass'>
 <h2>Olá,</h2>
 <p>Esta div não é um <b>upper-box</b>!</p>
</div>

<div id='div2' class='divClass upper-box'>
 <p>Esta div será um <b>upper-box</b>!</p>
 <p>Simples, não?!</p>
</div>

Espero não só ter ajudado como também ter instigado a colaboração de código. Sintam-se à vontade para realizar melhorias no simples – por enquanto – upper-box. Até mais!