Skip to content

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

License

Notifications You must be signed in to change notification settings

Biasiolo/menu-full-screen

Repository files navigation

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

menu-img

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:

  1. Install plugin:
npm i full-screen-navigation-menu
  1. 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>
  1. 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

This project is licensed under the MIT License by BIASIOLO.


About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published