Collection of hand-picked free HTML and CSS mobile menu code examples. Update of October 2018 collection. 1 new item.

Related Articles

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

Author

  • Geoffrey Crofte

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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