Esta selección de menús está compuesta por increíbles diseños actuales y también otros que podrían categorizarse como ‘retro’. En cualquier caso, son funcionales e ideales para implementar en cualquier web o proyecto.
Gracias a unos sencillos trucos CSS puedes incluirlos en tus diseños web de forma sencilla, son gratis de usar y están adaptados para que respondan a diferentes tamaños y resoluciones de pantalla, tanto para navegadores de escritorio como para teléfonos móviles o tablets.
Truco Avanzado CSS
![css-truco-avanzado](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 400 34'%2F%3E)
Ver Tutorial
Menú desplegable con CSS
![menu-desplegable-css](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 500 180'%2F%3E)
Ver Tutorial
Navegación vertical con CSS3
![navegacion-vertical-css](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 500 312'%2F%3E)
Ver Tutorial
Menú jQuery Vertical
![menu-jquery-vertical](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 202 177'%2F%3E)
Ver
Menú CSS Responsive Multinivel
![menu-css-responsive-multinivel](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver Tutorial
Menú CSS3 con animación
![menu-css3-animacion](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 550 48'%2F%3E)
Ver
Menús CSS3 Animados
![menus-css3-animados](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver
Menú gris HTML5/CSS3
![css3-html5-menu-gris](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 500 293'%2F%3E)
Ver
Menú desplegable al estilo NVIDIA
![menu-desplegable-nvidia](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver Tutorial
Menú desplegable al estilo Vimeo
![menu-desplegable-vimeo](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver Tutorial
Menú con texto animado e iconos de menú
![menu-texto-animado-iconos](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver
Menú CSS3 con tabs
![css-menu-tabs](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 497 372'%2F%3E)
Menú CSS en tres niveles
![menu-css-3-niveles](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 500 216'%2F%3E)
Ver Tutorial
Menú responsive CSS
![menu-responsive](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver Tutorial
Menú jQuery con estilo CSS3
![css3-jquery-dropdown-menu](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver
Menú con gráficos rollovers
![menu-graficos-rollovers](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 182 205'%2F%3E)
Ver
Menú CSS multinivel con efecto metal
![menu-css3-multinivel-metal](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 289'%2F%3E)
Ver
Menú CSS minimalista
![menu-css-html5-minimalista](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 500 285'%2F%3E)
Ver Tutorial
Menú Responsive con iconos para cada elemento
![menu-responsive](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver Tutorial
Menú CSS3 Minimalista
![menu-css3-minimalista](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 147 213'%2F%3E)
Ver
PageSlide Menú
![pageslide-menu](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Menú CSS con dos colores
![menu-css-cool](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 180'%2F%3E)
Ver
Menú CSS animado con colores
![css-menu-animado-colores](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 500 319'%2F%3E)
Ver Tutorial
Menú CSS3 sexy
![menu-css-sexy](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 200'%2F%3E)
Ver
Menú CSS3 animado y elegante
![menu-css3-animado-elegante](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 500 277'%2F%3E)
Ver Tutorial
Menú CSS Sprite
![menu-css-sprite](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 550 119'%2F%3E)
Ver
Menú con panel slide
![menu-panel-slide](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver
Menú horizontal verde con CSS
![menu-horizontal-verde-css](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 500 260'%2F%3E)
Ver Tutorial
Menú desplegable Plano
![menu-desplegable-plano](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver Tutorial
Menú al estilo Digg clásico
![menu-digg](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 550 223'%2F%3E)
Ver
Menú CSS3 con slide
![css3-menu-slide](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 275'%2F%3E)
Ver
Cómo crear un menú desplegable CSS
![crear-menu-desplegable-css](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 500 234'%2F%3E)
Ver Tutorial
Menú para móviles
![menu-jquery-moviles](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver
Menú desplegable con efecto al estilo Youtube
![menu-css-youtube](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver Tutorial
Menú dinámico con contenido que se reemplaza
![menu-pagina-dinamica](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 232 94'%2F%3E)
Ver
Menú responsive CSS3
![menu-responsive-css3](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver
Menú CSS al estilo Facebook
![menu-css-facebook](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver
Menú desplegable CSS con efectos de música y sonido
![menu-desplegable-css-musical](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 500 262'%2F%3E)
Ver Tutorial
Menú vertical CSS multicolor
![menu-vertical-multicolor-css](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 500 372'%2F%3E)
Ver Tutorial
Menú al estilo Dock de Mac
![menus-css-dock-mac](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 500 163'%2F%3E)
Ver
Menú CSS3 desplegable
![menu-css-vertical](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 500 280'%2F%3E)
Ver Tutorial
Menú desplegable simple
![menu-desplegable-simple](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver
Menú desplegable por click con CSS3
![css3-menu-click](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 500 267'%2F%3E)
Ver Tutorial
Menú con submenú dinámico y colores pastel
![menu-colores-pastel-css](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 315 76'%2F%3E)
Cómo crear un menú desplegable colorido con CSS3
![crear-menu-desplegable-css-colorido](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 500 298'%2F%3E)
Ver Tutorial
Menú CSS3 obscuro elegante
![menu-css-obscuro-elegante](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver
Menú desplegable CSS sencillo
![menu-css-sencillo](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 392 226'%2F%3E)
Ver Tutorial
Menú con elementos desplegables
![menu-enrollable](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 550 77'%2F%3E)
Ver
Menú para Redes Sociales
![menu-redes-sociales](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver
Menú desplegable CSS3 con Scroll
![menu-css-con-scroll](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 500 283'%2F%3E)
Ver Tutorial
Menú Simple jQuery
![menu-simplejquery](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 550 199'%2F%3E)
Ver
Menú dropdown CSS Puro
![menu-dropdown-puro](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 500 240'%2F%3E)
Ver Tutorial
Menú vertical CSS simple
![menu-css-vertical-simple](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 249 231'%2F%3E)
Ver
Menú con descripciones
![menu-descripcion](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver
Menú con CSS jQuery animado
![menu-css-jquery-animado](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 516 76'%2F%3E)
Ver
Menú CSS con pestañas
![css-menu-tabulado](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 500 217'%2F%3E)
Ver Tutorial
Menú con slide lateral horizontal
![menu-slide-lateral](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 95 505'%2F%3E)
Ver
Menú CSS con pictogramas
![menu-css-pictogramas](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver
Menú CSS3 con tabs
![menu-tabs-css](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 398 56'%2F%3E)
Ver
Creando un menú CSS3
![creando-menu-css3](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 500 292'%2F%3E)
Ver Tutorial
Menú CSS vertical
![menu-vertical-css](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 400 125'%2F%3E)
Ver
Menú con slide
![menu-slide](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver Tutorial
Menú de navegación responsive
![menu-responsive](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 360 247'%2F%3E)
Ver
Mmenu
![mmenu](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver Tutorial
Menú al estilo Google Nexus
![menu-google-nexus](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver Tutorial
Menú responsive Drop Down con CSS y jQuery
![menu-drop-down-responsive](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 552 453'%2F%3E)
Ver
Menú vertical simple con jQuery
![menu-vertical-jquery](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver Tutorial
Menú con rotación y efecto grunge
![menu-grunge](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 580 283'%2F%3E)
Ver
Menú CSS con forma circular
![menu-css-circular](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver Tutorial
Menú con formularios integrados
![menu-formularios](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 560 280'%2F%3E)
Menú CSS Retro
![menu-css-retro](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver Tutorial
Menú con slide inferior
![menu-slide-inferior](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 580 362'%2F%3E)
Ver
Menú con Slide Horizontal
![menu-slide-horizontal](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver
Menú Halftone
![menu-jquery-halftone](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 293'%2F%3E)
Ver
Menú responsive Retina-Ready
![menu-css-retina-ready](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver
Menú CSS3 avanzado con botones
![menus-css-botones](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 212'%2F%3E)
Ver
Menú CSS vertical con efecto hover
![menu-css-vertical-hover](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 100 85'%2F%3E)
Ver
Menú CSS al estilo Apple
![menu-estilo-apple](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 235'%2F%3E)
Ver
Menú responsive multinivel
![menu-responsive-multinivel](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver
CSS3 menú con colores
![menu-css-colores](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 289'%2F%3E)
Ver
Menú CSS personalizable
![menu-css-personalizable](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver
Menú con banners
![menu-banners](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 179'%2F%3E)
Ver
Menú horizontal drop-down
![menu-horizontal-dropdown](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 270'%2F%3E)
Ver
Menú CSS con animaciones
![menu-animaciones-css](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 540 323'%2F%3E)
Ver