Formularios integrados a tu menu dropdown con FormBox

Ideal para formularios de registro, login, suscripción a newsletters y búsqueda, estos formularios se integran fácilmente a tu menú. Como extra se pueden añadir tooltips para ofrecer indicaciones mas específicas a los usuarios, todo esto utilizando jQuery y CSS3.

Demo | Descarga

Para utilizar estos formularios podemos colocarlos dentro de un elemento <li>, en un menú construido con una lista desordenada. El primer paso es descargar el script y linkearlo al documento.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/formbox.js"></script>

El código HTML de nuestro menú podría ser algo como esto:

<div id="tabs">
<ul id="tabMenu">
<li class="regular"><a href="home.html">Inicio</a></li>
<li class="dropdown"><a href="#tab1">Login</a></li>
<li class="dropdown"><a href="#tab2">Registrese</a></li>
<li class="dropdown"><a href="#tab3">Olvid&oacute; su contrase&ntilde;a?</a></li>
<li class="regular"><a href="home.html">Precio</a></li>
<li class="regular"><a href="home.html">Sobre mi</a></li>
<li class="dropdown"><a href="#tab4">Contactenos</a></li>
<li class="edges"> </li>
</ul>
</div>

<div id="tabContainer">
<ul id="tabPanes">
<li id="tab1">

<div class="formcontainer">
<div class="text"><label for="username">Nombre de usuario</label>
<input alt="Elija su nombre de usuario para registrarse al sitio." id="username" name="username" type="text"></div>
<div class="text"><label for="password">Contrase&ntilde;a</label>
<input alt="Elija una contrase&ntilde;a que contenga como m&iacute;nimo dos n&uacute;meros." id="password" name="password" type="text"></div>
<div class="text">
<input id="rememberme" name="rememberme" type="checkbox">Recordarme</div>
</div>
<center>
<div id="bluebutton" class="block"><button>Login</button></div>
</center>

</li>
</ul>
</div>

En el <input> vemos el atributo alt conentiendo el texto del tooltip. Dentro del archivo formbox.js se encuentra el comportamiento de los formularios y del tooltip. En el sitio de FormBox podemos encontrar un CSS para nuestro menú, el cual somos libres de modificar.