React App

Codebrahma

Fade In-Out Slide In-Out Move Up-Down Scale Up-Down Scale Down-Up

Codebrahma

FADE IN-OUT SLIDE IN-OUT MOVE UP-DOWN SCALE UP-DOWN SCALE DOWN-UP

FADE IN-OUT

Here the submenu will fade in and scale up from the back and the current level will fade out and move down. Open Menu

class Menu extends React.Component {
  render() {
    const menuItems = [
      {
        value: "Fashion",
        items: [
          {
            value: "Men",
            items: [
              {
                value: "Shirts"
              }
            ]
          },
          {
            value: "Women",
            items: [
              {
                value: "Jackets"
              },
              {
                value: "T-Shirts"
              },
              {
                value: "Underwear"
              }
            ]
          },
          {
            value: "Children"
          }
        ]
      },
      {
        value: "Electronics"
      },
      {
        value: "Furnitures",
        items: []
      },
      {
        value: "Jewelery&watches",
        items: []
      }
    ];
    const color = "#c62860";
    const animation = ["fadeIn", "fadeOut"];

    return (
      <Menubar backgroundColor={color} data={menuItems} animation={animation} />
    );
  }
}

class Menu extends React.Component {
  render() {
    const menuItems = [
      {
        value: "Fashion",
        items: [
          {
            value: "Men",
            items: [
              {
                value: "Shirts"
              }
            ]
          },
          {
            value: "Women",
            items: [
              {
                value: "Jackets"
              },
              {
                value: "T-Shirts"
              },
              {
                value: "Underwear"
              }
            ]
          },
          {
            value: "Children"
          }
        ]
      },
      {
        value: "Electronics"
      },
      {
        value: "Furnitures",
        items: []
      },
      {
        value: "Jewelery&watches",
        items: []
      }
    ];
    const color = "#c62860";
    const animation = ["fadeIn", "fadeOut"];
    return (
      <Menubar backgroundColor={color} data={menuItems} animation={animation} />
    );
  }
}

SLIDE IN-OUT

The submenu of this menu will slide to the side and fade out. Going a level deeper will slide the submenu from the right; going back will slide from the left.

class Menu extends React.Component {
  render() {
    const menuItems = [
      {
        value: "Fashion",
        items: [
          {
            value: "Men",
            items: [
              {
                value: "Shirts"
              }
            ]
          },
          {
            value: "Women",
            items: [
              {
                value: "Jackets"
              },
              {
                value: "T-Shirts"
              },
              {
                value: "Underwear"
              }
            ]
          },
          {
            value: "Children"
          }
        ]
      },
      {
        value: "Electronics"
      },
      {
        value: "Furnitures",
        items: []
      },
      {
        value: "Jewelery&watches",
        items: []
      }
    ];
    const color = "#e86814";
    const animation = ["slideIn", "slideOut"];

    return (
      <Menubar backgroundColor={color} data={menuItems} animation={animation} />
    );
  }
}

class Menu extends React.Component {
  render() {
    const menuItems = [
      {
        value: "Fashion",
        items: [
          {
            value: "Men",
            items: [
              {
                value: "Shirts"
              }
            ]
          },
          {
            value: "Women",
            items: [
              {
                value: "Jackets"
              },
              {
                value: "T-Shirts"
              },
              {
                value: "Underwear"
              }
            ]
          },
          {
            value: "Children"
          }
        ]
      },
      {
        value: "Electronics"
      },
      {
        value: "Furnitures",
        items: []
      },
      {
        value: "Jewelery&watches",
        items: []
      }
    ];
    const color = "#e86814";
    const animation = ["slideIn", "slideOut"];
    return (
      <Menubar backgroundColor={color} data={menuItems} animation={animation} />
    );
  }
}

MOVE UP-DOWN

Here the submenu will fade in and scale up from the back and the current level will fade out and move down.

class Menu extends React.Component {
  render() {
    const menuItems = [
      {
        value: "Fashion",
        items: [
          {
            value: "Men",
            items: [
              {
                value: "Shirts"
              }
            ]
          },
          {
            value: "Women",
            items: [
              {
                value: "Jackets"
              },
              {
                value: "T-Shirts"
              },
              {
                value: "Underwear"
              }
            ]
          },
          {
            value: "Children"
          }
        ]
      },
      {
        value: "Electronics"
      },
      {
        value: "Furnitures",
        items: []
      },
      {
        value: "Jewelery&watches",
        items: []
      }
    ];
    const color = "#08cbc4";
    const animation = ["moveUp", "moveDown"];

    return (
      <Menubar backgroundColor={color} data={menuItems} animation={animation} />
    );
  }
}

