Collection of hand-picked free HTML and CSS fullscreen menu code examples from codepen and other resources. Update of December 2018 collection. 11 new items.

Related Articles

  1. jQuery Fullscreen Menus

Author

  • kiran raj r

Links

Made with

  • HTML / CSS

About a code

Simple Full Screen Menu with CSS

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

Responsive: yes

Dependencies: font-awesome.css

Author

  • kiran raj r

Links

Made with

  • HTML / CSS / JS

About a code

Simple Full Screen Menu

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

Responsive: yes

Dependencies: font-awesome.css

Author

  • kiran raj r

Links

Made with

  • HTML / CSS / JS

About a code

Simple Full Screen Menu

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

Responsive: yes

Dependencies: font-awesome.css

Author

  • kiran raj r

Links

Made with

  • HTML / CSS / JS

About a code

Simple Full Screen Menu

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

Responsive: yes

Dependencies: font-awesome.css

Author

  • kiran raj r

Links

Made with

  • HTML / CSS / JS

About a code

Simple Full Screen Menu

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

Responsive: yes

Dependencies: font-awesome.css

Author

  • Sthéffane Nunes

Links

Made with

  • HTML / CSS

About a code

Hamburger Menu Full Screen

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

Responsive: yes

Dependencies: -

Author

  • Zaid (/zɛd/)

Links

Made with

  • HTML / CSS

About a code

Animated Hamburger Menu

Purely made through HTML and CSS.

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

Responsive: yes

Dependencies: font-awesome.css

Author

  • Takane Ichinose

Links

Made with

  • HTML / CSS

About a code

Full Page Nav

A concept design of full-page navigation, full of typography, and using icons as large images.

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

Responsive: yes

Dependencies: -

Author

  • Ryan Mulligan

Links

Made with

  • HTML / CSS (SCSS)

About a code

CSS Navigation

Click the toggle to open the menu and see the magic. This experiment relies on the only CSS to style, animate and position elements.

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

Responsive: yes

Dependencies: -

Demo image: Sexy Fullscreen Menu Sexy Fullscreen Menu - GIF Demo

Author

  • Antonija Šimić

Links

Made with

  • HTML / CSS

About the code

Sexy Fullscreen Menu

Sexy fullscreen menu with sexy links in HTML and CSS.

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

Dependencies: -

Author

  • Mark Claus Nunes

Links

Made with

  • HTML / CSS (SCSS)

About a code

Hamburger Menu

Pure CSS hamburger menu.

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

Responsive: yes

Dependencies: -

Demo image: HTML5 and CSS3 Only Simple and Responsive Fullscreen Menu HTML5 and CSS3 Only Simple and Responsive Fullscreen Menu - GIF Demo

Author

  • Erin E. Sullivan

Links

Made with

  • HTML / CSS

About the code

HTML5 and CSS3 Only Simple and Responsive Fullscreen Menu

A simple and responsive fullscreen menu. HTML5 and CSS3 only. No jQuery. IE11 friendly.

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

Dependencies: -

Demo image: Fullscreen Menu Concept Fullscreen Menu Concept - GIF Demo

Author

  • Rune Sejer Hoffmann

Links

Made with

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

About the code

Fullscreen Menu Concept

One more for the collection, this one includes a custom menu icon. I think the animation became great.

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

Dependencies: -

Demo image: CSS Full Width Menu CSS Full Width Menu - GIF Demo

Author

  • Brandon Ward

Links

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

CSS Full Width Menu

Full width menu & SVG animation.

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

Dependencies: font-awesome.css

Author

  • satish

Links

Made with

  • HTML / CSS

About a code

CSS Toggle Menu

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

Responsive: yes

Dependencies: -

Demo image: Fullscreen Menu Fullscreen Menu - GIF Demo

Author

  • Christopher Mally

Links

Made with

  • HTML / CSS / JavaScript

About the code

Fullscreen Menu

Burger Menu. Mobile Optimized. Modal.

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

Dependencies: -

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

Author

  • Akshay Nair

Links

Made with

  • HTML / CSS (SCSS)

About the code

Pure CSS Fullscreen Menu

Pure CSS fullscreen menu concept.

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

Dependencies: -

Demo image: Pure CSS3 Menu Fullscreen Pure CSS3 Menu Fullscreen - GIF Demo

Author

  • Paulo César da Conceição Ferreira Junior

Links

Made with

  • HTML / CSS

About the code

Pure CSS3 Menu Fullscreen

Fullscreen menu with transitions and effects with pure CSS3. No Jquery or similars.

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

Dependencies: -

Demo image: Fullscreen Navigation Menu Fullscreen Navigation Menu - GIF Demo

Author

  • Brenden Palmer

Links

Made with

  • HTML / CSS (Less)

About the code

Fullscreen Navigation Menu

Pure CSS fullscreen navigation menu.

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

Dependencies: -

Demo image: Burger - Minimal, Fullscreen Navigation Burger - Minimal, Fullscreen Navigation - GIF Demo

Author

  • Matthew Blode

Links

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Burger - Minimal, Fullscreen Navigation

Burger is a minimal hamburger menu with fullscreen navigation.

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

Dependencies: -

Demo image: Material Design Fullscreen Menu Material Design Fullscreen Menu - GIF Demo

Author

  • Arjan Jassal

Links

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Material Design Fullscreen Menu

Material Design fullscreen menu in HTML, CSS and JS. No jQuery used.

Compatible browsers: Firefox, Opera, Safari

Dependencies: -