Главная » Языки программирования

Шаблоны css для меню

Содержание
  1. 113 Modern CSS menu examples
  2. Latest Post
  3. 55 Cool CSS Calendars
  4. 19 Barcodes in CSS
  5. 25 CSS Masonry Layout Examples
  6. 23 CSS Card Layouts
  7. 27 CSS Subscribe Forms
  8. 130+ Beautiful CSS Menus (Free Code + Demos)
  9. 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.
  10. 1. Mega Dropdown
  11. 2. Building A Circular Navigation With CSS Transforms
  12. 3. CSS Menu — Text Fill On Hover
  13. 4. Circle Links Menu
  14. 5. Full-page Navigation
  15. 6. CSS Only Fold Out Mobile Menu
  16. 7. Pure CSS Single Page Application
  17. 8. Randomly Generated CSS Blobby Nav
  18. 9. Full-Page Navigation
  19. 10. Pure CSS CPC Full Page Nav
  20. 11. Full Page Nav CSS
  21. 12. Menu Hover Fill Text
  22. 13. Menu With Awesome Hover
  23. 14. Drop Down Menu
  24. 15. Navigation With Sub-Navigation
  25. 16. Menu Hover Underline
  26. 17. Apple TV Menu Interface (Chrome, Edge, Safari)
  27. 18. CSS Strange Nav
  28. 19. Off Canvas Menu Pure CSS
  29. 20. Navbar With Pure Css
  30. 21. Pure CSS Navigation Simple & Easy
  31. 22. Simple PureCss Dropdown Menu With Following Subnav
  32. 23. The Circular Menu
  33. 24. Navbar Interaction
  34. 25. Off-Canvas Menu On Pure CSS
  35. 26. Vertical Dark Menu With CSS
  36. 27. Barra De Navegación Con Css — Menú Bar
  37. 28. The More Menu
  38. 29. Pure CSS Circle Menu
  39. 30. CSS — Folding Menu
  40. 31. Moving Underline Nav Menu
  41. 32. 🌟 Circle Menu (Pure CSS) 🌟
  42. 33. Fun Hover Navigation
  43. 34. Pure CSS Magic Line Navbar
  44. 35. Position Sticky Can Do A Lot
  45. 36. CSS Only Drop Down Menu
  46. 37. Slide Out Navigation Menu
  47. 38. Pure CSS Menu Drawer W/ Off-click 🍔
  48. 39. 3D Navbar
  49. 40. Just Another Menu (Pure CSS)
  50. 41. 💪 CSS Menu Feat. Emoji
  51. 42. The Menu
  52. 43. CSS Only Perspective Menus 🦄
  53. 44. Dropdown Menu Animation
  54. 45. Pure CSS Fading Out For Siblings Menu Options On Option Hover
  55. 46. CSS-Only Nested Dropdown Navigation (ARIA)
  56. 47. Fullscreen Menu Flexbox Method
  57. 48. Full Screen Navigation Overlay
  58. 49. Mobile Navigation Animation
  59. 16 CSS Horizontal Menus
  60. Related Articles
  61. Author
  62. Links
  63. Made with
  64. About the code
  65. Pure CSS Magic Line Navbar
  66. Author
  67. Links
  68. Made with
  69. About the code
  70. Position Sticky Subnav
  71. Author
  72. Links
  73. Made with
  74. About the code
  75. Perspective Menus
  76. Author
  77. Links
  78. Made with
  79. About the code
  80. Hover Effect for Horizontal Menu
  81. Author
  82. Links
  83. Made with
  84. About the code
  85. Menu Hover Line Effect
  86. Author
  87. Links
  88. Made with
  89. About the code
  90. CSS Horizontal Menu
  91. Author
  92. Links
  93. Made with
  94. About the code
  95. Strikethrough Hover Effect for Menu
  96. Author
  97. Links
  98. Made with
  99. About the code
  100. Lavalamp CSS Menu
  101. Author
  102. Links
  103. Made with
  104. About the code
  105. Horizontal Icon Navigation
  106. Author
  107. Links
  108. Made with
  109. About the code
  110. Slide Horizontal Menu
  111. Author
  112. Links
  113. Made with
  114. About the code
  115. Skewed Menu in HTML and CSS
  116. Author
  117. Links
  118. Made with
  119. About the code
  120. Horizontal Navigation Effects
  121. Author
  122. Links
  123. Made with
  124. About the code
  125. Simple Menu Navigation
  126. Author
  127. Links
  128. Made with
  129. About the code
  130. Transparent Fading Navigation Bar
  131. Author
Читайте также:  Click for more html

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

Latest Post

55 Cool CSS Calendars

barcodes in css

19 Barcodes in CSS

css masonry layout examples

25 CSS Masonry Layout Examples

css card layouts

23 CSS Card Layouts

css subscribe forms

27 CSS Subscribe Forms

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Ok

Источник

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

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.

Источник

16 CSS Horizontal Menus

Collection of hand-picked free HTML and CSS horizontal menu code examples from codepen and other resources. Update of December 2018 collection. 5 new items.

Author

Made with

About the code

Pure CSS Magic Line Navbar

It’s pure CSS. All links need to have a consistent dimensions for this to work. You have to set everything up yourself in terms of telling the nav how many items there are and where the .line should move to whenever one of the links gets hovered.

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Author

Made with

About the code

Position Sticky Subnav

Sticky subnavigation in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Perspective Menus

CSS only perspective menus.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Hover Effect for Horizontal Menu

Pure CSS fading out for siblings menu options on option hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Menu Hover Line Effect

Author

Made with

About the code

Nice and simple horizontal menu with hover line effect in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS Horizontal Menu

Author

Made with

About the code

CSS Horizontal Menu

Pure CSS horizontal menu concept with clip-path property.

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: Strikethrough Hover Effect for Menu

Author

Made with

About the code

Strikethrough Hover Effect for Menu

Hover effect for menu links. Use only one pseudo-element on link.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Lavalamp CSS Menu

Author

Made with

About the code

Lavalamp CSS Menu

Horizontal CSS menu with lavalamp hover effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Horizontal Icon Navigation

Author

Made with

About the code

Horizontal Icon Navigation

Simple SVG icon horizontal navigation with shadows using flex-box .

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Slide Horizontal Menu

Author

Made with

About the code

Slide Horizontal Menu

This is a CSS only horizontal slide menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Skewed Menu in HTML and CSS

Author

Made with

About the code

Skewed Menu in HTML and CSS

Using CSS3 properties to make a no-mainstream skewed menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Horizontal Navigation Effects

Author

Made with

About the code

Horizontal Navigation Effects

Beautiful hover effects for horizontal navigation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Simple Menu Navigation

Author

Made with

About the code

Simple Menu Navigation

Just a simple horizontal menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Transparent Fading Navigation Bar

Author

Made with

About the code

Transparent Fading Navigation Bar

Transparent fading horizontal navigation bar with mask image.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Responsive Menu Effect

Author

Источник

Оцените статью
© 2024 Программирование