Crear una barra de navegación horizontal con listas y CSS

  • Por
Cómo crear utilizando CSS y listas de HTML una barra de navegación horizontal dinámica.
Ya hemos estudiado la aplicación de estilos CSS a listas en diversos artículos de DesarrolloWeb.com, en el taller de CSS y en los distintos manuales que tenemos sobre la materia. En concreto, hay un artículo que vamos a completar con este otro taller de CSS, en el que vimos cómo Crear una barra de navegación vertical con listas y CSS. En este caso veremos como crear una barra de navegación, pero en horizontal. Además veremos como alterar los estilos cuando se pasa el ratón por encima de los enlaces.

Básicamente, para crear una barra de navegación horizontal por listas, tenemos que conseguir que los elementos de la lista se pongan uno detrás de otro en la misma línea (el comportamiento normal de las listas es que aparezcan los elementos uno debajo del otro en distintas líneas). Además, cada elemento será un enlace y al pasar el ratón sobre ellos, debe resaltarse de alguna manera el elemento, lo que aportará el dinamismo a la barra de navegación. Todo esto se puede hacer con CSS. Veremos cómo a lo largo de este artículo.

Sería ideal ver el resultado final del ejemplo en marcha antes de continuar.

Código HTML de la lista - Barra de navegación

El código HTML de la lista para hacer la barra de navegación es sencillo. La complejidad la reservaremos para las declaraciones de estilos.

<div id="navegador">
<ul>
<li><a href="#">Elemento 1</a></li>
<li><a href="#">Elemento 2</a></li>
<li><a href="#">Elemento 3</a></li>
<li><a href="#">Elemento 4</a></li>
</ul>
</div>


Como se puede comprobar, tenemos una capa llamada "navegador", que tiene el código de la lista, que en principio no necesita nada especial. Simplemente se colocarán los elementos LI deseados y un enlace dentro de cada uno.

Código CSS de la lista

Primero vamos a definir el estilo de la lista (etiqueta UL):

#navegador ul{
   list-style-type: none;
   text-align: center;
}


Simplemente indicamos, con list-style-type: none;, que no se van a utilizar bolitas o marcas de ningún tipo al lado de los elementos de la lista.

Luego, para centrarla le asignamos text-align: center;

Ahora los estilos para cada uno de los elementos de la lista (etiqueta LI):

#navegador li{
   display: inline;
   text-align: center;
   margin: 0 10px 0 0;
}


Esto indica varias cosas. Primero le damos un display: inline; para conseguir que los elementos se dispongan uno detrás de otro en la misma línea. Luego con text-align: center; volvemos a indicar que cada uno de los elementos tiene el texto centrado y por último con margin indicamos un margen entre los elementos.

Los estilos para los enlaces serían como estos:

#navegador li a {
   padding: 2px 7px 2px 7px;
   color: #666;
   background-color: #eeeeee;
   border: 1px solid #ccc;
   text-decoration: none;
}


Primero hacemos un padding: 2px 7px 2px 7px; para que el enlace tenga un poco de espacio a los lados. Esto nos vendrá también bien para que el área que se puede pinchar del enlace sea mayor. Luego marcamos el color del enlace con color: #666;, un fondo background-color: #eeeeee;, el borde border: 1px solid #ccc; y por último le quitamos el subrayado a los enlaces con text-decoration: none;.

Para acabar, utilizamos la pseudoclase hover para definir un estilo distinto cuando el ratón pasa por encima de un enlace.

#navegador li a:hover{
   background-color: #333333;
   color: #ffffff;
}


Eso es todo! acabamos de terminar nuestra barra de navegación horizontal con listas y CSS.

Este es el código completo del ejemplo:

<html>
<head>
<title>Barra de navegación horizontal con listas y estilos CSS</title>

<style type="text/css">
#navegador ul{
   list-style-type: none;
   text-align: center;
}
#navegador li{
   display: inline;
   text-align: center;
   margin: 0 10px 0 0;
}
#navegador li a {
   padding: 2px 7px 2px 7px;
   color: #666;
   background-color: #eeeeee;
   border: 1px solid #ccc;
   text-decoration: none;
}
#navegador li a:hover{
   background-color: #333333;
   color: #ffffff;
}
   </style>
</head>

<body>


<div id="navegador">
<ul>
<li><a href="#">Elemento 1</a></li>
<li><a href="#">Elemento 2</a></li>
<li><a href="#">Elemento 3</a></li>
<li><a href="#">Elemento 4</a></li>
</ul>
</div>

</body>
</html>


Se puede Ver el ejemplo en marcha en una página aparte.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

fernanda_quiones-229599

15/4/2010
2 listados en un html?
Hola! tengo 2 listados en un html, uno de navegación horizontal, como el del ejemplo y otro menu que es hacia abajo, el problema es que hago uno, queda perfecto, pero comienzo a hacer el otro y me agarra las caracteríaticas del primero, apesar de tener diferentes estilos en una hoja de estilos y diferentes ID.
Se pueden hacer dos listas con estilo en una misma pagina html? cómo?

fernando

08/9/2011
preguntra sobre el navegador
si, pero como se convierte en una archivo .exe para poderlo insrustar en el browser......porque asi sale como una cabecera de la pagina web.....

isaac

02/10/2011
problemas con etiqueta IE9
hola amigos tengo un problema curioso en una lista <ul> os explico:
cuando creas una lista dentro de un div por ejemplo,dentro de ella varios <li>, cuando le pones al div por ejemplo text-align:cener si esto lo vizualizas en cualquier navegador,por ejemplo;ie7,8 firefox se vera todo perfectamente, es decir esos puntitos estaran pegados a cada palabra de cada <li> y todo centrado,pero por alguna razon curiosa e inexplicable si esto mismo lo visualizas en ie9 esos mismo punton no se pegan a cada palabra o frase de los <li> se quedan siempre a la izquierda y no se mueven,incluso si le pones que se alinee a la derecha esos puntos no se moveran,no se supone que ie9 respeta mas las normas que nunca, porque ie8 lo hace perfectamente...
ayuda gracias

Gonzalo

29/1/2014
Gracias
Muchas gracias por este tutorial rápido e incluso dar un ejemplo, me sirvió :)

Sebastian

01/5/2014
Barra de opciones en movil
Una consulta.. como adapto esta barra en un navegador movil? Tenes alguna pagina para recomendarme??
Muy interesante, desde ya muchas gracias!!

Iliana

21/5/2014
gracias
muy bien detallado y con ejemplo, gracias por compartirlo.

Fico

22/1/2015
Barra navegación
Muy instructivo, especialmente para novatos como yo. Gracias

Alberto

06/2/2015
Sencillo y bueno
Muchas gracias, sencillo y eficaz.

Carmina

13/12/2015
Felicitaciones
¡Muy bueno! Me sirvió muchísimo... probé otros dos tutoriales y no me funcionaba del todo. Sencillo y fácil.

Hernan

19/2/2016
Genial
gracias. el código es perfecto y me encanta como se visualiza. :)

Erick

09/4/2016
agradecer
muchas gracias me haz salvado ;)

diseño web

08/9/2016
diseño web
muy buen post para crear y usar en diseño web www.centralwebmaster.com.ar

landro

21/9/2016
no entiendo
que hueva con este calor ni leer quiero igula ni sirvio copiar y pegar gracias cuate

usuario de google

13/4/2017
COMO LE AGREGO UN DESTINO
ya pude hacer la barra pero lo unico que me falta es agregarle un destino .html como lo ago ayúdenme porfa... algun buen samaritano