¿Cómo puede un principiante en HTML y CSS crear una barra de navegación como esta?

Sin poder ver una versión real en vivo de esto, tendré que hacer algunas suposiciones. Según el aspecto de la imagen, supongo que cuando selecciona un elemento en el menú, la imagen “subrayada” se desliza para colocarse debajo de ese elemento del menú y eso es lo que le interesa.

No he experimentado mucho con las transiciones CSS3, transiciones CSS, así que no sé si puedes lograr ese efecto solo con HTML y CSS. Sé que puede lograrlo con HTML, CSS y javascript (o alguna biblioteca de javascript como jQuery).

Si desea averiguar cómo lo hizo ese sitio específicamente, puede comenzar examinando el origen de la página y luego tomar la página en sí, así como el CSS que usa la página y el javascript que usa la página. Lograr eso en sí mismo será una buena práctica para usted. Una vez que haya agarrado todos los activos antes mencionados, debería poder recrear esa misma configuración directamente en su propia máquina y luego comenzar a piratearla para descubrir cómo funcionan las cosas.

Es muy fácil ver el código y crear la misma barra de navegación.

Cromo:

presione Ctrl + U para ver la fuente de cualquier página web.

presione Ctrl + Shift + I para acceder a las Herramientas del desarrollador para un mejor análisis.

FireFox:

para ver la fuente de la página presione Ctrl + U

para abrir Herramientas para desarrolladores, presione Mayús + F2

cada vez que le guste algo y quiera saber cómo está construido, simplemente lea la fuente de la página.

W3schools tiene algunos consejos interesantes sobre cómo hacer un encabezado similar. Cuando esté allí, encontrará su respuesta. Si desea algo listo, de esos encabezados también están disponibles con jquery / javascript. Simplemente copie Pegue el código en su código HTML y agregue el código CSS y ya está.

Para responder tu pregunta un poco más profundamente. Cree una clase para estos elementos

  • , haga que estén en línea y comience a agregar css a la clase para embellecerlos
  • Muchas maneras de hacer eso, daré una pista a una forma.

    • Lista desordenada
    • usa CSS para darle estilo a tu look
    • establecer
    • elementos para mostrar: en línea
    • establecer uno de los elementos con una clase personalizada que muestre un borde de línea más oscuro

    Tal vez los “menús de lista en línea css” de Google deberían proporcionarle algunos lugares relevantes para comenzar

    Si está buscando una demostración que detalle cómo hacer lo mismo, lamento tener que decepcionarlo aquí.

    Como principiante, sería más fácil para usted usar marcos como Bootstrap para hacer el trabajo. Pruebe la barra de navegación predeterminada [Componentes · Bootstrap] y luego, intente responder las siguientes preguntas:

    – ¿Qué cambios debo hacer para cada elemento del menú?
    – ¿Cómo haré que funcione el resaltado? (Supongo que funciona cuando estás en esa página)
    – ¿Qué fuente debo usar?

    Un poco de retoques y exploración deberían darte los resultados que esperabas, incluso mejores. ¡Buena suerte!

    Vaya a Aprender a codificar y seleccione el curso ‘Crear un sitio web’. Solo inténtalo.

    En ese curso, están enseñando a construir la página de inicio de un sitio web que tiene una barra de navegación, similar a su requisito.

    ¿El subrayado de la pestaña seleccionada se desliza en tiempo real o simplemente salta cuando selecciona una pestaña nueva?

    Un principiante puede hacer lo primero, pero tendrá dificultades para hacer lo segundo.