25+ jQuery Fullscreen Menus - Free Code + Demos

Collection of 25+ jQuery Fullscreen Menus. All items are 100% free and open-source.

1. Pure CSS Menu

jQuery Fullscreen Menus - Pure CSS menu
Author: Antonija Šimić (tonkec)
Created on: October 28, 2018
Made with: HTML, CSS

2. Fullscreen Hamburger Menu

jQuery Fullscreen Menus - Fullscreen Hamburger menu
Author: Gerhard Bliedung (bldng)
Created on: August 27, 2014
Made with: HTML, SCSS, JS

3. Burger Menu. Mobile Optimized. Modal.

jQuery Fullscreen Menus - Burger Menu. Mobile Optimized. Modal.
Author: Christopher Mally (Papawhoop)
Created on: November 1, 2016
Made with: HTML, CSS, JS

4. Responsive Animated Fullscreen Menu

jQuery Fullscreen Menus - Responsive Animated Fullscreen Menu
Author: Evan Winston (IrrelevantEvan)
Created on: August 1, 2017
Made with: HTML, CSS, JS
Tags: animation, responsive, menu, gsap, button

5. Fullscreen Menu

jQuery Fullscreen Menus - Fullscreen Menu
Author: Timo Kern (timokern)
Created on: June 29, 2018
Made with: HTML, Sass, JS

6. Typed.js Animation // Full-Screen Menu Toggle

jQuery Fullscreen Menus - Typed.js Animation // Full-Screen Menu Toggle
Author: Bridget Reed (BridgetCReed)
Created on: March 27, 2017
Made with: HTML, SCSS, JS
Tags: type.js, type, animation, bootstrap, menu-toggle

7. CSS Overlay Navigation Animation

jQuery Fullscreen Menus - CSS Overlay Navigation Animation
Experimenting with a full screen menu.
Author: Ryan Mulligan (hexagoncircle)
Created on: December 6, 2015
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css-animation, menu, overlay, full-screen

8. Footer In Menu

jQuery Fullscreen Menus - Footer in Menu
An idea to free up real estate by putting the footer links into a full screen menu.
Author: Taylor Palmer (tpalmer75)
Created on: July 12, 2014
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: responsive, menu, footer, combine

9. JQuery Fatnav

Chubby fullscreen menu with nice hamburger toggle
Created on: April 17, 2015

10. Full Screen Menu Animation

jQuery Fullscreen Menus - Full screen menu animation
Author: lichinlin (lichin-lin)
Created on: March 20, 2016
Made with: Pug, Stylus, JS
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: menu, navbar, animation, button, transition

11. JQuery Fullscreen Menu

jQuery Fullscreen Menus - JQuery Fullscreen Menu
Author: Paul van Oijen (PaulVanO)
Created on: March 1, 2015
Made with: HTML, SCSS, JS
Tags: menu, navigation, overlay, nav, fullscreen

12. Menu Navigation Animation

jQuery Fullscreen Menus - Menu Navigation Animation
Author: UWANG20 (juan-carlo-isidro-onciangco)
Created on: August 15, 2020
Made with: HTML, CSS, JS
Tags: menu, navigation, navbar, animationmenu, animation

13. Awesome Menu With JQuery ✨

jQuery Fullscreen Menus - Awesome Menu With JQuery ✨
A unique way to welcome visitors on your website/portfolio ! Fluid Animations, pixel perfect design...everything you need to impress and stay simple ^^
Author: Med Redha (RedhaDirac)
Created on: June 7, 2020
Made with: HTML, CSS, JS
Tags: animation, css3, javascript, html, menu

14. Full Screen Slide Menu

jQuery Fullscreen Menus - Full screen slide menu
Author: senthil raja (scorpionsera)
Created on: July 15, 2016
Made with: HTML, CSS, JS

15. Fullscreen Menu Flexbox Method

jQuery Fullscreen Menus - Fullscreen Menu Flexbox Method
Chrome and Firefox good... IE bad, no transition support for flex property.
Author: Marcus Hall (flurrd)
Created on: March 17, 2016
Made with: Slim, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Slim
Tags: flexbox, fullscreen, menu

16. Minimal Fullscreen Menu

