Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Login desplegable con html, css y jquery
#1
Este script está funcional no ganará ningun premio de programacion (tal vez este en el top ten de los mas malos)
pero supongo les será de utilidad para miles de cosas, bueno a decir verdad solo sirve para tunear un login pero de seguro alguien le encontrará mas utilidades, solo resta tunear el menu desplegado con respecto al boton así que quien lo ocupe deberá tomarse un par de aspirinas.

Index.html
Código:
<!DOCTYPE html>
<html lang="es">

<head>
<title>Login desplegable<title>
<!--Debajo insertamos la libreria de jquery -->
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
        <!--Creamos una lista ul o como quieran poner el login, lo que impora es el id -->
        <ul>
            <li><a href="#" id="showlogin" >Iniciar sesión</a></li>
            <li><a href="#">Registrarse</a></li>
        </ul>
              <div id="loginpanel" style="display:none;">
            <form action="#" method="post">
            <label>Usuario</label><input type="text" id="username" />
            <label>Contrase&ntilde;a</label><input type="password" id="password" />
            <button type="submit" id="submit">Entrar</button>                    
             </form>
        </div>          
</body>
<!--no sé si lo mejor es meter el script jquery abajo del todo pero funciona XD -->
</html>
<script>
$(document).ready(function() {
    $('#showlogin').click(function() {
      $('#loginpanel').slideToggle('fast', function() {
      });
    });
});
</script>

creo que a estas alturas ya saben que deben hacer una llamada al css con una etiqueta <link> dentro del head

Código:
/*Menu desplegado*/
#loginpanel {
    background-color:#339900;
    display:none;
    width: 130px;
    padding: 10px;
    margin-left:1060px; /*cambien esta posicion de acuerdo a su gusto*/
    margin-top:20px;
    position: absolute;
    border-radius:5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#loginpanel input {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:5px;
    height: 15px;
    color: gray;
    font-size: 16px;
    width: 90%;    
    margin-bottom: 10px;
}

#loginpanel button {
    padding: 5px;
}

Eso es todo por ahora, si veo que alguien anda jugando con los css y le queda de fabula seguiré compartiendo scripts
S4lud0S


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  PRIMER PAGINA WEB HTML DEL MUNDO Smithcanal 26 410 03-10-2017, 04:23 PM
Último mensaje: alieninc
  Plantillas HTML Responsive Free Profesionales gassip 16 391 13-06-2017, 03:45 AM
Último mensaje: gassip
Música [Aporte] Reproductor de audio html djsmokingcr 11 327 02-05-2017, 03:04 AM
Último mensaje: gassip
  jQuery: ocultar imágenes rotas FullPirata 10 440 03-01-2017, 09:26 PM
Último mensaje: gassip
  [Tutorial] Métodos para redireccionar URLs (HTML, PHP y Javascript wiston3 1 167 01-12-2016, 11:12 PM
Último mensaje: zeuz
  Expandir etiquetas HTML en documento .php con EMMET gassip 2 203 18-11-2016, 07:28 PM
Último mensaje: DaveNPlay
  [Aporte] PcTag: Información HTML KesiaMuller 0 179 28-10-2016, 05:42 AM
Último mensaje: KesiaMuller
  [Tutorial] Curso de PSD a HTML a WP habacuc78 14 642 31-08-2016, 09:33 PM
Último mensaje: ServiRemate
Estrella [Aporte] La nueva generación de jQuery tendrá cambios en su nomenclatura carlsmartg 1 185 03-08-2016, 09:23 PM
Último mensaje: Boreas
  Fb Access: Login simple con el Facebook SDK y PHP cmascreativo 0 237 18-02-2016, 05:59 PM
Último mensaje: cmascreativo



Usuarios navegando en este tema: 1 invitado(s)