35 menús en HTML y CSS

Menú

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

Hamburguesa

Un menú slide o menú lateral de hamburguesa compuesto por unas gráciles animaciones con un toque minimalista de gran efecto.

sidebar template
Artículo relacionado:
9 menús CSS de barra lateral que no te puedes perder

Swanky puro CSS Drop Down

Swanky

Swanky Lil Drop Down Manu V2.0 es 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

Acordeón

Este menú acordeón es bien simple si lo comparamos a los dos anteriores con HTML, JS y CSS.

Menú Stripe
Artículo relacionado:
16 menús en cascada en CSS para renovar tu sitio web

Menú vertical con jQuery y CSS3

Acordeón vertical

Un menú vertical con jQuery y CSS3 de gran toque para una app o sitio web. Todo tipo de transiciones y gradientes con sombras minimalistas.

Menú circular

Navegación circular

Un menú circular 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

Radial

Otro menú radial y experimental que perfectamente vale para una página destinada a un juego.

Menú circular CSS HTML

Circular

Un menú circular CSS HTML para colocarlo lateralmente y que se abre de forma circular con una experiencia de uso genial.

Concepto de menú en anillo

Anillos

En este menú en anillo los enlaces son posicionados en la parte superior de cada uno para ir creando distintos anillos.

Menú pop up Flower

Flower

Otro particular menú «pop-up» con un animación muy bien aplicada que produce un gran efecto.

Recursive Hover Nav

Recursive

Recursive Hover Nav es un menú drop down de mucha calidad por esas animaciones que indican perfectamente la estructura del contenido de la web.

Navegación dropdown

CSS

Un menu de navegación dropdown parecido al anterior aunque con otras tintes en el diseño de la interfaz.

Menú dropdown puro CSS

Simple Puro CSS

Otro menú dropdown de calidad en CSS que sigue los estándares actuales del diseño de UI.

Menu responsive y simple

Simple responsive

pantalla completa, este menú responsive y simple en HTML5 y CSS3 es compatible con Internet Explorer 11.

Menú pantalla completa en SVG

Full menu SVG

Un menú a pantalla completa en SVG colocado en la parte lateral en hamburguesa y que es de gran vistosidad.

Mega Menu CSS

Mega Menú

Un Mega Menu en CSS y HTML distinto a lo visto, con un estilo moderno y minimalista.

Another Menu Concept

Concepto menú

Another Menu Concept es la opción ideal 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ú

Material

Material Design Menú está basado en el lenguaje de diseño de Google. 

Burger menú mobile

Burger

Un menú hamburguesa optimizado a lo mobile y que está hecho en HTML, CSS y JavaScript.

Velocity.js pantalla completa flexbox

Velocity

Velocity.js pantalla completa flexbox es 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

Full page

Full Page off-canvas es 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

Hover

Un menú hover efecto de línea simple y muy agradable.

Concepto de menú CSS clip-path

Concepto CSS Menú

Otro concepto de menú con clip-path que consta de un hover bien curioso y unas categorías animadas.

Strikethrough hover

Strike

Strikethrough hover es otro menú hover para los enlaces de curioso resultado.

Lavalamp CSS Menú

Lavalamp

Lavalamp CSS Menú contiene una animación hover para cada uno de los enlaces que se presta al dinamismo.

Slider de navegación

Clean Slider

Un slider de navegación que se desplaza a cada enlace para hacerse distinguir con una tonalidad en rojo y una animación bien cuidada de gran resultado.

Mobile menú navegación

Mobile menú

Un menú hamburguesa de navegación de gran efecto dirigido a dispositivos móviles.

Concepto menú mobile iPhone X

iPhone X

Un menú ideado para 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.

Submenú expand para mobile

Submenu expand

Submenú expand para mobile está diseñado para el footer 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.

Navegación animada mobile

Animado

Otro menú animado para mobile con un fondo animado circular de gran resultado en lo visual.

Menú con scrolling y efectos hover

Scroll Hover

Otro gran efecto para un menú distinto y peculiar. Este menú con scrolling y efectos hover es perfecto para restaurantes, reseñas y más.

Menú de filtro mobile

Filtro

Un menú de filtro mobile convertido para la versión web y dirigido a lo mobile.

Navegación off-canvas

Off-canvas

Navegación off-canvas es 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

Menú escondido

Un menú lateral en CSS que está escondido y así aparezca con el icono de hamburguesa.

Barra lateral de navegación Fixed

Fixed

Utiliza bootstrap en vez de flexbox para dar soporte a IE9/10. Otro menú excelente por su barra lateral de navegación Fixed en su concepto.

Morphing tab

Morphing

Morphing tab es un menú dropdown que surge al pulsar sobre el botón tab principal.


Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

      Javier dijo

    Hola me parece muy interesante los diferentes menus que tiene disponible esta pagina, mi pregunta es como se instala los archivos js de los menu? varias veses intente armar cualquier menu los que tienen js no funcionan, o no se instalarlos, en inspecionar elementos del navegador dice que la funcion que pararece de primero no esta definida y asi con todos los menus

      Eduardo dijo

    Excelente aporte :)

      Cami dijo

    excelente espero que hayan mas personas como ustedes, que comparte su sabiduría y conocimiento a las demás personas.