Una barra de navegación en HTML

27 octubre, 202330 octubre, 2023 Guillermo Varani 26 Views 0 Comment Programación y Robótica

¿Cómo creamos una barra de navegación en HTML? Aquí te lo explico. Vamos por partes.

Código HTML

Una barra de navegación puede ir en cualquier lugar de la página, pero en general se coloca arriba, en el header, antes del encabezado principal (h1).
En HTML se usan las etiquetas <nav> y </nav> para delimitarla.
Y dentro del bloque nav construimos una lista no ordenada con los ítems que queremos que haya en el menú.
Además, a cada ítem le agregamos un link para que al hacer clic nos lleve a la sección de la página que queramos.

<header>
<nav>
<ul>
<li><a href=»#inicio»>Inicio</a></li>
<li><a href=»#productos»>Productos</a></li>
<li><a href=»#contacto»>Contacto</a></li>
</ul>
</nav>
<h1>Título de la página</h1>
</header>
<main>
<h2 id=»inicio»></h2>
<h2 id=»productos»></h2>
<h2 id=»contacto»></h2>
</main>

Código CSS

¿Cómo hacemos para que esta barra de navegación realmente parezca un menú? Seguramente ya lo pensaste: con un poco de CSS. Lo fundamental es configurar la lista (ul) como grilla, con tantas columnas como opciones. Así nos queda un menú horizontal. El resto de opciones es opcional, sería algo así:

ul {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 50px;
}
li {
display: grid;
justify-content: center;
align-items: center;
}

Deja una respuesta Cancelar la respuesta