35 menús en HTML i CSS

Menú

En aquesta sèrie d'articles amb listes seleccionades de codi CSS, HTML i JavaScript, Solem compartir efectes de text, fletxes, capçaleres o sliders amb els quals emfatitzar el disseny de la nostra web perquè sigui més elegant o sigui capaç d'afegir valor a aquell contingut que presentem a al visitant.

Aquest cop li toca el moment als menús en HTML i CSS amb els que podreu animar adequadament aquests elements tan importants que ens permeten dirigir a l'usuari a les parts més importants del nostre eCommerce, blog i més. Anem amb ells per donar-li aquest toc buscat de qualitat al nostre lloc i que estigui el més actual possible als estàndards de el disseny d'IU.

Menú d'acordió slide

hamburguesa

Un menú slide o menú lateral d'hamburguesa compost per unes gràcils animacions amb un toc minimalista de gran efecte.

sidebar template
Article relacionat:
9 menús CSS de barra lateral que no et pots perdre

Swanky pur CSS Drop Down

Graciosos

Swanky Lil Drop Down Manu V2.0 es menú ben complet pur CSS que té el valor afegit que no hi ha res de codi JavaScript a la interfície d'usuari. Simplement excel·lent seva incorporació per descobrir gran elegància.

menú acordió

acordió

Aquest menú acordió es ben simple si ho comparem als dos anteriors amb HTML, JS i CSS.

menú Stripe
Article relacionat:
16 menús en cascada en CSS per renovar el teu lloc web

Menú vertical amb jQuery i CSS3

acordió vertical

Un menú vertical amb jQuery i CSS3 de gran toc per a una app o lloc web. Tot tipus de transicions i gradients amb ombres minimalistes.

menú circular

navegació circular

Un menú circular de navegació experimental que serveix perfectament per a un lloc web tècnic. Manufacturat en SVG i GreenSock Animation Platform, diferent sense cap dubte.

menú radial

radial

Un altre menú radial i experimental que perfectament val per a una pàgina destinada a un joc.

Menú circular CSS HTML

Circular

Un menú circular CSS HTML per col·locar-lateralment i que s'obre de forma circular amb una experiència d'ús genial.

Concepte de menú en anell

Anells

En aquest menú en anell tots els enllaços són posicionats a la part superior de cada un per anar creant diferents anells.

Menú pop up Flower

flor

Un altre particular menú pop-up amb un animació molt ben aplicada que produeix un gran efecte.

Recursive Hover Nav

Recursiu

Recursive Hover Nav és un menú drop down de molta qualitat per aquestes animacions que indiquen perfectament l'estructura de l'contingut del web.

navegació dropdown

CSS

Un menú navegació dropdown semblant a l'anterior encara que amb altres tints en el disseny de la interfície.

Menú dropdown pur CSS

Simple Pur CSS

Un altre menú dropdown de qualitat en CSS que segueix els estàndards actuals de el disseny d'UI.

Menú responsive i simple

simple responsive

pantalla completa, aquest menú responsive i simple en HTML5 i CSS3 és compatible amb Internet Explorer 11.

Menú pantalla completa a SVG

Full menu SVG

Un menú a pantalla completa a SVG col·locat a la part lateral en hamburguesa i que és de gran vistositat.

Mega Menu CSS

mega Menú

Un Mega Menu en CSS i HTML diferent al que s'ha vist, amb un estil modern i minimalista.

Another Menú Concept

concepte menú

Another Menú Concept és l'opció ideal si busques un menú diferent i original, Aquest és senzillament genial gràcies a un menú personalitzat a la icona i una animació de laboriosa manufactura.

Material Design Menú

material

Material Design Menú està basat en el llenguatge de disseny de Google. 

Burger menú mobile

Hamburguesa

Un menú hamburguesa optimitzat al mobile i que està fet en HTML, CSS i JavaScript.

Velocity.js pantalla completa flexbox

Velocitat

