Quieres saber ¿cómo crear un menu con css?, en esta lección aprenderemos como crear un sencillo pero practico menu de navegacion 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?.
Para crear el menu de navegacion horizontal primero tenemos que crear un Identificador unico 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 aun quedaste con dudas puedes utilizar los comentarios, tambien utilizalos para decir si te ha servido el tutorial.
Esta es la leccion 21 del curso de diseño de páginas web, espero que con este tutorial hayas aprendido a crear un menu con CSS.
Articulos Relacionados:
En el video anterior aprendimos a crear un menu horizontal con CSS, creamos ...
Por si buscas un menu de navegacion te regalo este menu, que facilmente podr ...
Curso gratis de diseño de páginas web El curso para la creación de páginas ...
¿Cómo crear un menú desplegable en Dreamweaver?, para el curso de paginas we ...
En IE se presenta un color blanco en los iframes de nuestras paginas web, co ...
Información Bitacoras.com…
Valora en Bitacoras.com: En esta leccion aprenderemos como crear un sencillo pero practico menu de navegacion horizontal con CSS, partiendo de una lista desordenada HTML. En HTML las listas tienen en común la etiqueta cuya funcion es enumerar los……
Gracias Walter, Css está resultando mas fácil de lo que pensaba con estas clases!
El CSS es bien sencillo, solo hay que ponerle corazon!! XD
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.
Muchas Gracias guiyermo, muy gentil.
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.
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
Lo correcto seria trabajar el CSS aparte. Pero debes agregar la lista en cada una de las paginas que contenga el sitio
gracias me se util
Excelente el tuto me aclaro muchas dudas,, pero ¿como se hace para los submenus?
sip, tienes razon, es algo que me faltó