Collection of free jQuery fullscreen menu code examples and plugins from Codepen, Github and other resources. Update of November 2021 collection. 3 new items.

Related Articles

  1. CSS Fullscreen Menus

Table of Contents:

  1. jQuery Fullscreen Menu Examples
  2. jQuery Fullscreen Menu Plugins

jQuery Fullscreen Menu Examples

Author

  • Timo Kern

Links

Made with

  • HTML / CSS (Sass) / JS

About a code

Fullscreen Menu

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

Responsive: yes

Dependencies: jquery.js

Author

  • Nvagelis

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Fullscreen Menu

Full screen menu with jQuery and TweenMax animations.

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

Responsive: yes

Dependencies: jquery.js, tweenmax.js

Author

  • Camden Foucht

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Fullscreen Menu

Fullscreen flex menu in jQuery.

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

Responsive: yes

Dependencies: jquery.js

Author

  • Evan Winston

Links

Made with

  • HTML / CSS / JS

About a code

Animated Fullscreen Menu

Responsive animated fullscreen menu in jQuery.

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

Responsive: yes

Dependencies: bootstrap.css, animate.css, jquery.js, bootstrap.js, tweenmax.js

Author

  • veronika

Links

Made with

  • HTML / CSS / JS

About a code

Fullscreen Menu

Fullscreen menu with CSS Flexbox & jQuery.

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

Responsive: yes

Dependencies: jquery.js

Author

  • Bridget Reed

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Full-Screen Menu Toggle

Full-screen menu toggle with typed.js animation.

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

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, animate.css, jquery.js, typed.js, tweenmax.js

Author

  • Ryan Gregory

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Sliding Full Screen Menu Panels

Sliding full screen menu panels transition.

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

Responsive: yes

Dependencies: tweenmax.js

Author

  • Islam Ibakaev

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Portfolio Page with Animations

Super awesome portfolio with off-canvas menu and a lot of animations.

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

Responsive: yes

Dependencies: bootstrap.css, jquery.waypoints.js, tweenmax.js

Author

  • Marcus Hall

Links

Made with

  • HTML (Slim) / CSS (SCSS) / JS

About a code

Fullscreen Menu Flexbox Method

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

Responsive: no

Dependencies: -

Author

  • Mirko Zorić

Links

Made with

  • HTML / CSS / JS

About a code

Flexbox Overlay Navigation

Velocity.js fullscreen Flexbox overlay navigation.

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

Responsive: yes

Dependencies: velocity.js, velocity.ui.js

Author

  • Ryan Mulligan

Links

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Overlay Navigation Animation

Experimenting with a full screen menu.

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

Responsive: yes

Dependencies: jquery.js

Author

  • Paul van Oijen

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Fullscreen Menu Type #1

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

Responsive: no

Dependencies: animate.css, wow.js

Demo image: Accessible Fullscreen Overlay Menu

Author

  • RaziTazi

Links

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Accessible Fullscreen Overlay Menu

A fairly accessible fullscreen overlay menu built with jQuery and CSS.

Demo image: Quick And Easy Fullscreen Menu

Author

  • Luigi Mannoni

Links

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

About the code

Quick And Easy Fullscreen Menu

Crafted and debugged in 5 minutes, IE10+ compatible. Might not be ideal for production but would help you if you need a quick working responsive and modern menu.

Demo image: Fullscreen Menu

Author

  • Gerhard Bliedung

Links

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

About the code

Fullscreen Menu

Fullscreen hamburger menu.

Author

  • Taylor Palmer

Links

Made with

  • HTML (Pug) / CSS (Sass) / JS

About a code

Footer In Menu

An idea to free up real estate by putting the footer links into a full screen menu.

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

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Author

  • Una Kravets

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Animated Menu

Simple animated fullscreen menu in jQuery.

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

Responsive: yes

Dependencies: -

jQuery Fullscreen Menu Plugins

Author

  • Pete R.

Links

Made with

  • HTML / CSS / JS

About a code

Square-Like Menu

Create a Square-like Menu Animation for Website using jQuery and CSS3.

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

Responsive: yes

Dependencies: jquery.js

Author

  • Adrien Glitchbone

Links

Made with

  • HTML / CSS / JS

About a code

jQuery FatNav

Fullscreen menu with nice hamburger toggle.

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

Responsive: yes

Dependencies: jquery.js