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
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
#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
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.
.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/
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
Lo ajustas con border-radius como en tu ejemplo. 0-100% :)
Gracias!!! Te lo agradezco desde Cuba!