Centrar la barra de navegación usando CSS

1. Barra de navegación en HTML
2. Crear una barra de navegación usando HTML y CSS
3. Alinear al centro la barra de navegación usando CSS

Este artículo explorará las diferentes posiciones de la barra de navegación, que es un componente esencial de un sitio web. También aprenderemos su propósito y diferentes configuraciones de alineación.

Barra de navegación en HTML

La GUI incluye un sistema de navegación o barra que facilita el acceso a la información a los usuarios. El componente de interfaz de usuario (UI) de una página web contiene enlaces a otras secciones del sitio web y se conoce como barra de navegación o barra de navegación.

Una barra de navegación suele aparecer en la parte superior de la página como una lista horizontal de enlaces. Puede colocarse encima o debajo del encabezado, pero siempre debe estar antes del contenido principal de la página.

La navegación de un sitio web debe ser sencilla de utilizar. Tiene un impacto significativo en el sitio web porque permite a los visitantes un acceso rápido a cualquier sección.

Puede haber dos estilos diferentes para la barra de navegación en su sitio web:

1. Barra de navegación horizontal
2. Barra de navegación vertical

Crear una barra de navegación usando HTML y CSS

Primero, veremos cómo se crea la barra de navegación utilizando componentes HTML. Dado que la barra de navegación es solo una lista de diferentes enlaces, los elementos de la lista, es decir, <ul> y <li>, se utilizan para crear una barra de navegación.

Cada elemento de la lista es un enlace a otra página del sitio web. Entonces, la lista se creará de la siguiente manera.

Código de ejemplo:

<div>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About Us</a></li>
        <li><a href="admission.php">Admissions</a></li>
    </ul>
</div>

li::marker {
    content: '';
}

Como es un elemento <ul> simple, para que actúe como una barra de navegación, debemos aplicarle diferentes propiedades CSS:

<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}

li a {
  display: block;
  padding: 9px;
  background-color: dark blue;
}
</style>

li::marker {
    content: '';
}

<div>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About Us</a></li>
        <li><a href="admission.php">Admissions</a></li>
    </ul>
</div>

En este ejemplo, diferentes propiedades CSS transmiten diferentes propósitos:

1. El tipo de estilo de lista se establece en ninguno para eliminar los marcadores de viñetas en la barra de navegación.
2. El “margen” y el “relleno” se establecen en cero para eliminar cualquier margen en el navegador de forma predeterminada.
3. La propiedad overflow se establece en un valor oculto para restringir que los elementos li se muevan fuera de la lista.
4. El “flotante” se establece en el valor “izquierdo” para crear la barra de navegación en la dirección horizontal.
5. Para los elementos <li>, se utiliza display: block para hacer que los hipervínculos estén en la posición del bloque, lo que hace que se pueda hacer clic en todo el bloque.

Podemos aplicar diferentes estilos y formatos a esta barra de navegación, como “color de fondo” y color de “texto”.

Alinear al centro la barra de navegación usando CSS

Para alinear la barra de navegación en el centro de la página, podemos agregar dos propiedades: una al elemento div y la otra al elemento <ul> así:

div{
text-align: center;
}
ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

<div>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About Us</a></li>
        <li><a href="admission.php">Admissions</a></li>
    </ul>
</div>

Hicimos el div para alinear el texto como el centro, y luego hicimos el elemento ul para mostrar inline-block. Esto hará que la lista de elementos se mueva al centro de la página.

Entonces, puede ver que hicimos la barra de navegación en el centro de la página simplemente asignando dos propiedades. También podemos aplicar múltiples propiedades que pueden decorar la barra de navegación de acuerdo con nuestros requisitos de diseño.