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

  1. CSS Menus
  2. CSS Circle Menus
  3. CSS Dropdown Menus
  4. CSS Mobile Menus
  5. CSS Sidebar Menus
  6. CSS Horizontal Menus
  7. CSS Fullscreen Menus
  8. CSS Sliding Menus
  9. CSS Off-Canvas Menus
Demo image: Hidden Menu Hidden Menu - GIF Demo

Creator

  • José Reyes González

Programming language

  • HTML / CSS (SCSS)

Information the code

Hidden Menu

HTML5 and CSS3 hidden menu.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

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

Creator

  • Ines Montani

Programming language

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

Information the code

Vertical Color-Adapting CSS Menu

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

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

Creator

  • Akshay Nair

Programming language

  • HTML / CSS (SCSS)

Information the code

Pure CSS Toggle Menu

Its a simple toggle menu for header.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

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

Creator

  • Ettrics

Programming language

  • HTML / CSS (SCSS) / JavaScript

Information the code

Vertical Layout with Navigation

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, jquery.js

Demo image: Gooey Menu Gooey Menu - GIF Demo

Creator

  • Lucas Bebber

Programming language

  • HTML / CSS (SCSS)

Information the code

Gooey Menu

Gooey menu with CSS and SVG filters. Version 1.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

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

Creator

  • Lucas Bebber

Programming language

  • HTML / CSS (SCSS)

Information the code

CSS Gooey Menu (Version 2)

Gooey menu with CSS and SVG filters. Version 2.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

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

Creator

  • Lucas Bebber

Programming language

  • HTML / CSS (SCSS)

Information the code

CSS Gooey Menu (Version 3)

Gooey menu with CSS and SVG filters. Version 3.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

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

Creator

  • Lucas Bebber

Programming language

  • HTML / CSS (SCSS)

Information the code

CSS Gooey Menu (Version 4)

Gooey menu with CSS and SVG filters. Version 4.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

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

Creator

  • Jeplaa

Programming language

  • HTML / CSS

Information the code

Dropdown Menu UI

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

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

Creator

  • Travis

Programming language

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

Information 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.

Browser Support: 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

Creator

  • Geoffrey Crofte

Programming language

  • HTML / CSS / JavaScript

Information the code

Menu Toggle Button with Flat Menu

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: