crear menu con css

Como crear un menu de navegacion con CSS

Quieres saber ¿cómo crear un ?, en este tutorial aprenderemos como crear un sencillo pero práctico menu de navegación horizontal con CSS, partiendo de una lista desordenada HTML.

En HTML las listas tienen en común la etiqueta <li>  cuya funcion es enumerar los elementos propiamente dicho de la lista, pero ¿sabías que podemos eliminar las viñetas de las listas con CSS para crear un bonito menu de navegación horizontal?.

crear menu horizontal con css

Para crear el menu de navegacion horizontal primero tenemos que crear un Identificador único para el menu, para ello ubicamos la etiqueta <ul> y le agregamos el ID que le vayamos a dar, para efectos del tutorial, que puedes verlo completo en el video le he llamado “menu de navegacion”, y quedó de la siguiente forma <ul id=”menudenavegacion”>.

Ya con esto debemos ir al Encabezado de nuestra pagina HTML y agregar dentro de las instrucciones CSS las propiedades a aplicar dentro de ese Identificador:

#menudenavegacion{
margin:0pt;
font-family:Verdana, Geneva, sans-serif;
font-size:0.75em;
}

En esta parte solamente definimos el tipo de letra, tamaño y espaciado de nuestro identificador #menudenavegacion, es fundamental definir esto desde el inicio para que nuestro menu horizontal quede lo más estético posible.  A continuacion el resto del codigo css que utilicé:

#menudenavegacion li{
list-style:none;
float:left;
}
#menudenavegacion li a{
display:block;
background-image:url(images/dividemenu.png);
background-repeat:no-repeat;
background-position:right;
background-color:#F93;
color:#900;
padding:2pt 10pt;
text-decoration:none;
}
#menudenavegacion li a:hover{
display:block;
background-image:url(images/dividemenu.png);
background-repeat:no-repeat;
background-position:right;
background-color:#900;
color:#F93;
padding:2pt 10pt;
text-decoration:none;
}

En nuestro HTML definimos la lista:

<ul id=”menudenavegacion”>
<li><a href=”#”>elemento 1</a></li>
<li><a href=”#”>Texto de caracteres extensos</a></li>
<li><a href=”#”>elemento 3</a></li>
<li><a href=”#”>elemento 4</a></li>
<li><a href=”#”>contactenos</a></li>
</ul>

Pero mira el video para que lo entiendas mejor. En el video te explico el paso a paso, como crear un menu horizontal de navegacion, lo contruyo desde cero el menu de navegacion para que tambien tu lo hagas:

Si aún quedaste con dudas puedes utilizar los comentarios, tambien utilizalos para decir si te ha servido el tutorial.

Esta es la leccion 21 del curso gratis de diseño de páginas web, espero que con este tutorial hayas aprendido a crear un menu con CSS.

Si te ha parecido interesante e instructivo compártelo en las redes, los comentarios se agradecen pero tus amigos agradecerán más que compartas este material con ellos.

16 comments on “Como crear un menu de navegacion con CSS

  1. coincido con que tus explicaciones, hacen que se vea muy fácil la aplicación de CSS.
    Muchas Gracias y adelante, que somos muchos quienes aprendemos de tí cada día.

  2. hola que segi tu curso de paginas web como subo un vídeo y como pongo un contador para registrar cuantas beses abren el mi sitio web dime tengo un problema todas las paginas que pongo en el navegador me dan con extencion c: mis documentos en la parte superior del navegador es solo porque esta aprueba o va hacer así siempre por que por hai pueden ingresar ami equipo
    BUSCADOR: — url eliminada por el admin —

    • Lo primero que debes hacer al diseñar una pagina web es crearle un sitio en Dreamweaver. Si tienes 3 clientes tendrás en total 3 sitios (1 para cada cliente), el sitio le dice a Dreamweaver donde estarán los archivos necesarioas para trabajar en cada sitio.

      El problema que tienes es que vinculaste los archivos o estás mandando a llamar una pagina ó archivo directamente desde tu computador, es decir, el archivo está fuera de tu sitio en dreamweaver.

  3. walter, muy buena guia, ya tengo mi menu hecho en css, ahora quisiera saber cual es la forma correcta de agregarlo a varias paginas html, para que al modificar un link de mi menu cambie en todas las paginas html en las que lo tengo colocado… cual es la opción correcta para que sea validido el css y html en la w3c.. agradezco tu guía en este tema

    Att
    Julian

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

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