35 menús en HTML y CSS
En esta serie de artículos con listas seleccionadas de código CSS, HTML y JavaScript, solemos compartir efectos de texto, flechas, headers o sliders con los que enfatizar el diseño de nuestra web para que sea más elegante o sea capaz de añadir valor a aquel contenido que presentemos al visitante.
Esta vez le toca el momento a los menús en HTML y CSS con los que podréis animar adecuadamente esos elementos tan importantes que nos permiten dirigir al usuario a las partes más importantes de nuestro eCommerce, blog y más. Vamos con ellos para darle ese toque buscado de calidad a nuestro sitio y que esté lo más actual posible a los estándares del diseño de IU.
Menú de acordeón slide
Un menú lateral de hamburguesa compuesto por unas gráciles animaciones con un toque minimalista de gran efecto.
Swanky puro CSS Drop Down
Un menú bien completo puro CSS que tiene el valor añadido de que no hay nada de código JavaScript en la interfaz de usuario. Simplemente excelente su incorporación para descubrir gran elegancia.
Menú acordeón
Este menú es bien simple si lo comparamos a los dos anteriores con HTML, JS y CSS.
Menú vertical con jQuery y CSS3
Un menú vertical de gran toque para una app o sitio web. Todo tipo de transiciones y gradientes con sombras minimalistas.
Menú circular
Un menú de navegación experimental que sirve perfectamente para un sitio web técnico. Manufacturado en SVG y GreenSock Animation Platform, distinto sin ninguna duda.
Menú radial
Otro menú radial y experimental que perfectamente vale para una página destinada a un juego.
Menú circular CSS HTML
Un menú para colocarlo lateralmente y que se abre de forma circular con una experiencia de uso genial.
Los enlaces son posicionados en la parte superior de cada uno para ir creando distintos anillos.
Menú pop up Flower
Otro particular menú “pop-up” con un animación muy bien aplicada que produce un gran efecto.
Un menú drop down de mucha calidad por esas animaciones que indican perfectamente la estructura del contenido de la web.
Un menu de navegación dropdown parecido al anterior aunque con otras tintes en el diseño de la interfaz.
Menú dropdown puro CSS
Otro menú dropdown de calidad que sigue los estándares actuales del diseño de UI.
Menu responsive y simple
Menú a pantalla completa responsive y simple en HTML5 y CSS3. Compatible con Internet Explorer 11.
Menú pantalla completa en SVG
Un menú a pantalla completa en SVG colocado en la parte lateral en hamburguesa y que es de gran vistosidad.
Mega Menu CSS
Un Mega Menu en CSS y HTML distinto a lo visto.
Another Menu Concept
Si buscas un menú distinto y original, este es sencillamente genial gracias a un menú personalizado en el icono y una animación de laboriosa manufactura.
Material Design Menú
Un menú basado en el lenguaje de diseño de Google con su Material Design.
Un menú optimizado a lo mobile y que está hecho en HTML, CSS y JavaScript.
Velocity.js pantalla completa flexbox
Un menú de enorme calidad en el efecto conseguido y por su experiencia de usuario casi única. A pantalla completa flexbox con velocity.js.
Full Page off-canvas
Un menú a pantalla completa de enorme calidad que sirve perfectamente para mostrar cómo se ha de idear una web con esos valores.
Menú hover efecto de línea
Un efecto de línea simple y muy agradable en la vista en hover.
Otro concepto de menú con clip-path que consta de un hover bien curioso y unas categorías animadas.
Strikethrough hover
Otro efecto hover para los enlaces de curioso resultado.
Lavalamp CSS Menú
Una animación hover para cada uno de los enlaces que se presta al dinamismo.
Un slider que se desplaza a cada enlace para hacerse distinguir con una tonalidad en rojo y una animación bien cuidada de gran resultado.
Un menú de hamburguesa de gran efecto dirigido a dispositivos móviles.
Un menú ideado para el iPhone X que le puede dar ese toque de calidad a tu sitio web par que esté a la par del diseño del teléfono de Apple.
Para el footer en mobile con una grácil animación y un desplazamiento muy adecuado. Elegancia a todos los niveles para una interfaz mobile de tu app o sitio web.
Otro menú animado para mobile con un fondo animado circular de gran resultado en lo visual.
Menú con scrolling y efectos hover
Otro gran efecto para un menú distinto y peculiar. Perfecto para restaurantes, reseñas y más.
Menú de filtro mobile
Un menú de filtro convertido para la versión web y dirigido a lo mobile.
Un menú que experimenta con transiciones y la navegación para ser muy actual. Si buscas algo nuevo con lo que sorprender, su nivel es de lo mejor de esta lista.
Menú lateral escondido CSS
Un menú lateral en CSS que está escondido y así aparezca con el icono de hamburguesa.
Utiliza bootstrap en vez de flexbox para dar soporte a IE9/10. Otro menú excelente en su concepto.
Morphing tab
Lista dropdown que surge al pulsar sobre el botón tab principal.