HAMBURGER MENU BUTTON INTERACTION

Hamburger menu button interaction in pure CSS.

See the Pen Hamburger Menu Button Interaction by Himalaya Singh (@himalayasingh) on CodePen.light

Author

  • Himalaya Singh

Made with

  • HTML / CSS

HAMBURGER ANIMATION

Hamburger/Close icon transition.

See the Pen Hamburger animation by Aaron Iker (@aaroniker) on CodePen.light

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS)

CLICK HIGHLIGHTER ON MENU BUTTON USING :AFTER

Using an :after pseudo element on a menu button, we can achieve a click highlighter effect. Similar to that of Google’s Material Design.

See the Pen Click highlighter on menu button using :after by Rhys Matthew (@rhyspacker) on CodePen.light

Author

  • Rhys Matthew P

Made with

  • HTML / CSS (SCSS) / JavaScript

HAMBURGER MENU

Simple hamburger menu icon with little jQuery.

See the Pen CSS Challenge – Day 2 by Elitsa Dimitrova (@bella_elle) on CodePen.light

Author

  • Elitsa Dimitrova

Made with

  • HTML / CSS / JavaScript

HAMBURGER MENUS

Menu CSS only effects.

See the Pen Menu test – css only – effects by Sil van Diepen (@silvandiepen) on CodePen.light

Author

  • Sil van Diepen

Made with

  • HTML (Pug) / CSS (SCSS)

FLIPPING BURGERS

A set of hamburger menu open/close animations in SVG, HTML and CSS.

See the Pen Flippin’ burgers by Mikael Ainalem (@ainalem) on CodePen.light

Author

  • Mikael Ainalem

Made with

  • HTML / CSS

CSS HAMBURGER MENUS

Hamburger menu animations, all with pure CSS.

See the Pen CSS hamburger menus by rosalieelphick (@rosalieelphick) on CodePen.light

Author

  • rosalieelphick

Made with

  • HTML / CSS

HAMBURGER MENU ANIMATIONS

Four different menu animations for menu button toggle between hamburger, cross and back icon.

See the Pen Hamburger Menu Animations by Tamino Martinius (@Zaku) on CodePen.light

Author

  • Tamino Martinius

Made with

  • HTML / CSS (PostCSS)

BUTTON NAVIGATION

Animated button nav (single element with drawing style) by using CSS & JavaScript.

See the Pen Menu Button #3 by Amli (@uzcho_) on CodePen.light

Author

  • Amli

Made with

  • HTML / CSS / JavaScript

MENU ICON WITH A SPIN

See the Pen Menu icon with a spin by Sean B (@Chesswithsean) on CodePen.light

Author

  • Sean B

Made with

  • HTML / CSS (SCSS)

HAMBURGER ICON WITH CHECKBOXES

See the Pen #CodePenChallenge – Fun with Checkboxes by Tony Banik (@banik) on CodePen.light

Author

  • Tony Banik

Made with

  • HTML (Slim) / CSS (SCSS)

HAMBURGER MENU

See the Pen hamburger menu by Gareth (@nissacjg) on CodePen.light

Author

  • Gareth

Made with

  • HTML / CSS

HAMBURGER ICONS ANIMATIONS

CSS hamburger icons with great hover states and animations.

See the Pen Hamburger Icons Animations by Ahmad Emran (@ahmadbassamemran) on CodePen.light

Author

  • Ahmad Emran

Made with

  • HTML
  • CSS
  • JavaScript

FLIPPING MENU TOGGLE

What the flip is this? Not ideal for production but here’s a fun menu toggle experiment with CSS animations.

See the Pen Flipping Menu Toggle by Ryan Mulligan (@hexagoncircle) on CodePen.light

Author

  • Ryan Mulligan

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript

COOL HAMBURGER TOGGLE EFFECT

Creative hamburger toggle effect.

See the Pen Cool hamburger toggle effect by Kriszta (@vajkri) on CodePen.light

Author

  • Kriszta

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

HAMBURGER BUTTON

Sexy hamburger button.

See the Pen Sexy hamburger button by Rodrigo Sousa (@rodrigosousa) on CodePen.light

Author

  • Rodrigo Sousa

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

HAMBURGER OPEN ANIMATION

HTML, CSS and JS hamburger open animation.

See the Pen Hamburger Open Animation by Sarath AR (@sarath-ar) on CodePen.light

Author

  • Sarath AR
  • 23.08.2017

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

SVG MENU ANIMATION

Hamburger menu animtion with svg element.

See the Pen SVG Menu Animation by thelaazyguy (@thelaazyguy) on CodePen.light

Author

  • thelaazyguy
  • 01.08.2017

Made with

  • HTML
  • CSS
  • JavaScript
  • SVG

HAMBURGER ICON ANIMATION

Simple CSS hamburger icon animation with little jQuery.

See the Pen Hamburger Icon animation by Ajay (@AjayBear) on CodePen.light

Author

  • Ajay
  • 29.06.2017

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

MENU ANIMATION

Hamburger menu animation.

