Um dos grandes desafios de todo programador Front-End é realizar uma configuração do começo ao fim sem uso nenhum de Javascript.
Não usar Javascript em um componente não quer dizer que você tenha que odiar usar javascript, e sim que você consegue resolver problemas e criar soluções de forma simples eficiente e eficaz.
Por isso post vamos listar 12 menus de navegação criados usando apenas CSS sem uso de nenhum código Javascript.
Confira abaixo a lista para servir de inspiração e ver se algum desses menus se encaixa em algum projeto em que você esteja trabalhando no momento.
Menu de sobreposição
Um menu “Hambúrguer” que ao clicar o menu aparece sobrepondo toda a tela do seu site.
See the Pen Mobile Menu – CSS by Daniel Hearn (@danhearn) on CodePen.
Menu Mobile com efeito fade-in
Esse também é um menu “Hambúrguer” que ao clicar mostra as opções do menu na horizontal com efeito de fade-in.
See the Pen Mobile Menu (CSS) by AY (@amycodes) on CodePen.
Menu com efeito e sobreposição
Esse menu também sobrepõe o conteúdo do site e ele também tem um efeito ao clicar e mostrar o conteúdo do menu.
See the Pen Hamburger Menu – Pure CSS by Mark Claus Nunes (@mnunes) on CodePen.
Menu estilo tumblr
Menu semelhante ao usado no tumblr e com efeito bem legal.
See the Pen Tumblr inspired menu (pure css) by John Riordan (@JohnRiordan) on CodePen.
Menu de navegação vertical no canto direito da tela
Menu muito usado em vários sites, porém esse foi feito com transição que leva todo o site para o lado e abre no canto direito da tela.
See the Pen Hidden Navigation Menu (Pure CSS) by Jessica Jones (@helloheyjess) on CodePen.
Menu estilo modal
Esse é um menu no estilo modal com efeito fade-in e fade-out.
See the Pen Fade-In/Fade-Out Menu – Pure CSS by Ben Melluish (@pseudosocial) on CodePen.
Mega Menu
Esse menu é muito usado em e-commerce e sites com grande quantidade de conteúdo.
See the Pen Mega Menu Pure CSS by Mohammed Naji Abu Alqumboz (@mohnaji94) on CodePen.
Menu vertical esqueda
Um dos menus mais usados e mais vistos nas versões mobile de todo o mundo, com efeito de transição e abertura pelo lado esquerdo da tela.
See the Pen Off Canvas Menu – Pure CSS by Muhamed Ibrahim (@MuhamedIbrahim) on CodePen.
Menu com efeito radial
Menu elegante com efeito radial.
See the Pen Animated menu by Dario Fuzinato (@fuzinato) on CodePen.
Menu com efeito arredondado
Esse menu ao passar o mouse ele começa um efeito arredondado e aumenta até perder toda a forma arredondada.
See the Pen Material design round mask menu (pure css) by Sorin Botirla (@sorinbotirla) on CodePen.
Menu de compartilhamento
Esse é um menu que funciona bem em postagens e notícias, ele usado para compartilhar o conteúdo.
See the Pen Just Another Menu(Pure CSS) by Akhil Sai Ram (@akhil_001) on CodePen.
Menu de navegação mobile
Menu usado em versões mobile, geralmente fica fixo no rodapé do site, e possui um efeito bem interessante.
See the Pen Animated mobile navigation menu (pure CSS) by Lovro Kalan (@LovroKalan) on CodePen.
Conclusão
Ter um menu de fácil navegação no site faz total diferença para a experiência do seu usuário, portanto uma boa escolha vai ajudar levar seu site ao sucesso.
Os menus listados nesse posts não são de autoria da cupcom mas estão livres para ser usado, basta escolher qual se encaixa melhor em seu projeto e usa-lo.
Espero ter ajudado.