Velocity.js pantalla completa flexbox és un menú de enorme qualitat en l'efecte aconseguit i per la seva experiència d'usuari gairebé única. A pantalla completa flexbox amb velocity.js.

Full Page off-canves

Pàgina sencera

Full Page off-canves és un menú a pantalla completa d'enorme qualitat que serveix perfectament per mostrar com s'ha d'idear un web amb aquests valors.

Menú hover efecte de línia

Passa el ratolí

Un menú hover efecte de línia simple i molt agradable.

Concepte de menú CSS clip-path

Concepte CSS Menú

Un altre concepte de menú amb clip-path que consta d'un hover ben curiós i unes categories animades.

Strikethrough hover

Vaga

Strikethrough hover és un altre menú hover per als enllaços de curiós resultat.

Lavalamp CSS Menú

Lavalamp

Lavalamp CSS Menú conté una animació hover per a cada un dels enllaços que es presta a el dinamisme.

Slider de navegació

Clean Slider

Un slider de navegació que es desplaça a cada enllaç per fer-se distingir amb una tonalitat en vermell i una animació ben cuidada de gran resultat.

Mobile menú navegació

Mobile menú

Un menú hamburguesa de navegació de gran efecte dirigit a dispositius mòbils.

Concepte menú mobile iPhone X

iPhone X

Un menú ideat per iPhone X que li pot donar aquest toc de qualitat al teu lloc web una que estigui a l'una de el disseny de el telèfon d'Apple.

Submenú expand per mobile

Submenú expand

Submenú expand per mobile està dissenyat per al footer amb una gràcil animació i un desplaçament molt adequat. Elegància a tots els nivells per a una interfície mobile de la teva app o lloc web.

Navegació animada mobile

animat

Un altre menú animat per mobile amb un fons animat circular de gran resultat en el visual.

Menú amb scrolling i efectes hover

Scroll Hover

Un altre gran efecte per a un menú diferent i peculiar. aquest menú amb scrolling i efectes hover és perfecte per a restaurants, ressenyes i més.

Menú de filtre mobile

Filtre

Un menú de filtre mobile convertit per a la versió web i dirigit al mobile.

Navegació off-canvas

Fora de tela

Navegació off-canvas és un menú que experimenta amb transicions i la navegació per ser molt actual. Si busques alguna cosa nova amb el que sorprendre, el seu nivell és del millor d'aquesta llista.

Menú lateral amagat CSS

menú amagat

Un menú lateral a CSS que està amagat i així aparegui amb la icona d'hamburguesa.

Barra lateral de navegació Fixed

Fix

utilitza bootstrap en comptes de flexbox per donar suport a IE9 / 10. Un altre menú excel·lent per la seva barra lateral de navegació Fixed en el seu concepte.

morphing tab

Morphing

morphing tab és un menú dropdown que sorgeix a l'prémer sobre el botó tab principal.


3 comentaris, deixa el teu

Deixa el teu comentari

La seva adreça de correu electrònic no es publicarà. Els camps obligatoris estan marcats amb *

*

*

  1. Responsable de les dades: Miguel Ángel Gatón
  2. Finalitat de les dades: Controlar l'SPAM, gestió de comentaris.
  3. Legitimació: El teu consentiment
  4. Comunicació de les dades: No es comunicaran les dades a tercers excepte per obligació legal.
  5. Emmagatzematge de les dades: Base de dades allotjada en Occentus Networks (UE)
  6. Drets: En qualsevol moment pots limitar, recuperar i esborrar la teva informació.

  1.   Javier va dir

    Hola em sembla molt interessant els diferents menús que té disponible aquesta pàgina, la meva pregunta és com s'instal·la els arxius js dels menu? diverses veses intenti armar qualsevol menu els que tenen js no funcionen, o no instal·lar-los, en inspecionar elements de el navegador diu que la funcio que pararece de primer no està definida i així amb tots els menús

  2.   Eduardo va dir

    Excel·lent aportació :)

  3.   Cami va dir

    excel·lent espero que hi hagi més persones com vostès, que comparteix la seva saviesa i coneixement a les altres persones.