https://github.com/biasiolo/gooey-interactive-menu

This project consists of an interactive menu with animated bubbles, created to add a dynamic and engaging visual experience to your website. The bubbles are stylized and animated randomly, providing a fun and modern touch to user navigation.
https://github.com/biasiolo/gooey-interactive-menu

animated-menu bubbles gooey gooey-menu javascript menu menu-navigation user-interface ux-design

Last synced: 2 months ago
JSON representation

This project consists of an interactive menu with animated bubbles, created to add a dynamic and engaging visual experience to your website. The bubbles are stylized and animated randomly, providing a fun and modern touch to user navigation.

• Host: GitHub
• URL: https://github.com/biasiolo/gooey-interactive-menu
• Owner: Biasiolo
• Created: 2023-12-20T03:48:22.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-22T00:38:29.000Z (over 1 year ago)
• Last Synced: 2025-03-03T01:09:12.847Z (3 months ago)
• Topics: animated-menu, bubbles, gooey, gooey-menu, javascript, menu, menu-navigation, user-interface, ux-design
• Language: JavaScript
• Homepage: https://gooey-interactive-menu.vercel.app
• Size: 623 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Interactive Menu with Animated Bubbles

## Application Website

Visit our [Application Website](https://gooey-interactive-menu.vercel.app/) for a live demonstration.

This project consists of an interactive menu with animated bubbles, created to add a dynamic and engaging visual experience to your website. The bubbles are stylized and animated randomly, providing a fun and modern touch to user navigation.

## Features

- **Stylized Bubbles:** Each menu point is represented by a stylized bubble with attractive visual effects.

- **Continuous Animation:** Bubbles move randomly within a central area, providing a smooth and constant animation.

- **Configurable Number of Bubbles:** The quantity of bubbles in the menu can be easily adjusted to fit your site's design.

- **Responsive:** The menu is designed to work responsively across various screen sizes.

## How to Use

1. **Including JavaScript and CSS:**

   - Add the JavaScript code to your file.

   - Add the CSS code to style the bubbles.

```html

```

2. **HTML:**

   - Add a container for the menu in your HTML.

```html



    



```


3. **Customization:**

   - Adjust settings in JavaScript and CSS as needed to match your design preferences.

## Benefits

- **Visual Attraction:** Bubble animation adds a visual attraction element to your site, making the user experience more engaging.

- **Easy Customization:** The number of bubbles and other aspects of the menu can be easily customized to fit your site's style.

- **Smooth Integration:** The menu can be seamlessly integrated into any web project, providing a unique experience for visitors.

## Basic Configuration Example

```javascript

// Basic configuration example in your JavaScript file

$(document).ready(function () {

    createBubbles();

    animateBubbles();

});

```

## Example Images

![Menu 1](img/menu_1.png)

![Menu 2](img/menu_2.png)

![Menu 3](img/menu_3.png)

## Contributions

Contributions are welcome! If you encounter issues or have suggestions for improvements, feel free to open an issue or submit a pull request.

## License

This project is licensed under the [MIT License](LICENSE).

Developed by Biasiolo.