See the Pen Menu animation by Valery Alikin (@AlikinVV) on CodePen.light

Author

  • Valery Alikin

Made with

  • HTML
  • CSS/Less
  • JavaScript (jquery.js)

HAMBURGER MENU BUTTON

HTML, CSS and JavaScript hamburger menu button.

See the Pen Hamburger Menu Button by José Rosário (@JoseRosario) on CodePen.light

Author

  • Jose Rosario
  • 29.03.2017

Made with

  • HTML
  • CSS
  • JavaScript

3D HAMBURGER TRANSFORMICON

3D hamburger transformation with HTML, CSS and JS.

See the Pen 3D Hamburger Transformicon by Bennett Feely (@bennettfeely) on CodePen.light

Author

  • Bennett Feely
  • 13.03.2017

Made with

  • HTML/Haml
  • CSS/SCSS
  • JavaScript (jquery.js)

Click Me! Hamburger Menu

Original shot https://dribbble.com/shots/3323188-Experimental-Hamburger-Menue

See the Pen Click me! Hamburger menu by Alexandr Izumenko (@Izumenko) on CodePen.light

Author

  • Alexandr Izumenko

Made with

  • Html / CSS (SCSS)
Demo and Download

HALF SECOND HAMBURGER HELPER

A showcase of hamburger menus.

See the Pen Half Second Hamburger Helper by Kurt Petrek (@KPCodes) on CodePen.light

Author

  • Kurt Petrek

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

Hamburger Icon Animations

12 hamburger icon animations.

See the Pen Hamburger Icon Animations by Rosa (@RRoberts) on CodePen.light

Author

  • Steven Roberts

Made with

  • Html / CSS (SCSS)
Demo and Download

Atomic Hamburger Menu CSS

HTML and CSS atomic hamburger menu.

See the Pen Atomic Hamburger Menu CSS by Alex Coven (@alcoven) on CodePen.light

Author

  • Alex Coven

Made with

  • Html / CSS
Demo and Download

Hamburger Icon Animations

Hamburger icon animations in HTML, CSS and JavaScript.

See the Pen Hamburger Icon Animations by Carlos (@carlosriera) on CodePen.light

Author

  • Carlos

Made with

  • Html / CSS /Javascript
Demo and Download

Animated Burger/Menu Icon

HTML, CSS and JavaScript animated burger/menu icon.

See the Pen Animated Burger/Menu Icon by Nicholas M. Smith (@icutpeople) on CodePen.light

Author

  • Nicholas M. Smith

Made with

  • Html / CSS / Javascript
Demo and Download

Hamburger Menu Elastic

Hamburger menu elastic with HTML, CSS and JavaScript.

See the Pen hamburger menu elastic by Davide Cantelli (@cant89) on CodePen.light

Author

  • Davide Cantelli

Made with

  • Html / CSS /Javascript
Demo and Download

20 Menu Buttons To Hamburger

Menu button to hamburger. Styled & animated with pure CSS.

See the Pen Menu button to Hamburger – styled & animated with pure CSS by Yinxi Chen (@kaylolo) on CodePen.light

Author

  • Yinxi Chen

Made with

  • CSS
Demo and Download

Animated Menu Icon

Animated menu icon toggling between hamburger for open and X for exit.

See the Pen Animated Menu Icon by Eric Grucza (@egrucza) on CodePen.light

Author

  • Eric Grucza

Made with

  • Html / CSS
Demo and Download

Simple Navbar Toggle To X (Vanilla JS)

A simple CSS and JS solution to make a standard Navbar “hamburger” into an X on click, and then back to a hamburger when clicked. Requires no dependencies, written with vanilla JS.

See the Pen Simple Navbar Toggle to X (Vanilla JS) by Joseph Gengarella (@Wyrlor) on CodePen.light

Author

  • Joseph Gengarella

Made with

  •  CSS
Demo and Download

CSS(SASS) Hamburger Menu Animation

A small hover animation on a hamburger menu icon.

See the Pen CSS(SASS) Hamburger Menu Animation by Derek Morash (@derekmorash) on CodePen.light

Author

  • Derek Morash

Made with

  • CSS (SASS)
Demo and Download

Expanding Hamburger Navigation Icon

Expanding hamburger menu that displays the intent of the button more clearly than a typical hamburger menu icon.

See the Pen Expanding Hamburger Navigation Icon by Ryan Canfield (@canfie1d) on CodePen.light

Author

  • Ryan Canfield

Made with

  • Html / CSS
Demo and Download

Hamburger Menu Animation

Just another hamburger menu animation.

See the Pen Hamburger Menu Animation by Sebastian Popp (@sebastianpopp) on CodePen.light

Author

  • Sebastian Popp

Made with

  • Html / CSS
Demo and Download

Drawn Hamburger Transition

More fun with hamburger icon transitions.

See the Pen Drawn Hamburger Transition by Jesse Couch (@designcouch) on CodePen.light

Author

  • Jesse Couch

Made with

  • Html / CSS
Demo and Download

Categorized in: