Un menú minimalista

JMiur

La idea de tutorialzine.com no es sólo minimalista proque así llaman a este tipo de menú sino porque permite entender cómo funcionan determinadas propiedades CSS y cómo podemos combinarlas.

El HTML es sencillo y no tiene diferencias con tantos otros; es una lista a la que identificamos con un ID y en la que en cada item incluimos un enlace cuyo texto está dentro de otra etiqueta:

<ul id="navigationMenu">

  <li>
    <a class="home" href="#">
      <span>Home</span>
    </a>
  </li>

  .......
</ul>

¿Por qué usar la etiqueta SPAN y no poner directamente el texto? Justamente para poder combinar propiedades.

Necesitamos una imagen que usaremos de fondo y que será un sprite es decir, una serie de botoncitos todos iguales que se unen en una sola imagen; de esa manera, la carga será más rápida, usamos una sola imagen en lugar de varias. Para aplicarles un fondo a cada item de la lista, estos deben estar dimensionados y se deben tener la propiedad overflow:hidden

En este caso, de izquierda a derecha, el primer botón estará en la posición 0, el segundo comienza en el pixel 38, el tercero en el 76, el cuarto en el 114 y el último en el 152; para calcular eso, simplemente vamos sumando anchos. Lo mismo ocurre cono los de abajo así que podemos usar background-position para posicionar el fondo y de ese modo, mostrar solo un pedacito de la imagen, basta usar esos valores colocándolos como negativos lo que desplazará la imagen original:

Empezamos entonces con las definiciones básicas; a los items de la lista se les da un tamaño fijo y se los separa un poco entres si; como las etiquetas LI son etiquetas de bloque, se verán una debajo de la otra:

#navigationMenu li {
  height: 39px;
  list-style: none;
  padding: 2px;
  width: 38px;
}

Cada item contiene un enlace que siempre usa la misma imagen y al que transformamos en bloque para poder dimensionarlo :

#navigationMenu a {
  background:url(URL_imagen) no-repeat;
  display:block;
  height:39px;
  position:relative;
  width:38px;
}

Ahora, definiremos el SPAN es decir el texto en si mismo al que posicionaremos de manera absoluta dentro del enlace y usando left, lo pondremos justo donde termina el botón pero, lo mantendremos oculto colocándole cero a su ancho:

#navigationMenu span {
  left: 38px;
  overflow: hidden;
  position: absolute;
  width: 0;
  /* le agregamos cualquier propiedad para las fuentes */
  color: #FFF;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 39px;
  text-shadow: 2px 2px 1px #000;
}

Y ahora los efectos hover que funcionarán cuando ponemos el cursor encima:

#navigationMenu a:hover {
  text-decoration:none;
}

Le indicamos que, cuando pones el cursor sobre la etiqueta A, se muestre el contenido del SPAN que está adentro de ella:

#navigationMenu a:hover span {
  overflow: visible;
  padding: 0 20px;
  width:auto;
}

Sólo falta ubicar los botones de cada item que hemos identificado con clases así que:

#navigationMenu .home { background-position:0 0; }
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span { background-color:#7DA315; }

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{ background-color:#1E8BB4; }

#navigationMenu .services { background-position:-76px 0; }
#navigationMenu .services:hover { background-position:-76px -39px; }
#navigationMenu .services span{  background-color:#C86C1F; }

#navigationMenu .portfolio { background-position:-114px 0; }
#navigationMenu .portfolio:hover{ background-position:-114px -39px; }
#navigationMenu .portfolio span{ background-color:#D0A525; }

#navigationMenu .contact { background-position:-152px 0; }
#navigationMenu .contact:hover { background-position:-152px -39px; }
#navigationMenu .contact span{ background-color:#AF1E83; }

En el ejemplo original puede verse que también hay alguna propeidad de animación que sólo funcioanrá en Chrome/Safari así que por ahora, hasta que algunos otros navegadores comiencen a utilizarla, me abstengo de ella pero, puede agregarse sin problemas.