Menus Simples con CSS y listas

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

HTML:

<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>
 
CSS:

#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

HTML:

<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>
 
CSS:

#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.

Archivos relacionados

77 thoughts on “Menus Simples con CSS y listas”

  1. 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 :-)

  2. 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

  3. YO le puse esta linea al css para que no me diera problemas cuando pusiera el logo de mi pagina :D

    #menuh
    position: relative;

    y por cierto como centralizo el menu, alguna idea?

  4. Este menu da problemas en mozilla firefox 1.0 y 1.5 .... en el lado derecho alguien me puede dar la solucion al problema?

  5. 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 :)

  6. deseo colocar submenus a unmenu horizontal podria indicarme estoy siguiendo el ejemplo anterior .gracias

  7. 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.

  8. 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.

  9. 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.

  10. 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?

  11. 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!

  12. Hola Carolina, no soy bueno en css, pero creo que a #menuh deberías ponerle el ancho en 776px, algo así:

    css:
    #menuh {
            font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
            margin-top: 20px;
            width: 776px;
            overflow: auto; /* para englobar a los elementos flotantes*/
    }
  13. sensacional... lo que trate de lograr en 8 horas.. , lo hiuce en tres minutos con tu ayuda..., muchas gracias...
    Manuel - Santiago de Chile..

  14. 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

  15. 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!

  16. EXCELLENTE...
    Directo al punto y sin mucha palabreria... Asi, es como todo deberia ser...

    Muchas gracias

    Felicidades en un excelente post

    Pedro

  17. 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.

  18. 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,

  19. Muchas gracias x el tutorial..... pero no encuentro la forma d incluir menus verticales dentro de los horizontales

  20. 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

  21. Es justo lo que andaba buscando, pero... ¿alquien puede decirme cómo centrarlo en la página con un ancho fijo?

    Gracias por adelantado...

  22. 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

  23. 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?

  24. 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.

  25. 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

  26. 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

  27. 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

  28. hola nesesito ayuda para elaborar un menu en SharpDevelop donde despliegue las opciones ayudeme plis se lo voy a gradecer

  29. 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.

  30. 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

  31. holas ps encontre un aporte

    CSS:
    #menuv {
            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;"

  32. 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

  33. 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

  34. 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

  35. Muy buen menú, yo lo use en mi pagina
    pero tengo un problema. hice un menú desplegable pero no he podido hacer que se oculten los submenú
    como puedo hacer que se escondan al sacar el mouse de encima?
    agradecería mucho la ayuda

  36. Excelente el tutorial. Pero tengo una pregunta de aprendiz en desarrollo web; Si éste código lo tengo aparte, como un complemento, como lo inserto en la página web, sin tener que copiar todo el código en mi página? Les agradezco sus comentarios. siriusstar@hotmail.es

  37. Disculpa Amigo lo quiero centrar en mi web pero no me lo da tal como en ael ejemplo me lo da a la izquierda. y lo quiero centrar.

Comments are closed.