website stats » Menú de navegación con CSS | Solo Código |

Menú de navegación con CSS

Escrito por J.F. el Domingo, 8 de Julio del 2007 a las 17:34

El código de hoy es un menú de navegación CSS, del siguiente estilo:

Menú navegación CSS

Tán solo será necesario el siguiente código CSS, que podemos añadir directamente en nuestra hoja de estilos, o ponerla en el head. Por ejemplo, vamos a escoger la opción del head:

TEXTO PLANO
CSS:
  1. <head>
  2.  <style type="text/css">
  3. <!--
  4.     body {
  5.         margin:10;
  6.         padding:10;
  7.         font: bold 11px/1.5em Verdana;
  8. }
  9.  
  10. h2 {
  11.         font: bold 14px Verdana, Arial, Helvetica, sans-serif;
  12.         color: #000;
  13.         margin: 0px;
  14.         padding: 0px 0px 0px 15px;
  15. }
  16.  
  17.  
  18. /*- Menu Tabs C--------------------------- */
  19.  
  20.     #tabsC {
  21.       float:left;
  22.       width:100%;
  23.       background:#EDF7E7;
  24.       font-size:93%;
  25.       line-height:normal;
  26.       }
  27.     #tabsC ul {
  28.         margin:0;
  29.         padding:10px 10px 0 50px;
  30.         list-style:none;
  31.       }
  32.     #tabsC li {
  33.       display:inline;
  34.       margin:0;
  35.       padding:0;
  36.       }
  37.     #tabsC a {
  38.       float:left;
  39.       background:url("tableftC.gif") no-repeat left top;
  40.       margin:0;
  41.       padding:0 0 0 4px;
  42.       text-decoration:none;
  43.       }
  44.     #tabsC a span {
  45.       float:left;
  46.       display:block;
  47.       background:url("tabrightC.gif") no-repeat right top;
  48.       padding:5px 15px 4px 6px;
  49.       color:#464E42;
  50.       }
  51.     /* Commented Backslash Hack hides rule from IE5-Mac \*/
  52.     #tabsC a span {float:none;}
  53.     /* End IE5-Mac hack */
  54.     #tabsC a:hover span {
  55.       color:#FFF;
  56.       }
  57.     #tabsC a:hover {
  58.       background-position:0% -42px;
  59.       }
  60.     #tabsC a:hover span {
  61.       background-position:100% -42px;
  62.       }
  63.  
  64.         #tabsC #current a {
  65.                 background-position:0% -42px;
  66.         }
  67.         #tabsC #current a span {
  68.                 background-position:100% -42px;
  69.         }
  70. -->
  71. </style>
  72. </head>

Para utilizarlo simplemente, ya en el código HTML, utilizaremos el div tabsC y una lista desordenada. Para resaltar en el menú la sección actual en la que nos encontramos utilizamos:

TEXTO PLANO
HTML:
  1. <li id="current">

Por tanto un ejemplo podría ser:

TEXTO PLANO
HTML:
  1. <div id="tabsC">
  2.             <ul>                                       
  3. <li id="current"><a href="pagina_seccion_actual.html"><span>Blog Inform&aacute;tica Pr&aacute;ctica</span></a></li>
  4. <li><a href="pagina2.html"><span>Tutoriales</span></a></li>
  5. <li><a href="otrapagina.html"><span>Trucos</span></a></li>
  6. ...
  7. ...
  8.            </ul>
  9. </div>

De ésta manera podremos realizar un elegante menú de navegación para nuestra página web. Las imágenes utilizadas las puedes obtener desde aquí: Imagen 1 | Imagen 2
Puedes ver el ejemplo funcionando: | Menú de navegación

Categoria: CSS

No hay comentarios

Entradas relacionadas


Deja un comentario

Escribir un comentario

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

Solo Código

Solo Código es una colección de códigos de todo tipo que pueden resultar útiles para el diseño de páginas web. Está enfocado tanto para aquellos que son expertos, como para aquellos principiantes que quieren encontrar recursos útiles, o no saben implementar determinadas funciones en sus webs. No olvides que Solo Código es un blog de Informática Práctica, donde tenemos otras secciones interesantes como:
| Tutoriales | Trucos | Software | Links | Buscar |