Deprecated: Assigning the return value of new by reference is deprecated in /home/summarg/domains/summarg.com/public_html/wp-content/plugins/post-series/post-series.php on line 841 Notice: is_feed was called incorrectly. Conditional query tags do not work before the query is run. Before then, they always return false. Please see Debugging in WordPress for more information. (This message was added in version 3.1.) in /home/summarg/domains/summarg.com/public_html/wp-includes/functions.php on line 3245 Formularios integrados a tu menu dropdown con FormBox | SummArg

SummArg | Cursos y recursos para webmasters

25/05/2011

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.

Dejar un comentario