Cómo hacer una interfaz de usuario similar a esta> Ayuda de cuentas

Answer 1

En primer lugar, ese componente acordeón es interesante y está bien desarrollado, pero el contexto en el que se usa no es excelente. Puede sonar tonto, pero aquí hay algunas razones desde la parte superior de mi cabeza:

• UX se rompe cuando obtienes estas pestañas acordeón increíblemente animadas, pero cuando seleccionas una de las opciones, se te redirige a una página donde esta magia ya no ocurre. El momento de asombro simplemente se desvanece.
• Para buscar una opción, debe expandir todas las pestañas y buscarla. Por ejemplo, si necesito buscar la opción de cambio de contraseña y no estoy seguro de en qué pestaña se encuentra, necesitaría expandir las pestañas probables. Hubiera tenido más sentido si se hubiera utilizado en algún lugar donde las pestañas sean más ‘exclusivas’.
• Los bienes inmuebles de la página no se están utilizando adecuadamente. Mire todo ese espacio en blanco en la parte inferior de la página. Se ve feo.

No dudo de la ingeniería aquí, es increíble. El componente funciona a la perfección, pero parece ser uno de esos escenarios en los que tiene una solución increíble para un problema que no existe.

Bastante bashing! Ahora, volvamos al problema real. Supongo que está interesado en los procedimientos de la funcionalidad (animación) de la interfaz de usuario y no en los estilos CSS reales. En realidad es bastante simple. Tenemos un conjunto de pestañas y cada pestaña tiene los siguientes tres componentes principales:

• Título de la pestaña: inicia la animación del contenido de la pestaña y, bueno, el título
• Contenido de la pestaña: la lista de opciones que crece hacia abajo cuando se selecciona la pestaña
• Imagen de pestaña: crece hacia arriba cuando se selecciona la pestaña

En cuanto a los detalles sangrientos, podemos definir las pestañas usando etiquetas

. Cada

debe tener su propio título (), contenido (

) e imagen () y debe vincular un evento onclick en estas etiquetas

. Lo siguiente es lo que debe hacerse en la devolución de llamada:

• Pestaña (
• )
  Es una buena idea mantener un marcador en la pestaña que está abierta. Entonces, aquí solo tenemos que desarmar el marcador de la última pestaña abierta, si corresponde, y configurarlo en el clic actual. Usar una clase es la mejor opción aquí. clase = “actual”
• Título de la pestaña
  No hay cambio en su estado como tal.
• Contenido de la pestaña
  Inicialmente estaba oculto. Por lo tanto, configure su ancho al 100% y anime su altura del 0 al 100% para obtener una animación deslizante.
• Imagen de pestaña
  Este es el complicado. Para mantenerlo oculto, no lo oculte usando display: none; sino que simplemente establece su parte superior: 100% para que su representación comience desde donde termina el contenedor haciéndolo efectivamente invisible. Onclick, solo necesita animar su propiedad CSS superior de 100% a 0 y le daría una animación deslizante.

Eso es. Tienes tu componente acordeón increíblemente animado. 🙂

Puede implementar lo anterior usando JS puro o usando alguna biblioteca. Tengo una implementación rápida y sucia de jQuery aquí para su referencia: http://jsfiddle.net/4wKP7/

Espero eso ayude. Úselo en algún lugar donde tenga sentido. 🙂