JavaScript is great. It has changed web development for good. But once in a while we need to build parts of our websites using only CSS. This maybe to reduce lines of code or client requirements or an other hundreds of reasons. Here I have for you some good examples of how you can create Navigation Menu using only CSS.

---

Off-Canvas Navigation Menu

An Off-canvas or hidden navigation menu slides in and out from the side of a web page when toggled.

See the Pen Hidden Navigation Menu (Pure CSS) by Jessica Jones (@helloheyjess) on CodePen.

Fade In and Fade Out Menu

A modal window that fades in and out houses the navigation menu in this example.

See the Pen Fade-In/Fade-Out Menu – Pure CSS by Ben Melluish (@pseudosocial) on CodePen.

Mega Menu

How about a full-width mega menu? Nicely done!

See the Pen Mega Menu Pure CSS by Mohammed Naji Abu Alqumboz (@mohnaji94) on CodePen.

Off-Canvas Menu

A well-designed slide-out menu with a nice UX.

See the Pen Off Canvas Menu – Pure CSS by Muhamed Ibrahim (@MuhamedIbrahim) on CodePen.

Animated Radial Menu

Here’s a cool social sharing icon radial menu.

See the Pen Animated menu by Dario Fuzinato (@fuzinato) on CodePen.

Mobile-Like Aside Menu

Another slide out hamburger menu example.

See the Pen mobile-like aside menu pure css by Felipe Nunes (@willpower) on CodePen.

Material Design Round Mask Menu

An interesting concept where the menu appears on hover.

See the Pen Material design round mask menu (pure css) by Sorin Botirla (@sorinbotirla) on CodePen.

Just Another Menu

Not really “just another menu”, this one is a share icon menu that would work well on blog posts or other content that needs to be shared.

See the Pen Just Another Menu(Pure CSS) by Akhil Sai Ram (@akhil_001) on CodePen.

Drop Down Navigation Menu

A drop down menu with sub-items appearing with an interesting animation.

See the Pen #CodePenChallenge: Menu by Hakkam Abdullah (@Moslim) on CodePen.

Radial Menu

Another radial menu not unlike the previous examples.

See the Pen Radial Menu – Pure CSS by Colin Hall-Coates (@Oka) on CodePen.

Fullscreen Overlay Menu

And here’s another fullscreen overlay menu with some nice animation.

See the Pen Fullscreen overlay menu (pure css) by Vlada Oleynik (@vladaoleynik) on CodePen.

Responsive Hamburger Menu

A nice navigation menu that adjusts to various screen sizes like a responsive menu should.

See the Pen Responsive hamburger menu – pure CSS #1 by mutedblues (@mutedblues) on CodePen.

Animated Mobile Navigation Menu

Lastly, we have a bottom of the screen mobile device menu with a slick animation.

See the Pen Animated mobile navigation menu (pure CSS) by Lovro Kalan (@LovroKalan) on CodePen.

Tumblr Inspired Menu

As the title says, this menu was inspired by Tumblr and has some slick animation.

See the Pen Tumblr inspired menu (pure css) by John Riordan (@JohnRiordan) on CodePen.

Hamburger Menu With Animations

Some eye-catching animations make this menu stand out.

See the Pen Hamburger Menu – Pure CSS by Mark Claus Nunes (@mnunes) on CodePen.

Mobile Fade In Menu

A slightly different approach with the menu fading into view to the right of the hamburger icon. This obviously would work best on small screens with only a few menu items.

See the Pen Mobile Menu (CSS) by AY (@amycodes) on CodePen.

Mobile Overlay Menu

Here’s a hamburger icon that reveals a full screen overlay when clicked, with a nice animation of the hamburger turning into a close “X” icon.

See the Pen Mobile Menu – CSS by Daniel Hearn (@danhearn) on CodePen.

One Page Navigation CSS Menu

Full Page Navigation Menu

See the Pen One Page Navigation CSS Menu by Alberto Hartzet (@hrtzt) on CodePen.