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

05/9/07 - Con CSS podemos hacer mucho con muy poco esfuerzo y muy poco código HTML. Con una simple lista y un par de etiquetas <div> podemos crear una barra de navegación muy configurable a nuestro aspecto preferido.

En este artículo veremos como un mismo código HTML, con distintas declaraciones de estilos CSS, permite obtener barras de navegación de modelos variados. Todos los modelos son de barras de navegación verticales, que vienen muy bien para los laterales de las páginas. Aunque si lo deseamos, también hemos creado en otro artículo unos ejemplo con barra de navegación vertical.

Partimos, como decimos, de un HTML bien simple:

<div id="nav">
   <div class="titulonav">
   Secciones
   </div>
   
   <div class="cuerporec">
   <ul>
      <li><a href="#">Portada</a></li>
      <li><a href="#">Grandes rutas</a></li>
      <li><a href="#">Nuevas rutas</a></li>
      <li><a href="#">Ciudades</a></li>
      <li><a href="#">Pueblos</a></li>
   </ul>
   </div>
</div>

Tenemos varias capas a las que hemos asignado distintas clases e identificadores: una capa principal llamada "nav", donde meteremos toda la barra de navegación. Otra llamada "titulonav" con el título de la barra. Por último otra "cuerporec" con el cuerpo de las distintas opciones de la barra de navegación.

Ahora veremos distintas definiciones de estilos para adaptar a este mismo HTML. Cada una con más dificultad que la anterior.

Primer estilo CSS

Veamos un primer estilo CSS que es muy sencillo.

Podemos verlo en una página aparte.

En este ejemplo cada enlace viene con un borde. Con unos fondos en colores planos bien simples, pero medianamente vistosos.

body{
   font-family: verdana, helvetica;
   font-weight: bold;
}

#nav{
   width: 155px;
}

.titulonav{
   border: 1px solid #d7d7d7;   
   font-size: 8pt;
   font-weight: bold;
   background-color: #e0e0e0;
   color: #000;
   padding: 4px;
}

.cuerporec{
   margin-top: 0px;
   margin-right: 0pt;
   margin-bottom: 10px;
   margin-left: 0pt;
}

.cuerporec ul{
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   padding-top: 0pt;
   padding-right: 0pt;
   padding-bottom: 0pt;
   padding-left: 0px;
   list-style-type: none;
   list-style-image: none;
   list-style-position: outside;
}

.cuerporec li{
   border-bottom: 1px solid #d7d7d7;   
   border-left: 1px solid #d7d7d7;   
   border-right: 1px solid #d7d7d7;   
   padding: 1px 0 2px 4px;
   font-size: 8pt;
   margin-top: 0px;
   margin-right: 0pt;
   margin-bottom: 0px;
   margin-left: 0pt;
   background-color: #ffffcc;
}

.cuerporec a{
   text-decoration: none;
}

Segundo ejemplo de estilos CSS

El segundo ejemplo hace uso de la lista para mostrar un estilo más habitual, de elementos de lista, pero de manera personalizada.

Podemos verlo en una página aparte.

body{
   font-family: verdana, helvetica;
   font-weight: bold;
}

#nav{
   width: 155px;
}

.titulonav{
   border-right-width: 1px;
   border-right-style: solid;
   border-right-color: #d7d7d7;
   border-bottom-width: 1px;
   border-bottom-style: solid;
   border-bottom-color: #d7d7d7;
   padding-top: 5px;
   padding-right: 0pt;
   padding-bottom: 5px;
   padding-left: 4px;
   font-size: 8pt;
   font-weight: bold;
   background-color: #e8e8e8;
}

.cuerporec{
   border-width: 1px;
   border-style: solid;
   border-color: #d7d7d7;
   margin-top: 4px;
   margin-right: 0pt;
   margin-bottom: 10px;
   margin-left: 0pt;
}

.cuerporec ul{
   margin-top: 5px;
   margin-right: 10px;
   margin-bottom: 20px;
   margin-left: 0px;
   padding-top: 0pt;
   padding-right: 0pt;
   padding-bottom: 0pt;
   padding-left: 1px;
   list-style-type: none;
   list-style-image: none;
   list-style-position: outside;
}

.cuerporec li{
   padding-left: 12px;
   font-size: 8pt;
   padding-bottom: 2px;
   margin-top: 1px;
   margin-right: 0pt;
   margin-bottom: 1px;
   margin-left: 0pt;
   background: transparent url("cuadrado-amarillo.gif") 0 2px no-repeat;
}

.cuerporec a{
   text-decoration: none;
}

Tercer ejemplo de estilos CSS para el navegador

Un tercer ejemplo que no reviste mucha mayor dificultad que el anterior, pero que altera sensiblemente el aspecto visual.

En este caso vamos a separar un poco cada una de las cajitas donde vienen los enlaces y vamos a poner un fondo con un atractivo degradado en cada elemento de la lista.

Podemos verlo en funcionamiento en una página.

body{
   font-family: verdana, helvetica;
   font-weight: bold;
}

#nav{
   width: 155px;
}

.titulonav{   
   border-width: 1px;
   border-style: solid;
   border-color: #000000;
   font-size: 8pt;
   font-weight: bold;
   background-color: #999999;
   color: #ffffff;
   padding: 4px;
}

.cuerporec{
   margin-top: 4px;
   margin-right: 0pt;
   margin-bottom: 10px;
   margin-left: 0pt;
}

.cuerporec ul{
   margin-top: 5px;
   margin-right: 0px;
   margin-bottom: 20px;
   margin-left: 0px;
   padding-top: 0pt;
   padding-right: 0pt;
   padding-bottom: 0pt;
   padding-left: 1px;
   list-style-type: none;
   list-style-image: none;
   list-style-position: outside;
}

.cuerporec li{
   border-width: 1px;
   border-style: solid;
   border-color: #d7d7d7;
   padding: 1px 0 2px 2px;
   font-size: 8pt;
   padding-bottom: 2px;
   margin-top: 2px;
   margin-right: 0pt;
   margin-bottom: 2px;
   margin-left: 0pt;
   background-image: url(fondo_gris.gif);
}

.cuerporec a{
   text-decoration: none;
}

Espero que estos distintos ejemplos de estilos CSS para hacer una barra de navegación hayan servido de inspiración a los lectores.

Autoría, licencia y acciones sobre este artículo

Informe de Artemio Artigas* Redactor de guiarte.com – Turismo, naturaleza, arte. URL: http://www.guiarte.com Licencia Copyleft. Puedes reproducirlo citando al autor y enlazando con Guiarte.com. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios de los visitantes

Añadir un comentario del artículo Aun no hemos recibido comentarios de este artículo. Puedes ser el primero en enviar tu comentario.

Enlaces:

Maestrosdelweb

  Ir arriba