viernes 24 de diciembre de 2010

[CSS] Crear una barra de enlaces

Crear una barra de enlaces con HTML es sencillo, sólo hemos de poner un enlace tras otro, todos ellos dentro de una capa (div) con un identificador (id). Por ejemplo:
<div id="enlaces">
 <a href="http://fcharte.com">Portada</a>
 <a href="http://fcharte.com/Default.asp?libros">Libros</a>
 <a href="http://tdbweb.blogspot.com/">Diseño web</a>
 <a href="http://fcharte.com/Default.asp?articulos">Artículos</a>
 <a href="http://fcharte.com/Default.asp?glosario">Glosario</a>
 <a href="http://feeds.feedburner.com/TorreBabel?format=xml">Feed RSS</a>
</div>

Este código tiene un resultado poco atractivo:

Sin embargo, es suficiente para que, con unos pocos trucos CSS, quede muy elegante.
Para empezar, separaremos los enlaces (para ello usaremos un selector CSS que incluye a todos los enlaces dentro de esa capa: div#enlaces>a):
div#enlaces {
  padding: 6px;
}

div#enlaces>a {
  display: table-cell;
  padding: .4em 12px .4em 12px;
}

El resultado ahora es algo mejor, pero todavía queda mucho por hacer:

Vamos a darle algo de color a todo esto, y también quitaremos el subrayado de los enlaces. Yo he elegido una gama de colores azul:
div#enlaces {
  background: #daeaf6;
  padding: 6px;
}
div#enlaces>a {
  color: #205080;
  text-decoration: none;
  display: table-cell;
  padding: .4em 12px .4em 12px;
}

Esto ya empieza a parecer una barra de enlaces más decente:

Vamos a añadirle un efecto para cuando el cursor se pose encima:
div#enlaces {
  background: #daeaf6;
  padding: 6px;
}
div#enlaces>a {
  color: #205080;
  text-decoration: none;
  display: table-cell;
  padding: .4em 12px .4em 12px;
}
div#enlaces>a:hover {
  opacity: .7;
  -moz-opacity: .7;
  filter: alpha(opacity=70);
}

Y ahora un último detalle: una línea sutil para separar enlaces.
div#enlaces {
  background: #daeaf6;
  padding: 6px;
}
div#enlaces>a {
  color: #205080;
  text-decoration: none;
  padding: .4em 12px .4em 12px;
  display: table-cell;
  border-right: 1px solid #ccc;
}
div#enlaces>a:hover {
  opacity: .7;
  -moz-opacity: .7;
  filter: alpha(opacity=70);
}
div#enlaces>a:last-child {
  border: 0px solid;
}

Y nuestra barra de enlaces quedará así:


El código al completo, tras el salto:
<!DOCTYPE html>
<html>
 <head>
  <style>
   div#enlaces {
    background: #daeaf6;
    padding: 6px;
   }
   div#enlaces>a {
    color: #205080;
    text-decoration: none;
    display: table-cell; 
    padding: .4em 12px .4em 12px;
    border-right: 1px solid #ccc;
   }
   div#enlaces>a:hover {
    opacity: .7;
    -moz-opacity: .7;
    filter: alpha(opacity=70);
   }
   div#enlaces>a:last-child {
    border: 0px solid;
   }
  </style>
 </head>
 <body>
  <div id="enlaces">
   <a href="http://fcharte.com">Portada</a>
   <a href="http://fcharte.com/Default.asp?libros">Libros</a>
   <a href="http://tdbweb.blogspot.com/">Diseño web</a>
   <a href="http://fcharte.com/Default.asp?articulos">Artículos</a>
   <a href="http://fcharte.com/Default.asp?glosario">Glosario</a>
   <a href="http://feeds.feedburner.com/TorreBabel?format=xml">Feed RSS</a>
  </div>
 </body>
</html>
Etiquetas: ,

0 comentarios:

Publicar un comentario en la entrada

Suscribirse a: Enviar comentarios (Atom)