Diseño, Tutoriales, Video | 7 de septiembre de 2016

Cómo crear una navegación animada con CSS y jQuery

En este tutorial vamos a centrarnos en crear una navegación interna dentro de una página, de tal forma que, al clickear en los enlaces del menú, hagamos que ciertos contenidos se muestren y otros se oculten. Para conseguir este objetivo vamos a utilizar principalmente CSS y un poquito de jQuery.

El resultado final del ejercicio lo puedes encontrar en codepen y también lo puedes ver integrado a continuación.

See the Pen Tabs y animación by Francisco Aguilera G. (@FranciscoAMK) on CodePen.9272

Espero que este tutorial te sirva para aprender un par de cosas y practicar un poco.

Si quieres aprender más de este tipo de cosas, puedes inscribirte en mi curso Diseño web: HTML y CSS desde cero.

Si quieres ver más tutoriales de este tipo o quieres sugerir un tema, suscríbete a mi newsletter más abajo y házmelo saber.

Un abrazo,
@FranciscoAMK

También te podría interesar:

Calcular medidas rem en Less

Hace un tiempo publiqué un tutorial en el que analizamos las diferentes unidades de medida que podemos usar en CSS. Una de las unidades más interesantes son los REM, y el día de hoy conoceremos en video una técnica que te permitirá calcular las medidas en Less, de manera muy sencilla. Si no quieres usar […]

Seguir leyendo...

Checkout en dos Columnas WooCommerce

En esta transmisión vamos a aprender cómo y por qué hacer que la página de checkout de WooCommerce se muestre en dos columnas.

Seguir leyendo...

Un ejercicio para despertar la creatividad

En el video Estilo Libre, sin cortes ni ediciones de esta semana hablamos acerca de un ejercicio que realizamos cuando yo estudiaba diseño para potenciar la creatividad y comparto contigo algunos de los resultados obtenidos. Hasta la próxima. Un abrazo, @FranciscoAMK

Seguir leyendo...

Hay una opinión

  1. Buenas tardes Francisco. Super genial el tutorial. Mira estoy aprendiendo a realizar una página web con html5 y CSS3. Pero tengo un problema con el menú responsive para visualizarlo y hacer los clicks automáticos en las distintas resoluciónes. Podría usted hacerme el favor de echarle una mirada al código jquery…. Le agradezco. Mi email oscarmel@hotmail.es

Y tú ¿Qué opinas?

Puede que no te responda, pero ten por seguro que leeré tu comentario. Por si acaso, tu email no se mostrará ;)

Recibe más artículos como este cada semana

Únete a los 8.101 suscriptores y recibe cada miércoles nuevo contenido sobre diseño, sitios web y creatividad.

¡Ya estamos casi! revisa tu bandeja de entrada para verificar tu email por favor.
Uy! Parece que algo salió mal procesando tu solicitud. Recaraga la página e inténtalo de nuevo.

Ya me suscribí antes, no me muestres esto.