25+ CSS Fullscreen Menus (Free Code + Examples)
Enjoy this 100% free and open source collection of HTML and CSS fullscreen menu code examples. These fullscreen css menus are easy to use and all have great UX.
1. Burger
Burger - The minimal hamburger menu with fullscreen navigation.
Author: Matthew Blode (mblode)
Links: Source Code / Demo, Github Page
Created on: April 4, 2015
Made with: HTML, SCSS, JS
Tags: burger, menu, navigation, vertical, hamburger
2. Full Width Menu & SVG Animation
Author: Brandon Ward (brandondward)
Links: Source Code / Demo
Created on: May 15, 2017
Made with: HTML, SCSS, JS
3. Material Design Menu
Material design inspired 'growing' menu? Not sure what to call it to be honest. No jQuery used.
Author: Arjan Jassal (arjancodes)
Links: Source Code / Demo
Created on: December 16, 2014
Made with: HTML, SCSS, JS
Tags: material, design, menu, hamburger, css
4. Pure CSS Fullscreen Menu
Author: Antonija Šimić (tonkec)
Links: Source Code / Demo
Created on: October 28, 2018
Made with: HTML, CSS
5. Fullscreen CSS Menu Concept
One more for the collection, this one includes a custom menu icon, i think the animation became great.
Author: Rune Sejer Hoffmann (RSH87)
Links: Source Code / Demo
Created on: May 28, 2017
Made with: HTML, SCSS, Babel
Tags: menu, burger, concept, minimalistic
6. Simple And Responsive Menu (HTML5 And CSS3 Only)
A simple and responsive menu. HTML5 and CSS3 only. No jQuery. IE11 friendly. The menu list was inspired by Bad Websites Examples: Top 50 Worst Websites Designs That Will Make You Cringe! by Ranking by SEO.
Author: Erin E. Sullivan (erinesullivan)
Links: Source Code / Demo
Created on: February 5, 2018
Made with: HTML, CSS
Tags: responsive-menu, responsive, hamburger
7. PureCSS Fullscreen Menu
Pure CSS fullscreen menu concept.
Author: Akshay Nair (phenax)
Links: Source Code / Demo
Created on: January 9, 2016
Made with: HTML, SCSS
Tags: pure, css, fullscreen, menu, hamburger
8. Pure CSS Menu
Author: Antonija Šimić (tonkec)
Links: Source Code / Demo
Created on: October 28, 2018
Made with: HTML, CSS
9. Pure CSS Fullscreen Navigation Menu
Author: Brenden Palmer (brenden)
Links: Source Code / Demo
Created on: May 17, 2015
Made with: HTML, Less, JS
10. Pure CSS3 Menu FullScreen
A Fullscreen Menu with transitions and effects with pure CSS3. No Jquery or similars.
Author: Paulo César da Conceição Ferreira Junior (paulocesarpcfj)
Links: Source Code / Demo
Created on: August 14, 2015
Made with: HTML, CSS
Tags: css3, fullscreen menu, pure-css, menu
11. Fullscreen Overlay Menu (Pure CSS)
Overlay fades in and menu rotates slightly in perspective. Pure css. Idea was taken from http://tympanus.net/codrops/2014/02/06/fullscreen-overlay-effects/ .
Author: Osama (daghash)
Links: Source Code / Demo
Created on: February 14, 2019
Made with: HTML, CSS, JS
Tags: overlay, menu, transparent, fade, perspective
12. Iframe VRWix Virtual Tour
Refer this codepen to add your business virtual tour in your website
Author: Sidhesh Yeram (syeram)
Links: Source Code / Demo
Created on: June 9, 2020
Made with: HTML, CSS
Tags: vrwix, iframe, fullscreen
13. Fullscreen Menu Enter
Author: alphardex (alphardex)
Links: Source Code / Demo
Created on: June 12, 2020
Made with: HTML, SCSS
Tags: menu, fullscreen, hover, reveal
14. Full-Screen Menu Overlay
A full-screen menu, showcasing your brand and website navigation. Built using SCSS and vanilla JS.
Author: Cvetoslav Ludmiloff (ludmiloff)
Links: Source Code / Demo
Created on: January 7, 2018
Made with: HTML, SCSS, JS
Tags: navigation, animation, menu, hamburger, responsive
15. Efeito - Hamburger Menu Full Screen
Desafio 30 dias CSS - dia 15
Author: Sthéffane Nunes (StheffaneNunes)
Links: Source Code / Demo
Created on: August 19, 2020
Made with: HTML, CSS
Tags: 30diasdecss, hamburgermenu, menu, css, purecss
16. Bootstrap 4 Fullscreen Navigation Menu
Links: Source Code / Demo
Made with: HTML, CSS, JS
Tags: 4.0.0, jQuery, menu, navigation
17. Pure CSS Menu
Author: Ivan Grozdic (ig_design)
Links: Source Code / Demo
Created on: July 5, 2020
Made with: HTML, CSS, JS
Tags: navigation, menu, overlay, hamburger, animation
18. Fullscreen Menu Using Bootstrap Collapse ABSOLUTE
Author: kenpb (kenpb)
Links: Source Code / Demo
Created on: July 31, 2016
Made with: HTML, Less
Tags: bootstrap, menu
19. Menu II - Particles And Bats
Author: Zarko Rvovic (nocni_sovac)
Links: Source Code / Demo
Created on: August 17, 2020
Made with: HTML, SCSS, JS
Tags: menu, css, animation, hamburger, halloween
20. Jacket Hamburger Menu
Hi everyone, this is an Animated Hamburger menu of a Jacket Landing Page. Purely made through HTML and CSS. I would love to hear your feedback. Feel free to drop any comments.
Author: Zaid Irfan Khan (zaidik)
Links: Source Code / Demo
Created on: June 20, 2020
Made with: HTML, CSS
Tags: hamburger, html, animation, css, menu
More Awesome Lists:
Share: