ProInf.net

Barra de navegación horizontal CSS

Francisco 25-04-10
Iconos de la barra de navegación

Vamos a crear paso a paso una barra de navegación en horizontal para una página web.

El código HTML consiste en una lista no numerada de enlaces. Mediante una hoja de estilos CSS le daremos el formato deseado.

Código base HTML

La barra de navegación es una lista no numerada de enlaces dentro de una división con identificador navegador. Mediante la aplicación posterior de los estilos CSS conseguiremos el aspecto y comportamiento deseado. En este ejemplo emplearemos letras del alfabeto griego.

<div id="navegador">
  <ul>
    <li><a href="#">α Alfa</a></li>
    <li><a href="#">β Beta</a></li>
    <li><a href="#">γ Gamma</a></li>
    <li><a href="#">δ Delta</a></li>
    <li><a href="#">ε Epsilon</a></li>
  </ul>
</div>

Ejemplo:

Métodos utilizados

Crearemos dos barras de navegación horizontal con dos métodos distintos.

  1. Elementos de la lista en línea
  2. Enlaces flotantes con imágenes

Método 1: Elementos de la lista en línea

En este caso usaremos texto sin imágenes.

  • Para que el menú quede horizontal cambiamos la visualización en bloque de los elementos de lista <li> por visualización en línea: display:inline; Los elementos en línea fluyen con el texto como hacen las palabras de una frase. Los elementos en bloque se comportan como párrafos, es decir, se muestran a partir de una nueva línea.
  • Para cambiar el aspecto de los elementos del menú al pasar el ratón por encima usamos la pseudo-clase :hover.

CSS:

#navegador li {
  display:inline;
}
#navegador ul {
  list-style:none;
  margin:0;
  padding:0;
}
#navegador a {
  background:#ffa;
  border:2px solid #993;
  padding:1em;
  text-decoration:none;
}
#navegador a:hover {
  color:#fff;
  background:#339;
  border:2px solid #06c;
  text-decoration:underline;
}

Ejemplo:

Descargar:


Método 2: Enlaces flotantes con imágenes

Objetivo: Los enlaces flotarán para que queden dispuestos en horizontal. Cada enlace mostrará un icono apagado y cuando el ratón pase por encima se mostrará el icono encendido.

2-A) Los iconos

Hemos de conseguir cinco imágenes preferentemente del mismo tamaño. A modo de ejemplo podemos bajarnos 5 iconos Crystal Clear creados por Everaldo Coelho que tienen un tamaño de 128×128 píxeles. Estos iconos los guardaremos en una subcarpeta llamada imagenes1 con los siguientes nombres: icono1.png, icono2.png, etc.

Duplicamos la carpeta imagenes1 en otra llamada imagenes2. Los iconos de la primera carpeta los iremos abriendo con el programa GIMP para aplicarles una serie de efectos:

  • Colores → Brilo y contraste → Brillo al máximo (Hacerlo 2 veces)
  • Filtros → Desenfoque → Desenfoque gaussiano → 3 píxeles.

2-B) El código HTML

Es necesario añadir una serie de elementos adicionales al código base HTML:

  • el atributo identificador para poder distinguir un enlace de otro en la hoja de estilos.
  • el atributo title para que salga un pequeño mensaje emergente al situar el ratón encima.
  • una etiqueta span para poder ocultar parte del texto del enlace.
<div id="navegador">
  <ul>
    <li><a href="#" id="alfa" title="Primera opción">α <span>alfa</span></a></li>
    <li><a href="#" id="beta" title="Segunda opción">β <span>beta</span></a></li>
    <li><a href="#" id="gamma" title="Tercera opción">γ <span>gamma</span></a></li>
    <li><a href="#" id="delta" title="Cuarta opción">δ <span>delta</span></a></li>
    <li><a href="#" id="epsilon" title="Quinta opción">ε <span>epsilon</span></a></li>
  </ul>
</div>

Ejemplo:

2-C) Tamaño de los enlaces

Hacer los enlaces grandes, del tamaño de los iconos, es decir de 128×128 píxeles. Les pondremos también un borde alrededor para apreciar su tamaño. Para que a los enlaces se les pueda poner un ancho y alto hemos cambiar su modo de visualización de "en línea" a "bloque".

CSS:

#navegacion a {
  display:block;
  width:128px;
  height:128px;
  border:1px solid #ccc;
}

Ejemplo:

2-D) Quitar los puntos de viñetas

Además hay que quitar tanto el margen izquierdo, así como el relleno izquierdo, para que funcione en versiones antiguas de IE.

CSS:

#navegacion ul {
  list-style:none;
  margin:0;
  padding:0;
}

Ejemplo:

2-E) Poner en horizontal con flotar

Flotar a la izquierda cada elemento de la lista. Si el menú se quiere en vertical se puede ignorar este paso.

Para que los elementos flotantes no influyan en el texto que viene a continuación tenemos las siguientes opciones:

  1. Bajar la etiqueta que viene después del menú hasta que no haya elementos flotantes a su lado: clear:both;
  2. Agrandar la división #navegador para que quepan todos sus elementos flotantes. Para ello el contenedor ha de flotar a su vez y tener toda la anchura posible: float:left; width:100%;
  3. Especificar el tamaño exacto que necesitamos para el #navegador: width:640px; height:128px;

CSS:

#navegacion a {
  float:left;
}

Ejemplo:

2-F) Imagen de fondo para cada enlace

Para poner una imagen de fondo distinta a cada enlace hay que poder distinguir un enlace de otro. Para ello usaremos el atributo id de los enlaces. Si además añadimos el atributo title podemos poner un mensaje emergente en cada enlace. Para poner la imagen de sustitución hemos de usar la pseudo-clase hover.

CSS:

#alfa { background:url(imagenes1/icono1.png); }
#beta { background:url(imagenes1/icono2.png); }
#gamma { background:url(imagenes1/icono3.png); }
#delta { background:url(imagenes1/icono4.png); }
#epsilon { background:url(imagenes1/icono5.png); }

#alfa:hover { background:url(imagenes2/icono1.png); }
#beta:hover { background:url(imagenes2/icono2.png); }
#gamma:hover { background:url(imagenes2/icono3.png); }
#delta:hover { background:url(imagenes2/icono4.png); }
#epsilon:hover { background:url(imagenes2/icono5.png); }

Ejemplo:

2-G) Ocultar el texto

Si queremos que el texto de los enlaces no se vea lo correcto es ocultarlo en CSS y no borrar el texto. Si lo hacemos así y en el navegador desactivamos el CSS o desactivamos las imágenes, el menú se podrá seguir utilizando. En el HTML el texto que quisiéramos ocultar lo incluímos dentro de una etiqueta span. La etiqueta span es una etiqueta que se visualiza "en línea" sin ningún formato predeterminado.

CSS:

#navegacion span {
  display:none;
}

Ejemplo:

2-H) Resultado final

CSS completo:

#navegador a { display:block; width:128px; height:128px; float:left; text-decoration:none; }
#navegador ul { list-style:none; margin:0; padding:0; float:left; width:100%; }
#navegador span { display:none; }

#alfa { background:url(imagenes1/icono1.png); }
#beta { background:url(imagenes1/icono2.png); }
#gamma { background:url(imagenes1/icono3.png); }
#delta { background:url(imagenes1/icono4.png); }
#epsilon { background:url(imagenes1/icono5.png); }

#alfa:hover { background:url(imagenes2/icono1.png); }
#beta:hover { background:url(imagenes2/icono2.png); }
#gamma:hover { background:url(imagenes2/icono3.png); }
#delta:hover { background:url(imagenes2/icono4.png); }
#epsilon:hover { background:url(imagenes2/icono5.png); }

Descargar:


Enlaces relacionados

  • Iconos Crystal Clear por Everaldo Coelho
  • El programa GIMP para retocar imágenes
  • Códigos HTML y CSS de Listamatic para menús en vertical y horizontal.
Compartir

 

Artículos relacionados:

Ir arriba