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
- CSS Menus
- CSS Circle Menus
- CSS Dropdown Menus
- CSS Mobile Menus
- CSS Sidebar Menus
- CSS Horizontal Menus
- CSS Sliding Menus
- CSS Toggle Menus
- CSS Off-Canvas Menus
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
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
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
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
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
Links
Made with
- HTML / CSS
About a code
Hamburger Menu Full Screen
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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
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: -
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: -
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: -
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: -
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: -
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: -
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
Links
Made with
- HTML / CSS
About a code
CSS Toggle Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JavaScript
About the code
Fullscreen Menu
Burger Menu. Mobile Optimized. Modal.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
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: -
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: -
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: -
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: -
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: -