Menu designs in css

113 Modern CSS menu examples

See the Pen PureCSS Menu by Jason Tyler (@jasontyler) on CodePen.

Dev: Jason Tyler

Pure CSS Menu – #13

Dev: Ivan Grozdic

Pure CSS menu

See the Pen Pure CSS menu by Antonija Šimić (@tonkec) on CodePen.

Dev: Antonija Šimić

Pure CSS Drawer Menu with overlay

Dev: Mattia Astorino

CSS Menu Concept – #codepenchallenge

Pure CSS Menu Animation

See the Pen Pure CSS Menu Animation by Charlie Marcotte (@FUGU22) on CodePen.

Dev: Charlie Marcotte

Pure CSS Menu Drawer w/ off-click #CodePenChallenge

Hamburger + clip-path

Dev: Mikael Ainalem

Stripe Like CSS Only Menu

Dev: smpnjn

App Admin Menus + Light/Dark Modes – With Tailwind CSS

Dev: Rob Stinson

Animated Sidebar Left

Dev: Sergio Andrade

See the Pen Navi Bar by Yuhomyan (@yuhomyan) on CodePen.

Dev: Yuhomyan

Gooey Dropdown Menu

Dev: Mark Eriksson

Gooey Menu – CSS Only

Dev: Matthew Sechrest

Neumorphism context menu

Dev: Bar Hatsor

Fullscreen Menu Enter

Dev: alphardex

List Item Hower Effect

Dev: Abhinav Kumar

Overlay Css menu

Dev: Thibault D

CSS Swinging Panel Menu

Dev: Seth Abbott

CSS Menu Concept (Clip-path)

Dev: Charlie Marcotte

CSS menu feat. emoji

Dev: Piotr Galor

Flower CSS Menu

See the Pen Untitled by Lars Moelleken (@voku) on CodePen.

Dev: Lars Moelleken

Dropdown Menu

Dev: Kyle Lavery

CSS Hamburger Menu

Pure CSS menu cutout effect

Dev: Zach Saucier

Yet Another Pure CSS Menu

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

Dev: Colin Hall-Coates

Pure CSS Hamburger fold-out menu

Dev: Erik Terwan

Side Sliding Menu CSS

Dev: Eduard L

iOS style sliding menu

Dev: Jason Howmans

See the Pen menu by Arefeh hatami (@arefeh_htmi) on CodePen.

Dev: Arefeh hatami

Hamburger Menu

Dev: Yuhomyan

Three Fancy Link Hover Effects

Dev: James Hancock

Navigation Dotted Hover Effect

Dev: whisnuys

Context Menu

Vertical color-adapting CSS menu

Dev: Ines Montani

Css Menu Hover Effect

See the Pen Css Menu Hover Effect by Mehmet Burak Erman (@mburakerman) on CodePen.

Dev: Mehmet Burak Erman

Cool css menu

Dev: Fivera

CSS Menu Transition

Dev: Sarath AR

A CSS Menu Toggle using jQuery

Dev: Juwan Petty

CSS menu transitions

Pure CSS Menu

See the Pen Pure CSS Menu by Robin Brons (@bronsrobin) on CodePen.

Dev: Robin Brons

Pure CSS Menu

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

Dev: Colin Hall-Coates

CSS Menu hover effects

Dev: Sarath AR

Menubar Drop Down Style With CSS

Dev: Teja Sukmana

Pure CSS Menu Dropdown

Dev: Monkey Raptor

Slidey CSS Menu

See the Pen Slidey CSS Menu by Ian Gloude (@igloude) on CodePen.

Dev: Ian Gloude

See the Pen Menu css by @BrawadaCom (@Anna_Batura) on CodePen.

Dev: @BrawadaCom

Context menu with Feather icons

Dev: Håvard Brynjulfsen

Text fill on hover

Dev: G Rohit

Full-page navigation

Dev: Cassandra Rossall

Animated Menu

See the Pen Animated Menu by Una Kravets (@una) on CodePen.

Dev: Una Kravets

Off canvas menu

Dev: Mark Murray

Randomly generated CSS blobby nav

