[Ayuda] Login Flotante en JS

[danny920825]

Hola amigos, estoy intentando hacer un boton flotante a lo largo de toda la web con el Glyphicon de Usuario. Y quiero que a su vez, sea un dropdown con los enlaces al Login y Registro de mi sitio. Estoy haciendolo en JS porque es como va a quedar al final y porque realmente es mas facil de reutilizar. Aqui vamos

Código (javascript) [Seleccionar] Expandir



function toLogin() {
    $("body").append('<a href="#" id="Login"><span id="toLogin" class="glyphicon glyphicon-user"></span></a>');
   
    /*
    *Aqui Iria la funcion para mostrar el dropdown
    *
    */
}


$(document).ready(function () {
    toLogin();   
});




Y este es el estilo

Código (css) [Seleccionar] Expandir


#login{
    display:block;
    text-decoration:none;
    position:fixed;
    bottom:50%;
    left:10px;
    z-index: 1000;
    overflow:hidden;
    width:4em;
    height:4em;
    border: 2px #000000 dashed;
    border-radius: 10%;
    text-indent:100%;
    background-color: #5e5e5e;
}
#toLogin{
    font-size: 3em;
}

Lo que quiero lograr es un circulo de un tamaño visible con un borde discontinuo y dentro un glyphicon. Que cuando le pase el mouse por encima me muestre en un desplegable los enlaces a Login y Register. Ayuda por favor

[EFEX]

Siempre que puedas hacerlo con css, hazlo, en js vas a tener que cambiar las propiedades con js y es molesto.

Con display es mas que suficiente.

Código (css) [Seleccionar] Expandir

.profile{
  position:absolute;
  background:#aaa;
  right:200px;
}

.profile .dropdown{
  position:absolute;
  background:#eee;
  padding:10px 20px;
  display:none;
}

.profile:hover .dropdown{
  display:block;
}

https://jsfiddle.net/7Lzno2q8/1/

[danny920825]

Interesante!! Voy a probarlo en cuanto llegue a la casa. Pero.... Y se puede hacer el boton redondo y con un glyphicon en el medio como lo estaba intentando arriba?? De ser posible, como seria? Gracias por adelantado

[EFEX]

Lo ajustas con border-radius como en tu ejemplo. 0-100%

[danny920825]

Gracias!!! Te lo agradezco desde Cuba!