Identifícate...

...o regístrate

codeando.net

Formulario de login desplegable con jQuery y CSS
mar, 03 feb 2009 - Por Jose y archivado en Javascript, CSS, Diseño y Tutoriales

Hola de nuevo, esta vez hemos estado más tiempo del que habríamos querido sin actualizar, pero aquí estamos de nuevo. Hoy vamos a explicar cómo hemos implementado el nuevo formulario de login (y de registro) que podéis ver si pulsais sobre el enlace que deberíais ver en la parte derecha de la cabecera y que está basado en el que podéis encontrar en este estupendo post de NETTUTS.

Bueno, para empezar crearemos la estructura HTML:

<div id="wrapper">
    <div id="panel">
        <div id="panel_contents">
        </div>
    </div>
    <div id="show_button"><a href="#">Login</a></div>
    <div id="hide_button"><a href="#">Esconder</a></div>
</div>

Como podéis ver, el código HTML es totalmente limpio, ni siquiera los enlaces llaman a funciones javascript (esto lo arreglamos luego gracias a las virtudes de jQuery). El contenido del panel irá, como ya habreis supuesto, en #panel_contents; en codeando.net hemos decidido incluir dos formularios, el de login y el de registro, pero cada uno puede colocar lo que desee.

El siguiente paso, será definir los estilos básicos (visibilidad, tamaño y posicionamiento):

#wrapper{
	text-align: center;
}
 
#toppanel {
	position: absolute;
	top: 134px;
	width: 612px;
	z-index: 25;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
 
#panel {
	width: 612px;
	position: relative;
	top: 1px;
	height: 400px;
	margin-left: auto;
	margin-right: auto;
	height: 0px;
	z-index: 10;
	overflow: hidden;
	text-align: left;
}
 
#panel_contents {
	height: 100%;
	width: 616px;
	position: absolute;
	z-index: -1;
}
 
#show_button {
	position: relative;
	top: -30px;
	left: 460px;
}
 
#hide_button {
	position: relative;
	font-size: 90%;
	font-weight: bold;
	z-index: 26;
	margin-top: -36px;
}

Por supuesto, el aspecto y el posicionamiento final dependerá de vuestras necesidades de diseño; este ejemplo está basado en la implementación que hemos hecho en codeando.net.

Y por último el código javascript que hará que funcione nuestro panel desplegable:

<script type="text/javascript"><!--
	$(document).ready(function() {
		$("div#show_button").click(function(){
			$("div#show_button").toggle();
			$("div#panel").animate({
				height: "460px"
			}, "fast", "swing", function() {$("div#hide_button").toggle();});
 
		});
 
		$("div#hide_button").click(function(){
			$("div#hide_button").toggle();
			$("div#panel").animate({
				height: "0px"
			}, "fast", "swing", function(){$("div#show_button").toggle();});
 
		});
 
	});
--></script>

Y con esto ya deberíamos tener nuestro panel funcionando, todo comentario será bien recibido. En otra entrega veremos cómo implementar un sistema de registro de usuarios con activación por email.

Déjanos tu comentario:

Intenta comentar sobre el tema del que trata el artículo y evita descalificaciones o palabras malsonantes.
 
 

Comentarios:

  1. Escrito por grimborg el mié, 04 feb 2009

    Oh, vaya, sin javascript no funciona. Están bien los efectos, pero desactivar javascript no debería romper una web (donde tenga sentido, no estamos hablando de Google Maps).

  2. Escrito por Jose el vie, 06 feb 2009

    En realidad sí funciona... sólo tienes que desactivar también CSS (sí, es mejorable para que haga no falta desactivar los estilos, pero aun así, cumple las normas básicas de accesibilidad) ¿cómo no te habías dado cuenta? :P

    Y aunque esté de acuerdo contigo en que lo correcto sería que toda página funcionase igual con o sin javascript, nos guste o no la tendencia está cambiando en ese aspecto, y los frameworks javascript cada vez son mas rápidos, útiles y potentes...

    Sinceramente, y en mi opinión, navegar hoy día por la web con javascript desactivado (antes de que nadie diga nada, no meto en el saco páginas de casinos, contenidos para adultos, etc...) es desaprovechar gran parte de la funcionalidad que se nos ofrece en estos momentos, pero claro, es sólo mi opinión ;)

  3. Escrito por Joan el lun, 24 ago 2009

    Lo he puesto todo en un mismo fichero y no funciona, después lo he puesto por separado, en un fichero .html, un .css y un .js, y no funciona!

    A alguien le funciona???

  4. Escrito por sas el jue, 14 ene 2010

    asas

  5. Escrito por julian el mar, 19 ene 2010

    Nop me Funka Bien por que sera?

  6. Escrito por Guillermo el mié, 03 mar 2010

    En Opera 10 no funciona. Aparece apenas una orejita, que se oculta al mover mouse. Raro.

  7. Escrito por e314 el mié, 24 mar 2010

    Si que funciona,pero hay que adjuntar los ficheros:
    jquery.js
    style.css

    Saludos ;)

  8. Escrito por elric el mié, 13 jul 2011

    muy buen post me sirvio mucho

  9. Escrito por Rippermetalero el mié, 27 feb 2013

    no funca a la primera y me la juego que es por que falta la libreria de jquery, voy a estudiar bien el code y les comento que onda para hacerlo andar, gracias por el aporte bro ;)

  10. Escrito por 1 el vie, 07 feb 2014

    -1'

  11. Escrito por 1 el vie, 07 feb 2014

    1

  12. Escrito por 1 el vie, 07 feb 2014

    1

  13. Escrito por 1 el vie, 07 feb 2014

    1