Full Screen Navigation Menu

Enhance your website with the Full Screen Navigation Menu, a modern and interactive solution designed to upgrade user experience, with bubble animation.

Live aplication

Features

Sleek Design: The menu features a clean and contemporary design that adds a touch of sophistication to your website.
Responsive Layout: The menu is crafted to ensure optimal performance on various screen sizes, making it user-friendly across devices.
Easy integration with your website or web application
Lightweight and customizable

New features

Bubble Animation: Explore a captivating visual experience with our new bubble animation. The screen comes to life with gracefully moving bubbles, creating an engaging and dynamic atmosphere.
Glassmorphism Aesthetics: Immerse yourself in the modern design trend with the addition of glassmorphism. The menu elements showcase a sleek glass-like appearance, providing a visually appealing and immersive user interface.

Installation

To use this full-screen navigation menu in your project, follow these steps:

Install plugin:

npm i full-screen-navigation-menu

Include jQuery and the plugin in your HTML file:

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Other head elements -->
  <script src="node_modules/jquery/dist/jquery.min.js"></script>
  <script src="node_modules/full-screen-navigation-menu/menuFullScreen.js"></script>
</head>

<body>
  <!-- Your HTML content -->

  <script>
    $(document).ready(function () {
      // Initialize the plugin
      $('body').fullScreenMenu({
        menuTrigger: '.nav-trigger',
        closeButton: '.js_close_button',
        menuElement: '.nav-menu',
        animationDuration: 200
      });
    });
  </script>
</body>

</html>

Customize the menu styles and settings according to your preferences.

Usage

// Include the full-screen-menu plugin
$(document).ready(function () {
  // Initialize the plugin
  $('body').fullScreenMenu({
    menuTrigger: '.nav-trigger',
    closeButton: '.js_close_button',
    menuElement: '.nav-menu',
    animationDuration: 200
  });
});

License