This project was bootstrapped with Create React App.
Simple Fullscreen Menu in React with Css Transition
Live demo: react-fullscreen-menu
Including react-fullscreen-menu in your page. If you use this, make sure you have already included React, and it is available as a global variable.
npm install --save styled-components npm install --save @colpi/react-fullscreen-menuimport React, { Component } from 'react' import { FullscreenMenu } from '@colpi/react-fullscreen-menu' function Example { export const dataMenu = [ { label: 'Chi siamo', url: 'chi-siamo', sub_title: null, sub_menu: null }, { label: 'Soluzioni', url: '#', sub_title: null, sub_menu: [ { label: 'Video', sub_title: 'Gestisci i tuoi video', url: '/soluzioni/video', sub_menu: null }, { label: 'Immagini', sub_title: 'Gestisci le tue immagini', url: '/soluzioni/immagini', sub_menu: null }, { label: 'Gallerie', sub_title: 'Gestisci le tue gallerie', url: '/soluzioni/gallerie', sub_menu: null }, { label: 'Siti-web', sub_title: 'Crea i tuoi siti web', url: '/soluzioni/gallerie', sub_menu: null }, { label: 'Applicazioni', sub_title: 'Applicazioni', url: '/soluzioni/applicazioni', sub: null } ] }, { label: 'Servizi', url: '#', sub_title: null, sub_menu: [ { label: 'Comunicazione', sub_title: 'Lorem ipsum dolor sit amet dor', url: '/servizi/comunicazione', sub_menu: null }, { label: 'Fruizione', sub_title: 'Lorem ipsum dolor sit amet dor', url: '/servizi/fruizione', sub_menu: null }, { label: 'Formazione e consulenza', sub_title: 'Lorem ipsum dolor sit amet dor', url: '/servizi/formazione-e-consulenza', sub_menu: null } ] }, { label: 'I nostri clienti', url: '#', sub_title: null, sub_menu: null }, { label: 'Lavora con noi', url: 'lavora-con-noi', sub_title: null, sub_menu: null }, { label: 'Contatti', url: 'contatti', sub_title: null, sub_menu: null } ] render() { return <FullscreenMenu data={dataMenu} position="left" colorIcon="black"/> } }data: Array (required)
position: string (required)
colorIcon: string (required)
(MIT) © piero80/react-fullscreen-menu