En esta séptima clase del curso de técnicas de maquetación web, aprenderemos cómo hacer una sección de navegación por pestañas en nuestro sitio web.
Sabemos que una de las cuestiones básicas que debemos tener en cuenta a la hora de proyectar un sitio web es su usabilidad. Uno de los componentes que pueden ayudarnos a mejorarla, son las secciones de navegación por tabs, o pestañas.
Estas secciones se caracterizan por mostrar el contenido del sitio en distintas pestañas, navegables por parte del usuario con un simple click. ¡Vamos a ver cómo maquetarlas!
¡Hecho! Ya tenemos nuestra navegación por tabs lista para funcionar. Como podéis ver, la ventaja de estos elementos, es que no es necesario cambiar de página para acceder a un contenido u otro, sino que todo fluye dentro del mismo entorno.
En este momento, nuestro usuario ya puede desplazarse entre las distintas tabs a golpe de click. Estas muestran interacción gracias al código javascript que hemos incorporado. Recuerda que tienes disponible todo el código para descargar en esta misma página.
Las pestañas pueden tomar muchas formas y estar en varias ubicaciones, como ya sea en la parte superior, o en un lateral, com podéis ver en la Intranet. En esta ocasión os proponemos crear una pequeña navegación de 5 pestañas superiores.
Y como siempre, si tenéis cualquier duda o pregunta, podéis mandarla a través del formulario de soporte de la intranet, pestaña soporte ;) ¡Nos vemos en la siguiente lección!
Todos los capítulos de este curso:
- Curso de técnicas de maquetación web #1. Hero Image
- Curso de técnicas de maquetación web #2. Sombras
- Curso de técnicas de maquetación web #3. Sticky menu
- Curso de técnicas de maquetación web #4. Menú hamburguesa
- Curso de técnicas de maquetación web #5. Transiciones
- Curso de técnicas de maquetación web #6. Acordeón
- Curso de técnicas de maquetación web #7. Pestañas o tabs
- Curso de técnicas de maquetación web #8. Animacioness
- Curso de técnicas de maquetación web #9. Formularios
- Curso de técnicas de maquetación web #10. Líneas con CSS