Quieres saber ¿cómo crear 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 menú de navegación?.
Para crear el menu de navegacion 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 del video le he puesto “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. A continuacion el resto del codigo
#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, 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 paginas 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 de navegacion horizontal con ...
Por si buscas un menu de navegacion te regalo este menu, que facilmente podr ...
Curso de paginas web: este es el indice de contenidos que te llevarán a cada ...
Curso de paginas web: leccion 16 en esta lección 16 del 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