elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Introducción a Git (Primera Parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Ayuda] Login Flotante en JS
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Ayuda] Login Flotante en JS  (Leído 1,864 veces)
danny920825

Desconectado Desconectado

Mensajes: 175


Ver Perfil WWW
[Ayuda] Login Flotante en JS
« en: 18 Enero 2018, 20:48 pm »

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
  1.  
  2. function toLogin() {
  3.    $("body").append('<a href="#" id="Login"><span id="toLogin" class="glyphicon glyphicon-user"></span></a>');
  4.  
  5.    /*
  6.     *Aqui Iria la funcion para mostrar el dropdown
  7.     *
  8.     */
  9. }
  10.  
  11.  
  12. $(document).ready(function () {
  13.    toLogin();    
  14. });
  15.  
  16.  


Y este es el estilo
Código
  1. #login{
  2.    display:block;
  3.    text-decoration:none;
  4.    position:fixed;
  5.    bottom:50%;
  6.    left:10px;
  7.    z-index: 1000;
  8.    overflow:hidden;
  9.    width:4em;
  10.    height:4em;
  11.    border: 2px #000000 dashed;
  12.    border-radius: 10%;
  13.    text-indent:100%;
  14.    background-color: #5e5e5e;
  15. }
  16. #toLogin{
  17.    font-size: 3em;
  18. }

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


En línea

"Los que reniegan de Dios es por desesperación de no encontrarlo".
   Miguel de Unamuno
EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: [Ayuda] Login Flotante en JS
« Respuesta #1 en: 18 Enero 2018, 23:11 pm »

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
  1. .profile{
  2.  position:absolute;
  3.  background:#aaa;
  4.  right:200px;
  5. }
  6.  
  7. .profile .dropdown{
  8.  position:absolute;
  9.  background:#eee;
  10.  padding:10px 20px;
  11.  display:none;
  12. }
  13.  
  14. .profile:hover .dropdown{
  15.  display:block;
  16. }

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


En línea

danny920825

Desconectado Desconectado

Mensajes: 175


Ver Perfil WWW
Re: [Ayuda] Login Flotante en JS
« Respuesta #2 en: 19 Enero 2018, 00:41 am »

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
En línea

"Los que reniegan de Dios es por desesperación de no encontrarlo".
   Miguel de Unamuno
EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: [Ayuda] Login Flotante en JS
« Respuesta #3 en: 19 Enero 2018, 00:46 am »

Lo ajustas con border-radius como en tu ejemplo. 0-100% :)
En línea

danny920825

Desconectado Desconectado

Mensajes: 175


Ver Perfil WWW
Re: [Ayuda] Login Flotante en JS
« Respuesta #4 en: 19 Enero 2018, 00:55 am »

Gracias!!! Te lo agradezco desde Cuba!
En línea

"Los que reniegan de Dios es por desesperación de no encontrarlo".
   Miguel de Unamuno
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
ayuda con login
PHP
DJmixmancar 0 1,585 Último mensaje 14 Octubre 2008, 04:08 am
por DJmixmancar
Ayuda operaciones con coma flotante.
Programación Visual Basic
LS 2 2,043 Último mensaje 10 Mayo 2010, 07:33 am
por LS
necesito ayuda con punto flotante
Dudas Generales
urvreak 0 1,974 Último mensaje 29 Junio 2011, 21:43 pm
por urvreak
ayuda codigo para pasar de decimal a coma flotante iee 754
Programación C/C++
rx22 0 1,646 Último mensaje 12 Octubre 2015, 22:07 pm
por rx22
Ayuda para evitar poner flotante/double
Programación C/C++
lm_pa 1 1,471 Último mensaje 11 Abril 2017, 04:18 am
por Z@@K
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines