¿Necesitas una barra de navegación para tu sitio web? Este tutorial explica como diseñar una bonita barra de navegación mediante el uso de CSS, inspirada en Gettyimages. Es tan simple como otras que he descrito anteriormente, además de poder encontrar mayor inspiración en esta lista de menús horizontales.
Código HTML
El código HTML es muy simple, consta de una estructura con listas <ul> con un elemento <li> para cada enlace de la barra de navegación:
<div id="navbar"> <span class="inbar"> <ul> <li class="navhome"><a href="home.html"><span>Home</span></a></li> <li><a href="about.html"><span>About</span></a></li> <li><a href="contact.html"><span>Products</span></a></li> <li><a href="contact.html"><span>Contact Us</span></a></li> </ul> </span> </div>
Cada enlace <a> contiene una etiqueta <span> dentro del mismo. Esto es usado muy a menudo para diseñar elementos líquidos con bordes redondeados.
Código CSS
A continuación se muestra el código CSS para estilizar la lista que compone la barra. Las imágenes se mostrarán después, donde podremos descargar todo el ejemplo. Podemos diferenciar varias imágenes: 2 en la parte superior (izquierda y derecha) 2 en la parte inferior (izquierda y derecha), imágenes que componen el conjunto :hover (al posicionar el ratón encima del enlace), y otras 4 imágenes para la zona en la que nos encontremos, con la misma disposición.
#navbar{
width:auto;
height:36px;
background:url(img/navbar-bg.png) left top repeat-x; }
#navbar .inbar{
display:block;
height:36px;
background:url(img/right-round.png) right top no-repeat; }
#navbar ul, #navbar ul li{
border:0px;
margin:0px;
padding:0px;
list-style:none;
height:36px;
line-height:36px; } #navbar ul{
background:url(img/left-round.png) left top no-repeat; }
#navbar ul li{
float:left;
display:block;
line-height:36px; }
#navbar ul li a{
color:#403e32;
text-decoration:none;
font-weight:bold;
display:block; }
#navbar ul li a span{
padding:0 20px 0 0;
height:36px;
line-height:36px;
display:block;
margin-left:20px; }
#navbar .navhome a, #navbar .navhome a:hover{
background:url(img/a-bg.png) left top no-repeat;
height:36px;
line-height:36px; }
#navbar .navhome a span, #navbar .navhome a:hover span{
color:#FFFFFF;
background:url(img/span-bg.png) right top no-repeat;
height:36px;
line-height:36px; }
#navbar ul li a:hover{
background:url(img/ahover-bg.png) left top no-repeat;
height:36px;
line-height:36px; }
#navbar ul li a:hover span{
background:url(img/spanhover-bg.png) right top no-repeat;
height:36px;
line-height:36px; }
Estandarización
XHTML 1.0 Transitional inválido.
CSS 2.1 válido.
Ejemplo de su funcionamiento
Descarga del ejemplo
Al descargar el ejemplo podrás ver las imágenes que componen esta barra de navegación:
Vía | Woork