class Menu extends React.Component {
  render() {
    const menuItems = [
      {
        value: "Fashion",
        items: [
          {
            value: "Men",
            items: [
              {
                value: "Shirts"
              }
            ]
          },
          {
            value: "Women",
            items: [
              {
                value: "Jackets"
              },
              {
                value: "T-Shirts"
              },
              {
                value: "Underwear"
              }
            ]
          },
          {
            value: "Children"
          }
        ]
      },
      {
        value: "Electronics"
      },
      {
        value: "Furnitures",
        items: []
      },
      {
        value: "Jewelery&watches",
        items: []
      }
    ];
    const color = "#08cbc4";
    const animation = ["moveUp", "moveDown"];
    return (
      <Menubar backgroundColor={color} data={menuItems} animation={animation} />
    );
  }
}

SCALE UP-DOWN

The submenu in this demo will scale up from the back and fade in while the current level scales up and fades out.

class Menu extends React.Component {
  render() {
    const menuItems = [
      {
        value: "Fashion",
        items: [
          {
            value: "Men",
            items: [
              {
                value: "Shirts"
              }
            ]
          },
          {
            value: "Women",
            items: [
              {
                value: "Jackets"
              },
              {
                value: "T-Shirts"
              },
              {
                value: "Underwear"
              }
            ]
          },
          {
            value: "Children"
          }
        ]
      },
      {
        value: "Electronics"
      },
      {
        value: "Furnitures",
        items: []
      },
      {
        value: "Jewelery&watches",
        items: []
      }
    ];
    const color = "#90b912";
    const animation = ["scaleUp", "scaleDown"];
    return (
      <Menubar backgroundColor={color} data={menuItems} animation={animation} />
    );
  }
}

class Menu extends React.Component {
  render() {
    const menuItems = [
      {
        value: "Fashion",
        items: [
          {
            value: "Men",
            items: [
              {
                value: "Shirts"
              }
            ]
          },
          {
            value: "Women",
            items: [
              {
                value: "Jackets"
              },
              {
                value: "T-Shirts"
              },
              {
                value: "Underwear"
              }
            ]
          },
          {
            value: "Children"
          }
        ]
      },
      {
        value: "Electronics"
      },
      {
        value: "Furnitures",
        items: []
      },
      {
        value: "Jewelery&watches",
        items: []
      }
    ];
    const color = "#90b912";
    const animation = ["scaleUp", "scaleDown"];
    return (
      <Menubar backgroundColor={color} data={menuItems} animation={animation} />
    );
  }
}

SCALE DOWN-UP

The submenu in this demo will scale down from the front while the current level scales down and fades out.

class Menu extends React.Component {
  render() {
    const menuItems = [
      {
        value: "Fashion",
        items: [
          {
            value: "Men",
            items: [
              {
                value: "Shirts"
              }
            ]
          },
          {
            value: "Women",
            items: [
              {
                value: "Jackets"
              },
              {
                value: "T-Shirts"
              },
              {
                value: "Underwear"
              }
            ]
          },
          {
            value: "Children"
          }
        ]
      },
      {
        value: "Electronics"
      },
      {
        value: "Furnitures",
        items: []
      },
      {
        value: "Jewelery&watches",
        items: []
      }
    ];
    const color = "#744783";
    const animation = ["scaleDown", "scaleUp"];

    return (
      <Menubar backgroundColor={color} data={menuItems} animation={animation} />
    );
  }
}

class Menu extends React.Component {
  render() {
    const menuItems = [
      {
        value: "Fashion",
        items: [
          {
            value: "Men",
            items: [
              {
                value: "Shirts"
              }
            ]
          },
          {
            value: "Women",
            items: [
              {
                value: "Jackets"
              },
              {
                value: "T-Shirts"
              },
              {
                value: "Underwear"
              }
            ]
          },
          {
            value: "Children"
          }
        ]
      },
      {
        value: "Electronics"
      },
      {
        value: "Furnitures",
        items: []
      },
      {
        value: "Jewelery&watches",
        items: []
      }
    ];
    const color = "#744783";
    const animation = ["scaleDown", "scaleUp"];
    return (
      <Menubar backgroundColor={color} data={menuItems} animation={animation} />
    );
  }
}

Responsive React Multi-Level Menu

FADE IN-OUT

SLIDE IN-OUT

MOVE UP-DOWN

SCALE UP-DOWN

SCALE DOWN-UP