Cómo hacer un desplegable Entrar

La mayoría de las personas inician sesión en un sitio web al menos una vez por día. El usuario hace clic en el enlace de inicio de sesión , introduce su nombre de usuario y contraseña, haga clic en "Iniciar Sesión " y espera a que la página vuelva a cargar . Esto toma sólo unos segundos . Sin embargo , cuando se utiliza un menú desplegable iniciar sesión en su sitio web , se elimina la necesidad de recargar la página. Usted puede crear este tipo de inicio de sesión mediante el uso de HTML , CSS y JavaScript . Aunque pueda parecer difícil , el proceso de crear una lista desplegable para acceder al sistema es relativamente simple. Instrucciones
1

Crear una nueva página HTML y pega este código para crear el registro - en forma :

< div id = " topnav " class = " topnav "> Ya tienes una cuenta ?

< método form = "post " id = acción " signin " = " http://yourwebsite.com/sessions "> Nombre de usuario o correo < /label> < input id = name " nombre de usuario" = valor " nombre de usuario" = "" title = " " tabindex = "username" type = " 4 text" > < /p> < label para = "password "> contraseña < /label> < input id = name " password" = valor "password" = "" title = " " tabindex = "password" type = " 5 password " > < /p>

Recordarme < /label> < /p>

¿Olvidaste tu contraseña ? < /a> < /p>

olvidado su nombre de usuario ? < /A> < /p> < /form> < /fieldset > < /div >

Reemplazar " yourwebsite.com " con su dominio. La etiqueta de "

" muestra el formulario y cambiar cualquiera de los campos del texto para adaptarse a sus necesidades.
2

Copia y pega este código CSS de su archivo CSS o añadirlo a la página web en la que se definen los estilos :

# container {width : 780px ; margin: 0 auto; position: relative ;}

# content {width : 520px ; min-height : 500px ; } a : link , a: visited {color : # 27b ; text-decoration : none;} a: hover { text-decoration : underline ; } a img {border -width: 0 ; } # topnav {padding : 0px 10px 12px ; font- size: 11px ; line-height : 23px ; text-align : right ; } # topnav a.signin {background : # 88bbd4 ; padding : 4px 6px url ( " images /signin - nav- bg- ie.png ") no-repeat 0 0 ; * padding : 12px 4px 6px ; } # topnav a.signin : hover {background : # 59B , * background : url transparente ( " images /signin - nav- bg- hover ie.png ") no-repeat 0 0 ; * padding : 12px 4px 6px ; } # topnav a.signin , # topnav a.signin : hover { * background-position : 0 3px importante ;}

a.signin {position : relativa; margin-left : 3px ;} a.signin lapso 50 % ; padding : 16px 4px 6px 0 ; } # topnav A.MENU abierto {background : # ddeef6 importante ; color: # 666 importantes; contorno : none;} # small_signup {display : inline ; float : none ; line -altura: 23px ; margen : 25px 0 0 , ancho : 170px ;} lapso a.signin.menu abierto {background -image: url ( "images /toggle_up_dark.png "); color: # 789 ;}

este código CSS define el "Sign In" botón.
3

Copia y pega el código CSS de su archivo CSS oa la página web en la que se definen los estilos de definir el registro en forma :

# signin_menu transparente; text-align : left; padding : 12px ; top: 24.5px ; derecha: 0px ; margin-top : 5px ; margin-right : 0px ; * margin-right : - 1px ; color: # 789 ; font- size: 11px ;}

# entrada signin_menu [ type = text] , la entrada # signin_menu [ type = contraseña] {display : block; - moz- border-radius : 4px ; - webkit- border-radius : 4px ; frontera label} # { signin_menu ; # 6AC : : 1px # ACE sólido; font- size: 13px ; margin: 0 0 5px ; padding : 5px ; ancho : 203px ; :; } # signin_menu p {margin 0 } # signin_menu a {color font-weight : normal; } # signin_menu p.remember {padding : 10px 0 ; } # signin_menu p.forgot , # signin_menu p.complete { claro: ambos; margen : 5px 0 ; } # signin_menu pa {color : # 27B ! importante ; } # signin_submit {- moz- border-radius : 4px ; - webkit- border-radius : 4px ; fondo : # 39d url ( 'images /bg- btn- blue.png ' ) repeat -x desplácese 0 0 ; frontera : sólido # 39D 1px ; color: # fff ; text-shadow : 0 - 1px 0 # 39d ; padding : 5px 10px 4px ; font- size: 11px ; margin: 0 5px 0 0 ; font-weight : bold; } # signin_submit :: -moz -focus - interior {padding : 0 ; fronteriza : 0 ; } # signin_submit : hover , # signin_submit : focus { background-position : 0 - 5px ; cursor : pointer ;}
4

Crear un nuevo archivo JavaScript . Utilice el código JavaScript para mostrar u ocultar la lista desplegable de inicio de sesión en la casilla cuando los usuarios hacer clic en " Sign In" botón :

< script src type = " javascripts /jquery.js " = " ; . . text /javascript " . > < /script>