Barra de navegación CSS (2)

Hay dos formas de crear una barra de navegación horizontal. Uso de elementos de lista en línea o uso de float.

Elementos de lista en línea

Una forma de construir una barra de navegación horizontal es especificar los elementos <li> como en línea, además del código «estándar» del capítulo anterior.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

li {
display: inline;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Ejm explicado

  • display: inline; – Por defecto, los elementos <li> son elementos de bloque. Aquí, eliminamos los saltos de línea antes y después de cada elemento de la lista para mostrarlos en una línea.

Haciendo flotar ítems de lista

Otra forma de crear una barra de navegación horizontal es hacer flotar los elementos <li> y especificar un diseño para los enlaces de navegación.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li {
float: left;
}

li a {
display: block;
padding: 8px;
background-color: #dddddd;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Nota: overflow:hidden se agrega al elemento ul para evitar que los elementos li salgan de la lista.

Ejemplos de navegación horizontal

Enlaces alineados a la derecha

Vamos a alinear los enlaces a la derecha haciendo flotar los elementos de la lista a la derecha (float:right;):

Incluir bordes

Para ello tenemos que incluir la siguiente sintaxis a nuestro código

/* Agregue un borde derecho gris a todos los elementos de la lista, 
excepto al último elemento(last-child) */

li {
  border-right: 1px solid #bbb;
}

li:last-child {
  border-right: none;
}

Barra de navegación fija

Haz que la barra de navegación permanezca en la parte superior o inferior de la página, incluso cuando el usuario se desplace por la página:

Navegación fija en la parte superior

Barra de navegación fija

Añadir posición: sticky; a <ul> para crear una barra de navegación fija. Un elemento fijo alterna entre relativo y fijo, dependiendo de la posición de desplazamiento. Se coloca en relación hasta que se alcanza una posición de desplazamiento determinada en la ventana gráfica; luego, se «pega» en su lugar (como position: fixed).