Existiendo en internet una infinidad de estos ejemplos, me animé a hacer otro más, ¿por qué? pues para explicar un poco que ventajas tienen estos menús con respecto a otros que se hacen con tablas para cada item y javascript para hacer los efectos al pasar el mouse.
En estos ejemplos estoy usando listas desordenadas y CSS básico, para lograr el formato y los efectos al pasar el mouse sobre ellos.
Bueno dejémonos de palabrería y vayamos a la acción, los 2 menús tienen la misma estructura lo único que cambia es el código CSS y el identificador, veamos:
Menu Vertical
<div id="menuv">
<ul>
<li><a href="#menuv">Inicio</a></li>
<li><a href="#menuv">Comentarios</a></li>
<li><a href="#menuv">Noticias</a></li>
<li><a href="#menuv">Contacto</a></li>
<li><a href="#menuv">Acerca de nosotros</a></li>
</ul>
</div>
#menuv {
border: 1px solid #ACCFE8;
border-width: 1px 1px 0 1px;
width: 150px;
font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#menuv ul, li {
list-style-type: none;
}
#menuv ul {
margin: 0;
padding: 0;
}
#menuv li {
border-bottom: 1px solid #ACCFE8;
}
#menuv a {
text-decoration: none;
color: #3366CC;
background: #F0F7FC;
display: block;
padding: 3px 6px;
width: 138px;
}
#menuv a:hover {
background: #DBEBF6;
}
Ver el ejemplo del menú vertical
Menu Horizontal
<div id="menuh">
<ul>
<li><a href="#menuh" id="primero">Inicio</a></li>
<li><a href="#menuh">Comentarios</a></li>
<li><a href="#menuh">Noticias</a></li>
<li><a href="#menuh">Contacto</a></li>
<li><a href="#menuh">Acerca de nosotros</a></li>
</ul>
</div>
#menuh {
font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-top: 20px;
}
#menuh ul, li {
list-style-type: none;
}
#menuh ul {
margin: 0;
padding: 0;
}
#menuh li {
float: left;
}
#menuh a {
text-decoration: none;
color: #3366CC;
background: #F0F7FC;
display: block;
padding: 3px 10px;
text-align: center;
border: 1px solid #ACCFE8;
border-width: 1px 1px 1px 0;
}
#menuh a#primero {
border-left: 1px solid #ACCFE8;
}
#menuh a:hover {
background: #DBEBF6;
}
Ver el ejemplo del menú horizontal
Como vieron es sencillísimo podemos jugar con el CSS para cambiar los colores, o talvez añadir algún efecto más, esto se los dejo a su imaginación.
En los ejemplos verán que el código HTML (Estructura) está separado del código CSS (Presentación o formato); esto nos ayuda a modificar rápidamente el código, ahorrar el ancho de banda, y otras cosas que no me acuerdo.
Ventajas
- Poco peso: al ser código simple, ocupa poco espacio, y esto también ayuda a la carga rápida de la página.
- Manejable: se puede cambiar fácilmente los colores y efectos gracias a CSS.
- Simple: el código es sencillo de entender, no se complica tanto como los menús a base de tablas y JavaScript.
- Accesible: el usuario puede usar el menú aunque tenga discapacidad o esté navegando en cualquier dispositivo o navegador.
Desventajas
Ninguna (creo 
), espero sus comentarios.
me gusto tu ejemplo, no estoy muy preparado en eso de diseño web pero si soy programador de java, asi que quisiera que me recomendaras un buen libro para el diseño de paginas web o un buen site con documentacion.
Ah y tu blog esta en mis favoritos, estaré esperando otros interesantes como este
Existe alguna manera de hacer submenues como pasa con javascript
Pues aca en mi ciudad no encuentras muchos libros como esos, por eso es que no puede recomendarte alguno, pero una buena dirección de donde aprendí algunas cosas es http://www.tierradenomadas.com/ para tener conceptos de CSS, JavaScript y DOM.
Sobre los submenus, si se puede hacer también usando estas listas y un mínimo de JavaScript, el ejemplo lo puedes encontrar en:
http://www.alistapart.com/articles/dropdowns
Saludos.
Hola me parece muy bueno tu tutorial, pero tuve un pequeño incomveniente al hacerlo correr en mozilla y ie, se desconfigura tienes idea de como solucionar ese problema
Mmm. es muy raro, ya que lo probé en Mozilla Firefox (1.07, 1.5) e Internet Explorer 6. Talvez estás copiando algo mal.
Me falta saber cómo hacer para centrar un menú horizontal, no pude todavía...
YO le puse esta linea al css para que no me diera problemas cuando pusiera el logo de mi pagina
#menuh
position: relative;
y por cierto como centralizo el menu, alguna idea?
esta interesante voy a probarlo
Este menu da problemas en mozilla firefox 1.0 y 1.5 .... en el lado derecho alguien me puede dar la solucion al problema?
Hola
Alguien me puede ayudar con un menú horizontal que despliegle sub menus verticales, estoy intentando hacer uno con el ejemplo de aqui pero no encuentro un respuesta aun.
Gracias
deseo colocar submenus a unmenu horizontal podria indicarme estoy siguiendo el ejemplo anterior .gracias
me parece bien pero creo le ace falta un poco de explicacion a esto es muy muy bien pero le hace falta explicar mas a fondo o mas detallado pero del reto esto esta perfecto.
me parece bien pero creo le ace falta un poco de explicacion a esto es muy muy bien pero le hace falta explicar mas a fondo o mas detallado pero del resto esto esta perfecto.
Gracias por el tutorial, muy conciso y concreto
El menú muy bueno pero, en FIREFOX se desconfugura, uno lo tiene listo en internet explorer y lo ve en el firefox y se descuadra y lo cuadra en firefox y no sirve en internet explorer.
Carolina, entiendo tu frustración, pero por lo que veo, el ejemplo que acompaña este artículo funciona bien.
¿Alguna dirección donde pueda ver el problema que comentas?
Hola Alex, mil gracias por responder y x tu preocupación.
Después de jugar con la márgen izquierda de #menuh y con el padding de #menuh a logré que se viera igual en internet explorer como en mozilla firefox.
Si necesitas que el menú x ejemplo mida 776 px de ancho, ¿Cómo haces? Juegas también con las márgenes y el padding o debes ajustar el texto de cada item? o le puedes dar dentro del css en algún lado la medida para que se ajuste?
Gracias, cordial saludo!
Hola Carolina, no soy bueno en css, pero creo que a #menuh deberías ponerle el ancho en 776px, algo así:
font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-top: 20px;
width: 776px;
overflow: auto; /* para englobar a los elementos flotantes*/
}
Listo Alex, muchas gracias por tu ayuda y respuestas!
Cordial saludo!
sensacional... lo que trate de lograr en 8 horas.. , lo hiuce en tres minutos con tu ayuda..., muchas gracias...
Manuel - Santiago de Chile..
Hola
Estaba viendo el menú de una pagina
http://unidadlocal.com/
pero no pude sacar como se crea el estilo para que se ve así podrían ayudarme
me vino muy bien este menu
pero tendria que decir una desventaja
si se aplica en varias paginas, y luego se quiere modificar la estructura de este menu, ya sea agregar mas botones o quitarlos, habria que camnbiarlos desde todos los html y no desde un solo archivo
si me equivoco, que alguien me diga como
mil gracias
pablo, no necesariamente, si incluyes el codigo en cada html si tendrás que cambiarlos uno a uno, pero si en el html incluyes:
y en estilo.css pones todo lo "CSS" del ejemplo, asi cuando cambies ahi cambia en todos lo que hagan el link.
Espero haber sido algo claro, saludos!
EXCELLENTE...
Directo al punto y sin mucha palabreria... Asi, es como todo deberia ser...
Muchas gracias
Felicidades en un excelente post
Pedro
Para pablo: puedes escribir el código del menú en un archivo aparte y mediante un include en php lo incluyes en todos los html. De esa forma cuando quieras modificar la estructura sólo deberás modificar un único archivo.
Un pregunta he realizado un menu en html y css pero en internet explorer no me lo desplega pero en mozilla firefox si habra alguna variable o que me haga falta para que lo reconozca en ambos navegadores...?
Atentamente,
Hola
esta muy bien el tutorial, pero he probado el menu vertical con una pega: si pones más de 5 elementos , al hacer el hover en el navegador (en mi caso IE), se quedan unas lineas que no se muy bien la razón. Podéis probarlo en la página de pruebas que tengo:
http://www.lagerbera.es/pruebas/pruebas2/index.php
¿Alguna idea?
Slds
he utilizado el menu css y no contiene errores. perfect
Muchas gracias x el tutorial..... pero no encuentro la forma d incluir menus verticales dentro de los horizontales
Por favor alguien me puede ayudar con algun ejemplo
Realice una codificacion usando listas como y , con un boton mostrando y otro ocultando la lista es muy bueno, pero solo funciona en Internet Explorer.
Mis usuarios quiere usar tambien firefox, pero en este navegador al presionar el onClick del boton 'ver' o 'ocultar' la pagina salta a la pagina siguiente y no permite guardar mas registros que deseo grabar...
necesito ayuda
desde ya muchas gracias
Bernardo
Es justo lo que andaba buscando, pero... ¿alquien puede decirme cómo centrarlo en la página con un ancho fijo?
Gracias por adelantado...
saludos,a ver si me pueden ayudar,uno: tengo un menu horizontal que cuando se desplega sobre un combobox,queda debajo del combobox y la idea es que los submenus con sus niveles quede por encima de los combos que pagina me recomiendan ( eso me pasa en IE 6 que es donde lo necesito ver),dos: el otro es que tengo otro menu horizontal que no se desplega en IE 6 pero en mozilla si que podria ser, espero alguna respuestas posotiva gracias
Muy buen menu, el codigo es bastante entendible me encanto.
saludos!
Los menús CSS me parecen muy aconsejables, pero a los horizontales sobre todo les encuentro un problema, cuya solución (si la hay) nadie ha sabido explicarme: en Internet Explorer (versiones 6 y anteriores) aparecen desplazados a la izquierda. ¿Existe algún remedio para esto?
Gracias!!!! Busqué muchisimo este tipo de menú, y ninguno funcionaba hasta ahora!!! Gracias!!
Mil grax, aun no se en que falle pero no podia visualizar el hover en IE6, pero ya esta muy bueno el tuto, gracias.
salu2!!! desde Guatemala.
pusha tengo un problema para linkiar los botones como lo hago
?¡?¡?¡
soy nuevo en estilos css
como hago para poner 2 menus horizontales en una pagina?
perdon quise decir verticales no horizontales
ami pues no me sale como el ejemplo, al principio en el ejemplo ce ve muy original pero ya lo puce y no sale como el ejemplo.
Agadeseria que me ayudaran x favor
esk solo me salen las letras sin el cuadro y eso osea como si fueran enlazes en forma de lista
porfa ayuda este menu esta chido y me gustaria tenerlo
entren a mi pagina todo sobre sakura card captor
me quedo muy guapo el menu horizontal fijense
http://black360.blogspot.com/
Muy buen tutorial, no contiene ningún error, ni en firefox ni en ie. el problema que tienen es en el código html table td div....
Una pregunta: ¿como separo los botones del menú horizontal? las cajitas
no encuentro la instrucción, seguro que es fácil pero no lo se.-
Mil gracias
Excelente tutorial, funciona bien en varios en firefox e IE gracias saludos cordiales
felicidades ere un buen diseñador puedo asegurar que es el diseño mas fasil que he vicitado sigue adelante seras reconocido en todo el mundo espero
hola nesesito ayuda para elaborar un menu en SharpDevelop donde despliegue las opciones ayudeme plis se lo voy a gradecer
Fantastico ejemplos pero yo soy novato en esto. ¿podrían decirme donde se colocan estos codigos en blogger? - en caso de que se pueda. tengo una plantilla beta y no veo las etiquetas que se muedstran ahí.
Mil gracias de antemano.
Oye muchas gracias por tu codigo, lo usare para un proyecto que tengo en el trabajo...me ha sido de mucha utilidad
Gracias por visitarnos auraham
Muy buen tutorial pero en cuanto menu horizontal tengo cierta duda y es observen como se deforma al cambiar el tamaño del browser, en realidad no debria deformarse sino cortar y mostrar de acuerdo al tamañod del browser
holas ps encontre un aporte
border: 1px solid #ACCFE8;
border-width: 1px 1px 0 1px;
width: 150px;
height: auto;
font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
}
ps eso ara que funque bien en google crom o mozila salu2. "height: auto;"
hey buen aporte brother gracias me sirvio mucho, tengo una pregunta para todos los que me quieran ayudar yo cree mi pagina web en http://www.000webhost.com me registre y todo bien pero cuando me quiero conectar tengo problemas para construir mi web en esa pagina alguien para ayudarme me pueden enviar correos gracias
Estoy probando tu menu vertical y al ponerlo en el blogger se desplaza el fondo a la izquierda y se come parte de las letras de los enlaces. ¿A que se debe? Esto me pasa tanto en el explorer commo en firefox
a mi me pasa que me pierdo con esto del css
he encontrado una web donde creas muy buenos menus css en unos pocos clics aqui la teneis Generador de menús en CSS
muchas gracias has contribuido en la creacion de mi tema, no olvides visitar mi blog!
Como puedo colocar en mi pagina esta seccion de comentarios disculpen la pregunta aki pero como utilize tambien esta informacion pues se me ocurrio preguntar aki mismo gracias por su ayuda
Tengo un menu horizontal, estaba buscando la manera de ponerlo vertical, pero me gusto el que tienes aqui. Gracias
Saludos
Mil gracias super útil
Muy bueno funciona perfecto el menu vertical, muchas gracias.
Buen artículo, me sirvió mucho la info ya que estoy aprendiendo a diseñar páginas. Muy sencillo y elegante el método gracias.
Viendo que no se como usar las etiquetas para comentar les paso un link para que vean como lo solucione.
https://skydrive.live.com/?cid=d0cb0ae145c54d63#!/?cid=d0cb0ae145c54d63&sc=photos&uc=1&id=D0CB0AE145C54D63%21162
Saludos
Excelente menú cumple con lo que considero apropiado para un sitio web sencillo (Velocidad, simplicidad, robustez).
Saludos! Muchas Gracias