Tutorial: Como crear un menú horizontal con CSS
En este tutorial vamos a ver como crear un menú de navegación horizontal con CSS utilizando listas, en primer para crear una barra de navegación horizontal por listas deberemos modificar el funcionamiento estándar de las listas para conseguir que se muestren en la misma línea y no una debajo de otra.
Cada elemento del menú será un enlace y al pasar el ratón sobre ellos resaltaremos de alguna manera el elemento lo que aportará el dinamismo a la barra de navegación.
Todo lo expuesto anteriormente lo haremos mediante CSS.
En primer lugar mostraremos el resultado de crear un menú horizontal con CSS, de esta manera os haréis una idea del resultado final, para ver como queda visualizaremos la página characters and words counter.
Este es el código HTML necesario para la creación del menú horizontal:
Este es el código CSS necesario para la creación del menú horizontal:
Cada elemento del menú será un enlace y al pasar el ratón sobre ellos resaltaremos de alguna manera el elemento lo que aportará el dinamismo a la barra de navegación.
Todo lo expuesto anteriormente lo haremos mediante CSS.
En primer lugar mostraremos el resultado de crear un menú horizontal con CSS, de esta manera os haréis una idea del resultado final, para ver como queda visualizaremos la página characters and words counter.
Este es el código HTML necesario para la creación del menú horizontal:
<div id="nav">
<a class="topnav" href="#" target="_top">Opcion 1</a>
<a class="topnav" href="#" target="_top">Opcion 2</a>
<a class="topnav" href="#" target="_top">Opcion 3</a>
</div>Este es el código CSS necesario para la creación del menú horizontal:
a.topnav:link,a.topnav:visited {color:#555555;text-decoration:none;padding-left:15px;}
a.topnav:hover,a.topnav:active {color:#ff4800;text-decoration:none;padding-left:15px;}
#nav {
margin: 5px 0px 10px;
padding: 0px;
background-color: rgb(238, 238, 238);
background-image: url("img/topnav_bg.gif");
background-position: center bottom;
background-repeat: repeat-x;
font-size: 12px;
}