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. CSS Menus
  2. CSS Circle Menus
  3. CSS Dropdown Menus
  4. CSS Mobile Menus
  5. CSS Sidebar Menus
  6. CSS Horizontal Menus
  7. CSS Sliding Menus
  8. CSS Toggle Menus
  9. CSS Off-Canvas Menus

Author

  • kiran raj r

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

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

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

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

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

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/)

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

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

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ć

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

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

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

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

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

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

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

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

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

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

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

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