Menu de navegación con CSS

Escrito por J.F. el Jueves, 26 de Julio del 2007 a las 21:42

Otro ejemplo para crear un menú de navegación con CSS. En éste caso no es ni tan siquiera necesario el uso de imágenes, dada su simpleza. Para personalizarlo tan sólo habrá que jugar un poco con los colores del CSS. Sin más dilación veamos ya el código CSS que utilizaremos, que puede estar ubicado en el head, o en una hoja de estilos aparte.

Código CSS:

TEXTO PLANO

CSS:

1. /* CSS Tabs */
2. #navcontainer {
3. margin: 10px 0 0 30px;
4. padding: 0;
5. height: 20px;
6. }
7.  
8. #navcontainer ul {
9. border: 0;
10. margin: 0;
11. padding: 0;
12. list-style-type: none;
13. text-align: center;
14. }
15.  
16. #navcontainer ul li {
17. display: block;
18. float: left;
19. text-align: center;
20. padding: 0;
21. margin: 0;
22. }
23.  
24. #navcontainer ul li a {
25. background: #fff;
26. width: 78px;
27. height: 18px;
28. border-top: 1px solid #f5d7b4;
29. border-left: 1px solid #f5d7b4;
30. border-bottom: 1px solid #f5d7b4;
31. border-right: none;
32. padding: 0;
33. margin: 0 0 10px 0;
34. color: #f5d7b4;
35. text-decoration: none;
36. display: block;
37. text-align: center;
38. font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
39. }
40.  
41. #navcontainer ul li a:hover {
42. color: #930;
43. background: #f5d7b4;
44. }
45.  
46. #navcontainer a:active {
47. background: #c60;
48. color: #fff;
49. }
50.  
51. #navcontainer li#active a {
52. background: #c60;
53. border: 1px solid #c60;
54. color: #fff;
55. }

Una vez visto el código CSS, tan sólo nos queda ver la parte HTML. Como suele ser habitual, se utiliza una lista desordenada dentro de un div.

TEXTO PLANO

HTML:

1. <p id="navcontainer">
2. <ul id="navlist">
3.     <li><a href="#">Enlace 1</a></li>
4.     <li><a href="#">Enlace 2</a></li>
5. <li id="active"><a href="#" id="current">Enlace 3</a></li>
6.     <li><a href="#">Enlace 4</a></li>
7.     <li><a href="#">Enlace 5</a></li>
8.     <li><a href="#">Enlace 6</a></li>
9. </ul>

Observa que el link activo, se obtiene de la siguiente forma:

TEXTO PLANO

HTML:

1. <li id="active"><a href="#" id="current">Enlace 3</a></li>

Ejemplo: | Ver ejemplo en funcionamiento

Categoria: CSS

• Añadir este post a
• Del.icio.us -
• Meneame -
• Digg -
• Webeame

Entradas relacionadas

Nombre (obligado)

E-mail (no sera publicado) (obligado)

Pagina web

Puedes usar las siguientes etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>