Post thumbnail: 15 CSS Mobile Menus

15 CSS Mobile Menus

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

Related Articles

  1. CSS Menus
  2. CSS Dropdown Menus

Demo image: Animated Mobile Menu Animated Mobile Menu - GIF Demo

Author

  • Geoffrey Crofte

Made with

  • HTML / CSS / JavaScript

About the code

Animated Mobile Menu

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

Dependencies: -

Demo image: CSS Mobile Navigation CSS Mobile Navigation - GIF Demo

Author

  • Mel Shields

Made with

  • HTML / CSS

About the code

CSS Mobile Navigation

Inspired by "Pure CSS Hamburger Fold-Out Menu" by Erik Terwan.

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

Dependencies: -

Demo image: Mobile Menu Animation Mobile Menu Animation - GIF Demo

Author

  • Stas Melnikov

Made with

  • HTML / CSS / JavaScript

About the code

Mobile Menu Animation

Works better on mobile devices. The hamburger button is comfortably available for a lefty and righty.

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

Dependencies: -

Demo image: Magical Mobile Mega Menu Magical Mobile Mega Menu - GIF Demo

Author

  • tiffany choong

Made with

  • HTML / CSS (SCSS)

About the code

Magical Mobile Mega Menu

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

Dependencies: -

Demo image: Animated Accessible Navigation Animated Accessible Navigation - GIF Demo

Author

  • Max Böck

Made with

  • HTML / CSS (SCSS) / JavaScript (Babel)

About the code

Animated Accessible Navigation

Accessible, progressive-enhanced navigation menu with a circular animated background.

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

Dependencies: -

Demo image: Mobile Menu Style Mobile Menu Style - GIF Demo

Author

  • Raiden Kaneda

Made with

  • HTML (Haml) / CSS (SCSS) / JavaScript

About the code

Mobile Menu Style

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

Dependencies: -

Demo image: Menu with Scroll Effects Menu with Scroll Effects - GIF Demo

Author

  • Ivan Bogachev

Made with

  • HTML (Pug) / CSS (PostCSS) / JavaScript (Babel)

About the code

Menu with Scroll Effects

App Menu menu with scroll & hover effects.

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

Dependencies: -

Demo image: Mobile Menu Mobile Menu - GIF Demo

Author

  • Kirsten Humphreys

Made with

  • HTML / CSS (SCSS)

About the code

Mobile Menu

Pure CSS mobile menu.

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

Dependencies: -

Demo image: Mobile Nav Mobile Nav - GIF Demo

Author

  • Max Misnikov

Made with

  • HTML / CSS (SCSS)

About the code

Mobile Nav

CSS only mobile nav trigger and menus.

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

Dependencies: -

Demo image: Pure CSS Navigation Pure CSS Navigation - GIF Demo

Author

  • Ravi Dhiman

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Pure CSS Navigation

Pure CSS navigation simple & easy.

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

Dependencies: -

Demo image: 3 Mobile Nav Animations 3 Mobile Nav Animations - GIF Demo

Author

  • Made On Mars

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

3 Mobile Nav Animations

3 Pure CSS mobile navigation animations.

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

Dependencies: -

Demo image: Mobile Menu Slider Prototype Mobile Menu Slider Prototype - GIF Demo

Author

  • Narendra N Shetty

Made with

  • HTML / CSS / JavaScript

About the code

Mobile Menu Slider Prototype

Mobile menu slider prototype in HTML, CSS and JavaScript.

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

Dependencies: -

Demo image: App Navigation App Navigation - GIF Demo

Author

  • Ian Turner

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

App Navigation

Concept for mobile app navigation.

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

Dependencies: -

Demo image: Apple Style Mobile Menu Apple Style Mobile Menu - GIF Demo

Author

  • Mathieu Lavoie

Made with

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

About the code

Apple Style Mobile Menu

Inspired by mobile menu made by Apple.

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

Dependencies: -

back to top