jQuery Fullscreen Menus - Minimal Fullscreen Menu
Author: Paul van Oijen (PaulVanO)
Created on: March 1, 2015
Made with: HTML, SCSS, JS
Tags: menu, navigation, overlay, nav, fullscreen

17. Full Screen Menu With Animated Burger Icon

jQuery Fullscreen Menus - Full Screen Menu with Animated Burger Icon
A full screen menu design I created for a customer that uses basic html, css and jquery markup. This pen is fully responsive and easy to implement into your own site. Please feel free to use just give me a shout out :)
Author: Sam Wyness (samwyness)
Created on: April 13, 2016
Made with: HTML, CSS, JS
Tags: full-screen-menu, menu, material design, burger, animation

18. Simple Full-screen Navigation Menu

jQuery Fullscreen Menus - Simple full-screen navigation menu
Author: Alen (alenvuletic)
Created on: July 21, 2015
Made with: HTML, Less, JS
Tags: html, css, javascript, navigation, full-screen

19. Full Screen Burger Menu

jQuery Fullscreen Menus - Full screen burger menu
Hamburger menu to expand to full screen when toggled. Will close when clicking/touching anywhere but an actual link.
Author: Paul Sullivan (pwsm50)
Created on: October 7, 2014
Made with: HTML, SCSS, JS
Tags: css, jquery, hamburger, menu

20. Full-Screen Menu Overlay

jQuery Fullscreen Menus - Full-Screen Menu Overlay
A full-screen menu, showcasing your brand and website navigation. Built using css3 and vanilla JS....
Author: Alikhani98 (Alikhani98)
Created on: July 25, 2017
Made with: HTML, CSS, JS
Tags: menu, menu overlay

21. Fullscreen Navigation

jQuery Fullscreen Menus - Fullscreen Navigation
CSS Hamburger Animation taken from http://codepen.io/designcouch/details/Atyop/
Author: Marcus Bizal (marcbizal)
Created on: June 25, 2015
Made with: HTML, SCSS, JS
Tags: nav, css-animation, fullscreen, hamburger

jQuery Context Menu Examples

1. Pure CSS Menu

jQuery Fullscreen Menus - Pure CSS menu
Author: Antonija Šimić (tonkec)
Created on: October 28, 2018
Made with: HTML, CSS

2. Fullscreen Hamburger Menu

jQuery Fullscreen Menus - Fullscreen Hamburger menu
Author: Gerhard Bliedung (bldng)
Created on: August 27, 2014
Made with: HTML, SCSS, JS

3. Burger Menu. Mobile Optimized. Modal.

jQuery Fullscreen Menus - Burger Menu. Mobile Optimized. Modal.
Author: Christopher Mally (Papawhoop)
Created on: November 1, 2016
Made with: HTML, CSS, JS

4. Responsive Animated Fullscreen Menu

jQuery Fullscreen Menus - Responsive Animated Fullscreen Menu
Author: Evan Winston (IrrelevantEvan)
Created on: August 1, 2017
Made with: HTML, CSS, JS
Tags: animation, responsive, menu, gsap, button

5. Fullscreen Menu

jQuery Fullscreen Menus - Fullscreen Menu
Author: Timo Kern (timokern)
Created on: June 29, 2018
Made with: HTML, Sass, JS

6. Typed.js Animation // Full-Screen Menu Toggle

jQuery Fullscreen Menus - Typed.js Animation // Full-Screen Menu Toggle
Author: Bridget Reed (BridgetCReed)
Created on: March 27, 2017
Made with: HTML, SCSS, JS
Tags: type.js, type, animation, bootstrap, menu-toggle

7. CSS Overlay Navigation Animation

jQuery Fullscreen Menus - CSS Overlay Navigation Animation
Experimenting with a full screen menu.
Author: Ryan Mulligan (hexagoncircle)
Created on: December 6, 2015
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css-animation, menu, overlay, full-screen

8. Footer In Menu

jQuery Fullscreen Menus - Footer in Menu
An idea to free up real estate by putting the footer links into a full screen menu.
Author: Taylor Palmer (tpalmer75)
Created on: July 12, 2014
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: responsive, menu, footer, combine

jQuery Fullscreen Menu Plugins

1. JQuery Fatnav

Chubby fullscreen menu with nice hamburger toggle
Created on: April 17, 2015