Pure CSS CPC full page nav

Dev: Alex Hart

CSS only fold out mobile menu

Dev: Cyd Stumpel

Menú horizontal / ítems verticales

Pure CSS Menu

Dev: Ehsan Amiri

Flexible radial CSS menu [POC]

Dev: iGadget

CSS – Menu Circular (LESS)

Dev: Dennis Calazans

Cool Pure CSS Menu!

Dev: Lucas Reis

Button Menu

See the Pen Button Menu by Alex Hripak (@alexh58) on CodePen.

Dev: Alex Hripak

Tilted CSS Menu

Dev: Felix Rilling

CSS Menu Animation

Menu Hover Fill Text

Dev: alphardex

Menu with awesome hover

See the Pen menu with awesome hover by Swarup Kumar Kuila (@uiswarup) on CodePen.

Dev: Swarup Kumar Kuila

CSS Navigation Bar

Dev: Jasmine G

Menu Hover Underline

Dev: alphardex

CSS Strange Nav

Sweet circular menu

Dev: Thomas

Flip Out CSS Menu

Dev: Cody Hadsall

SVG and CSS Menu

Dev: Ghost Rider

See the Pen CSS menu by Edison Mora (@Zerchan) on CodePen.

Dev: Edison Mora

UI Cards CSS Menu

Dev: Sergiu N.

Simple CSS menu

See the Pen Simple css menu by Surkov Dmitriy (@mast) on CodePen.

Dev: Surkov Dmitriy

Navbar Interaction

Dev: Himalaya Singh

Off Canvas Menu (CSS)

Barra de navegación con css – Menú bar

Dev: Dave Mendoza

Vertical Dark Menu with CSS

Dev: Alberto Leon

Moving Underline Nav Menu

Dev: Bennett Feely

Futuristic 3D Hover Effect

Dev: Jouan Marcel

See the Pen 3D Navbar by Chenius (@chenius) on CodePen.

Dev: Chenius

Just Another Menu(Pure CSS)

Dev: Akhil Sai Ram

Simple radial menu

See the Pen Simple radial menu by Nikolay Talanov (@suez) on CodePen.

Dev: Nikolay Talanov

Filter Menu

See the Pen Filter Menu by Arjun Amgain (@arjunamgain) on CodePen.

Dev: Arjun Amgain

Fullscreen Menu Flexbox Method

Dev: Marcus Hall

Mobile navigation animation

Dev: Karlo Videk

Animated Tab Bar

See the Pen Animated Tab Bar by abxlfazl khxrshidi (@abxlfazl) on CodePen.

Dev: abxlfazl khxrshidi

Colourful Flower Popup Menu

Dev: Jasper LaChance

Multi level css only push menu

Pure CSS3 Mega Dropdown Menu With Animation (Vertical)

Dev: Rizky Kurniawan Ritonga

Overlay menu

See the Pen Overlay menu by Ivan Grozdic (@ig_design) on CodePen.

Dev: Ivan Grozdic

Floatting Draggable Menu (Messenger like)

Dev: Andy Pagès

Animated Tab Bar

See the Pen Animated Tab Bar v.2 by abxlfazl khxrshidi (@abxlfazl) on CodePen.

Dev: abxlfazl khxrshidi

Drop-down menu

See the Pen Drop-down menu by Ivan Grozdic (@ig_design) on CodePen.

Dev: Ivan Grozdic

Social App Menu

Dev: Matt Hoiland

Full screen burger menu

Dev: Paul Sullivan

PURE CSS SIDEBAR TOGGLE MENU

Dev: Jelena Jovanovic

Pure CSS Header Menu

See the Pen Pure CSS Header Menu by Nikolay Talanov (@suez) on CodePen.

Dev: Nikolay Talanov

Pure CSS Circle Menu

Dev: Hadar Weiss

Burger Menu inspired by Material Design

Dev: Victor Freire

Another menu concept

See the Pen Another menu concept by Rune Sejer Hoffmann (@RSH87) on CodePen.

Dev: Rune Sejer Hoffmann

Perspective Split Text Menu Hover

Dev: James Bosworth

Pure CSS Hamburger Menu & Overlay

Dev: Brad Traversy

Expanding Burger/Menu Icon

Dev: Joe Harry

Menu Hover Line Effect

Dev: Mehmet Burak Erman

Dropdown menu

Dev: Leena Lavanya

CSS Grid Menu Panels

Dev: Ryan Mulligan

SVG UI Navigation Concept

Dev: Alex Permyakov

Источник

130+ Beautiful CSS Menus (Free Code + Demos)

Enjoy this huge collection of 100% free and open source HTML and CSS navigation menu code examples. All examples are easy to add to your own project.

1. Mega Dropdown

2. Building A Circular Navigation With CSS Transforms

3. CSS Menu — Text Fill On Hover

Filling the text with a different color on hover — a creative text effect. View this pen on full screen mode and enjoy this creative pen

4. Circle Links Menu

5. Full-page Navigation

6. CSS Only Fold Out Mobile Menu

7. Pure CSS Single Page Application

8. Randomly Generated CSS Blobby Nav

A randomly generated blobby nav created with CSS. Has smooth anchor scrolling, uses backdrop-filter, and SVG filter. Also, has a pure CSS «off» click by resizing a label Enjoy!

9. Full-Page Navigation

10. Pure CSS CPC Full Page Nav

11. Full Page Nav CSS

12. Menu Hover Fill Text

13. Menu With Awesome Hover

14. Drop Down Menu

15. Navigation With Sub-Navigation

16. Menu Hover Underline

17. Apple TV Menu Interface (Chrome, Edge, Safari)

18. CSS Strange Nav

19. Off Canvas Menu Pure CSS

20. Navbar With Pure Css

21. Pure CSS Navigation Simple & Easy

22. Simple PureCss Dropdown Menu With Following Subnav

23. The Circular Menu

24. Navbar Interaction

25. Off-Canvas Menu On Pure CSS

26. Vertical Dark Menu With CSS

27. Barra De Navegación Con Css — Menú Bar

28. The More Menu

Using clip-path times two to make an irregular shaped object fill out a cut-out shape in an unfold open menu effect.

29. Pure CSS Circle Menu

Circular menu with toggle button created only with css. You can configure the menu size, number of items, color of toggle button and links icons.

30. CSS — Folding Menu

31. Moving Underline Nav Menu

32. 🌟 Circle Menu (Pure CSS) 🌟

33. Fun Hover Navigation

Fun navigation effect using CSS Keyframes. A quick jump back to the old school. Take a look and let me know what you think 👍🏼

34. Pure CSS Magic Line Navbar

I’ve always been fascinated by navbars that would have a line following your cursor while you hovered a link, so I decided to finally try my hand at making one with just CSS.

35. Position Sticky Can Do A Lot

36. CSS Only Drop Down Menu

37. Slide Out Navigation Menu

38. Pure CSS Menu Drawer W/ Off-click 🍔

39. 3D Navbar

40. Just Another Menu (Pure CSS)

Pure CSS Floating menu animation Inspired by https://www.uplabs.com/posts/options-floating-interaction design

41. 💪 CSS Menu Feat. Emoji

42. The Menu

43. CSS Only Perspective Menus 🦄

44. Dropdown Menu Animation

45. Pure CSS Fading Out For Siblings Menu Options On Option Hover

46. CSS-Only Nested Dropdown Navigation (ARIA)

Updated with ARIA roles and accessibility. Based off of a piece of code I did for @jzl’s portfolio navigation at http://jeselleobina.com/portfolio. Stay tuned for a full tutorial on Tuts+!

47. Fullscreen Menu Flexbox Method

48. Full Screen Navigation Overlay

One current trend in navigation styles that you may have seen is the full screen navigation overlay. With this type of navigation, toggling the navigation will overlay the menu across the entire screen. Codrops did a really nice set of demos with full screen overlay styles last year. I wan.

49. Mobile Navigation Animation

Mobile navigation open and close animations using GSAP TweenMax and TimelineMax. Still needs some transition tweaking.

Источник