A maioria das pessoas entrar em um site pelo menos uma vez por dia. O usuário clica no log -in link, insere seu nome de usuário e senha, clicar em " Entrar " e aguarda a página para recarregar. Isso leva apenas alguns segundos . No entanto, quando você usa um log -in drop-down em seu site , você elimina a necessidade de recarregar a página. Você pode criar tal log -in usando HTML, CSS e JavaScript. Embora possa parecer difícil, o processo de criação de um drop-down log -in é relativamente simples. Instruções
Substituir " yourwebsite.com " com o seu domínio . A tag "
" exibe o formulário e alterar qualquer um dos campos de texto para atender às suas necessidades. Copie e cole este código CSS para o seu arquivo CSS ou adicioná-la a a página da Web onde você define os 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 ;} uma img { border-width : 0; } # topnav {padding : 10px 0px 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: 4px 12px 6px ;} # topnav a.signin : hover {background: # 59B ; * background: url transparente ( " images /signin -nav -bg - hover- ie.png " ) no-repeat 0 0 ; * padding: 4px 12px 6px ;} # topnav a.signin , # topnav a.signin : hover {* background-position : 0 3px importante ;}
a.signin {position : relative; margin-left: 3px ;} a.signin espaço 50%; padding: 4px 16px 6px 0; } # topnav A.MENU - aberto {background : # ddeef6 importante ; color: # 666 importantes; esboço : none;} # small_signup {display : inline ; float: none; linha -height: 23px ; margin: 25px 0 0 ; width: 170px ;} a.signin.menu - aberto espaço {background -image: url ( " images /toggle_up_dark.png "); color: # 789 ;}
este código CSS define o "Sign In" botão.
Copie e cole este código CSS para o seu arquivo CSS ou para a página da Web onde você define os estilos para definir o log -in forma :
# signin_menu transparente; text-align : left; padding: 12px ; top : 24.5px ; direita: 0px; margin-top : 5px ; margin-right : 0px; * margin-right : 1px - ; color: # 789 ; font-size: 11px ;}
# signin_menu input [type = text ], # signin_menu input [ type = senha] {display : block; -moz- border-radius : 4px ; - webkit border-radius : 4px ; fronteira : 1px # ACE sólidos; font-size: 13px ; margin: 0 0 5px ; padding: 5px ; width: 203px ;} # signin_menu p { margin: 0; } # signin_menu a { color: # 6AC ;} # signin_menu label { font-weight: normal; } # signin_menu p.remember {padding : 10px 0; } # signin_menu p.forgot , p.complete # signin_menu {clear : both; margin: 5px 0; } # signin_menu pa {color: # 27B ! importante ;} # signin_submit { -moz- border-radius : 4px ; - webkit border-radius : 4px ; background: # 39d url ( ' images /bg -btn - blue.png ') repeat- x 0 0 rolagem ; fronteira : 1px solid # 39D ; color: # fff ; text-shadow : 0- 1px 0 # 39d ; padding: 5px 4px 10px ; font-size: 11px ; margin: 5px 0 0 0 ; font- weight: bold ;} # signin_submit :: -moz -focus -interno {padding : 0; margem: 0; } # signin_submit : hover , # signin_submit : Foco { background-position : 0- 5px ; cursor : pointer ;}
Crie um novo arquivo JavaScript. Utilize este código JavaScript para mostrar ou ocultar a caixa drop-down log -in quando os usuários clicam no botão " Entrar" :
< script src = " /javascripts jquery.js " type = " ,. . text /javascript " . >
