11 CSS Toggle Menus

freefrontend
200 阅读2分钟
原文链接： freefrontend.com

11 CSS Toggle Menus

Collection of hand-picked free HTML and CSS toggle menu code examples.

Related Articles

  1. CSS Menus
  2. CSS Dropdown Menus
  3. CSS Mobile Menus
  4. CSS Sidebar Menus
  5. CSS Horizontal Menus
  6. CSS Fullscreen Menus

Demo image: Hidden Menu Hidden Menu - GIF Demo

Author

  • José Reyes González

Made with

  • HTML / CSS (SCSS)

About the code

Hidden Menu

HTML5 and CSS3 hidden menu.

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

Dependencies: -

Demo image: Vertical Color-Adapting CSS Menu Vertical Color-Adapting CSS Menu - GIF Demo

Author

  • Ines Montani

Made with

  • HTML (Pug) / CSS (Sass) / JavaScript

About the code

Vertical Color-Adapting CSS Menu

Simple vertical animated CSS hamburger menu with that adapts to the background color using mix-blend-mode.

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

Dependencies: -

Demo image: Pure CSS Toggle Menu Pure CSS Toggle Menu - GIF Demo

Author

  • Akshay Nair

Made with

  • HTML / CSS (SCSS)

About the code

Pure CSS Toggle Menu

Its a simple toggle menu for header.

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

Dependencies: -

Demo image: Vertical Layout with Navigation Vertical Layout with Navigation - GIF Demo

Author

  • Ettrics

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Vertical Layout with Navigation

Vertical scrolling sections of content with mobile hamburger navigation. Animations easily customized.

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

Dependencies: font-awesome.css, jquery.js

Demo image: Gooey Menu Gooey Menu - GIF Demo

Author

  • Lucas Bebber

Made with

  • HTML / CSS (SCSS)

About the code

Gooey Menu

Gooey menu with CSS and SVG filters. Version 1.

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

Dependencies: font-awesome.css

Demo image: CSS Gooey Menu (Version 2) CSS Gooey Menu (Version 2) - GIF Demo

Author

  • Lucas Bebber

Made with

  • HTML / CSS (SCSS)

About the code

CSS Gooey Menu (Version 2)

Gooey menu with CSS and SVG filters. Version 2.

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

Dependencies: font-awesome.css

Demo image: CSS Gooey Menu (Version 3) CSS Gooey Menu (Version 3) - GIF Demo

Author

  • Lucas Bebber

Made with

  • HTML / CSS (SCSS)

About the code

CSS Gooey Menu (Version 3)

Gooey menu with CSS and SVG filters. Version 3.

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

Dependencies: font-awesome.css

Demo image: CSS Gooey Menu (Version 4) CSS Gooey Menu (Version 4) - GIF Demo

Author

  • Lucas Bebber

Made with

  • HTML / CSS (SCSS)

About the code

CSS Gooey Menu (Version 4)

Gooey menu with CSS and SVG filters. Version 4.

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

Dependencies: font-awesome.css

Demo image: Dropdown Menu UI Dropdown Menu UI - GIF Demo

Author

  • Jeplaa

Made with

  • HTML / CSS

About the code

Dropdown Menu UI

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

Dependencies: font-awesome.css

Demo image: Simple Toggle Navigation Simple Toggle Navigation - GIF Demo

Author

  • Travis

Made with

  • HTML (Pug) / CSS (SCSS) / JavaScript (CoffeeScript)

About the code

Simple Toggle Navigation

Simple "bubble"-style navigation. Saw something similar on a newspaper's mobile site (I can't remember which one) and wanted to try and make it myself.

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

Dependencies: font-awesome.css, jquery.js

Demo image: Menu Toggle Button with Flat Menu Menu Toggle Button with Flat Menu - GIF Demo

Author

  • Geoffrey Crofte

Made with

  • HTML / CSS / JavaScript

About the code

Menu Toggle Button with Flat Menu

Menu toggle button with flat menu. Uses CSS transitions and vanilla JS.

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

Dependencies: -